ui.igTreeGridSorting

ui.igTreeGridSorting_image

igTreeGrid の並べ替え機能を使用すると、ユーザーは、指定された列の並べ替え順序および階層に従ってグリッド内の行を順序付けできます。昇順および降順の並べ替え方向があります。この API のクラス、オプション、イベント、メソッドおよびテーマに関する詳細は、上記の関連するタブを参照してください。

この API を使用して作業を開始するための情報はここをクリックしてください。igGrid コントロールの必要なスクリプトおよびテーマを参照する方法については、 「Ignite UI で JavaScript リソースを使用する」および「Ignite UI のスタイル設定とテーマ」を参照してください。

コード サンプル

 
      <!DOCTYPE html>
      <html>
      <head>
          <!-- Infragistics Combined CSS -->
          <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
          <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />

          <!-- jQuery Core -->
          <script src="js/jquery.js" type="text/javascript"></script>

          <!-- jQuery UI -->
          <script src="js/jquery-ui.js" type="text/javascript"></script>

          <!-- Infragistics Combined Scripts -->
          <script src="js/infragistics.core.js" type="text/javascript"></script>
          <script src="js/infragistics.lob.js" type="text/javascript"></script>

          <script type="text/javascript">
              var employees = [
                  { "employeeId": 0, "supervisorId": -1, "firstName": "Andrew", "lastName": "Fuller" },
                  { "employeeId": 1, "supervisorId": -1, "firstName": "Jonathan", "lastName": "Smith" },
                  { "employeeId": 2, "supervisorId": -1, "firstName": "Nancy", "lastName": "Davolio" },
                  { "employeeId": 3, "supervisorId": -1, "firstName": "Steven", "lastName": "Buchanan" },

                  // Andrew Fuller's direct reports
                  { "employeeId": 4, "supervisorId": 0, "firstName": "Janet", "lastName": "Leverling" },
                  { "employeeId": 5, "supervisorId": 0, "firstName": "Laura", "lastName": "Callahan" },
                  { "employeeId": 6, "supervisorId": 0, "firstName": "Margaret", "lastName": "Peacock" },
                  { "employeeId": 7, "supervisorId": 0, "firstName": "Michael", "lastName": "Suyama" },

                  // Janet Leverling's direct reports
                  { "employeeId": 8, "supervisorId": 4, "firstName": "Anne", "lastName": "Dodsworth" },
                  { "employeeId": 9, "supervisorId": 4, "firstName": "Danielle", "lastName": "Davis" },
                  { "employeeId": 10, "supervisorId": 4, "firstName": "Robert", "lastName": "King" },

                  // Nancy Davolio's direct reports
                  { "employeeId": 11, "supervisorId": 2, "firstName": "Peter", "lastName": "Lewis" },
                  { "employeeId": 12, "supervisorId": 2, "firstName": "Ryder", "lastName": "Zenaida" },
                  { "employeeId": 13, "supervisorId": 2, "firstName": "Wang", "lastName": "Mercedes" },

                  // Steve Buchanan's direct reports
                  { "employeeId": 14, "supervisorId": 3, "firstName": "Theodore", "lastName": "Zia" },
                  { "employeeId": 15, "supervisorId": 3, "firstName": "Lacota", "lastName": "Mufutau" },

                  // Lacota Mufutau's direct reports
                  { "employeeId": 16, "supervisorId": 15, "firstName": "Jin", "lastName": "Elliott" },
                  { "employeeId": 17, "supervisorId": 15, "firstName": "Armand", "lastName": "Ross" },
                  { "employeeId": 18, "supervisorId": 15, "firstName": "Dane", "lastName": "Rodriquez" },

                  // Dane Rodriquez's direct reports
                  { "employeeId": 19, "supervisorId": 18, "firstName": "Declan", "lastName": "Lester" },
                  { "employeeId": 20, "supervisorId": 18, "firstName": "Bernard", "lastName": "Jarvis" },

                  // Bernard Jarvis' direct report
                  { "employeeId": 21, "supervisorId": 20, "firstName": "Jeremy", "lastName": "Donaldson" }
              ];

             $(function () {
                 $("#treegrid").igTreeGrid({
                     dataSource: employees,
                     primaryKey: "employeeId",
                     foreignKey: "supervisorId",
                     autoGenerateColumns: false,
                     columns: [
                         { headerText: "ID", key: "employeeId", width: "150px", dataType: "number" },
                         { headerText: "First", key: "firstName", width: "150px", dataType: "string" },
                         { headerText: "Last", key: "lastName", width: "150px", dataType: "string" }
                     ],
                     features: [
                         {
                             name: "Sorting"
                         }
                     ]
                 });
             });
          </script>
      </head>
      <body>
          <table id="treegrid"></table>
      </body>
      </html>
    

関連サンプル

関連トピック

依存関係

jquery-1.9.1.js
jquery.ui.core.js
jquery.ui.widget.js
infragistics.datasource.js
infragistics.ui.shared.js
infragistics.ui.treegrid.js
infragistics.util.js
infragistics.ui.grid.framework.js
infragistics.ui.grid.sorting.js

継承

  • applySortedColumnCss
    継承

    タイプ:
    bool
    デフォルト:
    true

    並べ替えた列の特別なスタイル設定を有効/無効にします。False の場合、並べ替えられた列のセルで並べ替えに関連する特別なスタイルは適用されません。

    コード サンプル

     //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Sorting",
                        applySortedColumnCss : false
                    }
                ]
            });
                
            //Get
            var sortCss = $(".selector").igTreeGridSorting("option", "applySortedColumnCss");
    
            //Set
            $(".selector").igTreeGridSorting("option", "applySortedColumnCss", false); 
  • caseSensitive
    継承

    タイプ:
    bool
    デフォルト:
    false

    並べ替えの大文字と小文字の区別を有効または無効にします。ローカルの並べ替えでのみ操作します。

    コード サンプル

     //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Sorting",
                        caseSensitive : true
                    }
                ]
            });
                
            //Get
            var caseSensitive = $(".selector").igTreeGridSorting("option", "caseSensitive");
    
            //Set
            $(".selector").igTreeGridSorting("option", "caseSensitive", true); 
  • columnSettings
    継承

    タイプ:
    array
    デフォルト:
    []
    要素タイプ:
    object

    特定の列のカスタムの並べ替え設定 (並べ替えが有効か無効か、デフォルトの並べ替え方向、最初の並べ替え方向など) を指定するカスタム列設定のリスト。

    コード サンプル

     //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Sorting",
                        columnSettings : [
    				        {
                                columnIndex: 0, 
                                allowSorting: true, 
                                firstSortDirection: "ascending", 
                                currentSortDirection: "descending"
                            }
    			        ]
                    }
                ]
            });
    
            //Get
            var colSettings = $(".selector").igTreeGridSorting("option", "columnSettings");
    
            //Set
            var colSettings = [
    				{
                        columnKey: "firstName", 
                        allowSorting: true, 
                        firstSortDirection: "ascending", 
                        currentSortDirection: "descending"
                    }
    			];
                
            $(".selector").igTreeGridSorting("option", "columnSettings", colSettings); 
    • allowSorting

      タイプ:
      bool
      デフォルト:
      true

      指定された列での並べ替えを有効または無効にします。デフォルトでは、すべての列が並べ替え可能です。

      コード サンプル

       //Initialize
              $(".selector").igTreeGrid({
                  features : [
                      {
                          name : "Sorting",
                          columnSettings : [
                              {
                                  columnIndex: 0, 
                                  allowSorting: true, 
                                  firstSortDirection: "ascending", 
                                  currentSortDirection: "descending"
                              }
                          ]
                      }
                  ]
              }); 
    • columnIndex

      タイプ:
      number
      デフォルト:
      null

      列インデックス。すべての列設定にキーまたはインデックスのどちらかを設定する必要があります。

      コード サンプル

       //Initialize
              $(".selector").igTreeGrid({
                  features : [
                      {
                          name : "Sorting",
                          columnSettings : [
                              {
                                  columnIndex: 0, 
                                  allowSorting: true, 
                                  firstSortDirection: "ascending", 
                                  currentSortDirection: "descending"
                              }
                          ]
                      }
                  ]
              }); 
    • columnKey

      タイプ:
      string
      デフォルト:
      null

      列キー。すべての列設定にキーまたはインデックスのどちらかを設定する必要があります。

      コード サンプル

       //Initialize
              $(".selector").igTreeGrid({
                  features : [
                      {
                          name : "Sorting",
                          columnSettings : [
                              {
                                  columnKey: "employeeId",
                                  allowSorting: true, 
                                  firstSortDirection: "ascending", 
                                  currentSortDirection: "descending"
                              }
                          ]
                      }
                  ]
              }); 
    • compareFunc

      タイプ:
      enumeration
      デフォルト:
      null

      カスタム比較に使用される関数 (文字列または関数) への参照。
      関数は以下の引数を受け取ります:
      val1: 比較する最初の値
      val2: 比較する 2 番目の値
      recordsData (オプション) - 3 つのプロパティを持つオブジェクト: fieldName - 並べ替えたフィールドの名前; record1 - 比較する最初のレコード; record2 - 比較する 2 番目のレコード
      関数は以下の数値を返します:
      0 - 値が等しい場合
      1 - val1 > val2 の場合
      -1 - val1 < val2 の場合

      メンバー

      • string
      • タイプ:string
      • グローバル ウィンドウ オブジェクトにある文字列としての関数名。
      • function
      • タイプ:function
      • カスタム比較で使用される関数。

      コード サンプル

       
                function myCompareFunc(a, b, recordsData) { 
                 var countryX = recordsData.recordX["Country"];
                 var countryY = recordsData.recordY["Country"];
                 return countryX > countryY ? 1 : countryX < countryY ? -1 : 0;
                }
                
              //Initialize
                 $(".selector").igTreeGrid({
                     features : [
                         {
                             name : "Sorting",
                             columnSettings : [
                                 {
                                     columnIndex: 0, 
                                     allowSorting: true, 
                                     firstSortDirection: "ascending", 
                                     compareFunc: "myCompareFunc"
                                 }
                             ]
                         }
                     ]
                 });
                
    • currentSortDirection

      タイプ:
      enumeration
      デフォルト:
      null

      現在の (またはデフォルトの) 並べ替え方向。この設定が指定されていない場合、このオプションに基づいて列が描画および並べ替えされます。

      メンバー

      • asc
      • タイプ:string
      • 列データの初期の並べ替えは昇順です。
      • desc
      • タイプ:string
      • 列データの初期の並べ替えは降順です。

      コード サンプル

       //Initialize
                  $(".selector").igTreeGrid({
                      features : [
                          {
                              name : "Sorting",
                              columnSettings : [
                                  {
                                      columnIndex: 0, 
                                      allowSorting: true, 
                                      firstSortDirection: "ascending", 
                                      currentSortDirection: "descending"
                                  }
                              ]
                          }
                      ]
                  }); 
    • firstSortDirection

      タイプ:
      enumeration
      デフォルト:
      null

      それまでその列で並べ替えをしていない場合、これは最初の並べ替え方向になります。

      メンバー

      • asc
      • タイプ:string
      • 列データの最初の並べ替えは昇順です。
      • desc
      • タイプ:string
      • 列データの最初の並べ替えは降順です。

      コード サンプル

       //Initialize
              $(".selector").igTreeGrid({
                  features : [
                      {
                          name : "Sorting",
                          columnSettings : [
                              {
                                  columnIndex: 0, 
                                  allowSorting: true, 
                                  firstSortDirection: "ascending", 
                                  currentSortDirection: "descending"
                              }
                          ]
                      }
                  ]
              }); 
  • customSortFunction
    継承

    タイプ:
    function
    デフォルト:
    null

    カスタム並べ替え関数 (または文字列として関数の名前)。3 つのパラメーターを受け付けます - 並べ替えるデータ、データ ソースのフィールド定義の配列、および並べ替える方向 (オプション)。この関数は、並べ替えられたデータ配列を返します。

    コード サンプル

     var myCustomFunc = function(data, fields, direction) {
    	    function myCompareFunc(obj1, obj2) {
    		    if (direction == "descending")
    		    {
    			    return obj2[fields[0].fieldName] - obj1[fields[0].fieldName];
    		    }
    		    return obj1[fields[0].fieldName] - obj2[fields[0].fieldName];
    	    }
    	    var result = data.sort(myCompareFunc);
    	    return result;
        }
    
        //Initialize
        $(".selector").igTreeGrid({
            features : [
                {
                    name : "Sorting",
                    customSortFunction : myCustomFunc
                }
            ]
        });
        
        //Get
        var sortFunc = $(".selector").igTreeGridSorting("option", "customSortFunction");
     
        //Set
        $(".selector").igTreeGridSorting("option", "customSortFunction", myCustomFunc); 
  • dialogWidget
    継承

    タイプ:
    string
    デフォルト:
    "igGridModalDialog"

    使用するダイアログ ウィジェットの名前。$.ui.igGridModalDialog から継承します。

    コード サンプル

     
    				// Initialize
    				$(".selector").igTreeGrid({
    					features: [
    						{
    							name : "Sorting",
    							dialogWidget: "advancedModalDialog"
    						}
    					]
    				});
    
    				// Get
    				var widgetName = $(".selector").igTreeGridSorting("option", "dialogWidget");
    			 
  • featureChooserSortAsc
    継承

    タイプ:
    string
    デフォルト:
    ""

    昇順で並べ替えるために機能セレクター項目でテキストを指定します (タッチ環境のみで表示されます)。

    コード サンプル

     //Initialize
        $(".selector").igTreeGrid({
            features : [
                {
                    name : "Sorting",
                    featureChooserSortAsc : "Sort A to Z"
                }
            ]
        });
        
        //Get
        var featureChooserSortAsc = $(".selector").igTreeGridSorting("option", "featureChooserSortAsc"); 
  • featureChooserSortDesc
    継承

    タイプ:
    string
    デフォルト:
    ""

    降順で並べ替えるために機能セレクター項目でテキストを指定します (タッチ環境のみで表示されます)。

    コード サンプル

     //Initialize
        $(".selector").igTreeGrid({
            features : [
                {
                    name : "Sorting",
                    featureChooserSortDesc : "Sort Z to A"
                }
            ]
        });
        
        //Get
        var featureChooserSortDesc = $(".selector").igTreeGridSorting("option", "featureChooserSortDesc"); 
  • featureChooserText
    継承

    タイプ:
    string
    デフォルト:
    ""

    機能セレクターのテキストを指定します。

    コード サンプル

     //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Sorting",
                        featureChooserText : "Sorting"
                    }
                ]
            });
        
            //Get
            var text = $(".selector").igTreeGridSorting("option", "featureChooserText");
     
            //Set
            $(".selector").igTreeGridSorting("option", "featureChooserText", "Sorting"); 
  • firstSortDirection
    継承

    タイプ:
    enumeration
    デフォルト:
    ascending

    それまでその列で並べ替えをしていない場合、最初のクリックまたはキーの押下で使用する並べ替え方向を指定します。

    メンバー

    • ascending
    • タイプ:string
    • 列データの最初の並べ替えは昇順です。
    • descending
    • タイプ:string
    • 列データの最初の並べ替えは降順です。

    コード サンプル

     //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Sorting",
                        firstSortDirection : "descending"
                    }
                ]
            });
    
            //Get
            var direction = $(".selector").igTreeGridSorting("option", "firstSortDirection");
    
            //Set
            $(".selector").igTreeGridSorting("option", "firstSortDirection", "descending");  
  • fromLevel

    タイプ:
    number
    デフォルト:
    0

    並べ替えの適用を開始するデータ バインドされたレベルを指定します。0 は最初のレベルです。

    コード サンプル

     //Initialize
        $(".selector").igTreeGrid({
            features : [
                {
                    name : "Sorting",
                    fromLevel: 1
                }
            ]
        });
    
        //Get
        var fromLevel = $(".selector").igTreeGridSorting("option", "fromLevel"); 
  • inherit
    継承

    タイプ:
    bool
    デフォルト:
    false

    子レイアウトで機能継承を有効または無効にします。注: igHierarchicalGrid のみに適用します。

    コード サンプル

     
    				// Initialize
    				$(".selector").igHierarchicalGrid({
    					features: [
    						{
    							name: "Sorting",
    							inherit: true
    						}
    					]
    				});
    
    				// Get
    				var inherit = $(".selector").igTreeGridSorting("option", "inherit");
    			 
  • modalDialogAnimationDuration
    継承

    タイプ:
    number
    デフォルト:
    200

    モーダル ダイアログを表示/非表示にするためにアニメーション期間のミリ秒の時間を指定します。

    コード サンプル

     //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Sorting",
                        modalDialogAnimationDuration : 300
                    }
                ]
            });
        
            //Get
            var duration = $(".selector").igTreeGridSorting("option", "modalDialogAnimationDuration");
     
            //Set
            $(".selector").igTreeGridSorting("option", "modalDialogAnimationDuration", 300);  
  • modalDialogButtonApplyText
    継承

    タイプ:
    string
    デフォルト:
    ""

    モーダル ダイアログで変更を適用するボタンのテキストを指定します。

    コード サンプル

     //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Sorting",
                        modalDialogButtonApplyText : "Apply"
                    }
                ]
            });
    
            //Get
            var text = $(".selector").igTreeGridSorting("option", "modalDialogButtonApplyText");
    
            //Set
            $(".selector").igTreeGridSorting("option", "modalDialogButtonApplyText", "Apply"); 
  • modalDialogButtonCancelText
    継承

    タイプ:
    string
    デフォルト:
    ""

    モーダル ダイアログで変更をキャンセルするボタンのテキストを指定します。

    コード サンプル

     //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Sorting",
                        modalDialogButtonCancelText : "Cancel"
                    }
                ]
            });
    
            //Get
            var text = $(".selector").igTreeGridSorting("option", "modalDialogButtonCancelText");
    
            //Set
            $(".selector").igTreeGridSorting("option", "modalDialogButtonCancelText", "Cancel"); 
  • modalDialogCaptionButtonAsc
    継承

    タイプ:
    string
    デフォルト:
    ""

    複数の並べ替えダイアログで昇順に並べ替えられた各列のキャプションを指定します。

    コード サンプル

     //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Sorting",
                        modalDialogCaptionButtonAsc : "Ascending"
                    }
                ]
            });
    
            //Get
            var caption = $(".selector").igTreeGridSorting("option", "modalDialogCaptionButtonAsc");
    
            //Set
            $(".selector").igTreeGridSorting("option", "modalDialogCaptionButtonAsc", "Ascending"); 
  • modalDialogCaptionButtonDesc
    継承

    タイプ:
    string
    デフォルト:
    ""

    [複数並べ替え] ダイアログの降順に並べ替えられた項目ごとにキャプションを指定します。

    コード サンプル

     //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Sorting",
                        modalDialogCaptionButtonDesc : "Descending"
                    }
                ]
            });
    
            //Get
            var caption = $(".selector").igTreeGridSorting("option", "modalDialogCaptionButtonDesc");
    
            //Set
            $(".selector").igTreeGridSorting("option", "modalDialogCaptionButtonDesc", "Descending"); 
  • modalDialogCaptionButtonUnsort
    継承

    タイプ:
    string
    デフォルト:
    ""

    [複数並べ替え] ダイアログの [並べ替えなし]ボタンのキャプションを指定します。

    コード サンプル

     //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Sorting",
                        modalDialogCaptionButtonUnsort : "Unsort"
                    }
                ]
            });
    
            //Get
            var caption = $(".selector").igTreeGridSorting("option", "modalDialogCaptionButtonUnsort");
    
            //Set
            $(".selector").igTreeGridSorting("option", "modalDialogCaptionButtonUnsort", "Unsort"); 
  • modalDialogCaptionText
    継承

    タイプ:
    string
    デフォルト:
    ""

    [複数並べ替え] ダイアログのキャプションのテキストを指定します。

    コード サンプル

     //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Sorting",
                        modalDialogCaptionText : "Multiple Sorting"
                    }
                ]
            });
    
            //Get
            var caption = $(".selector").igTreeGridSorting("option", "modalDialogCaptionText");
    
            //Set
            $(".selector").igTreeGridSorting("option", "modalDialogCaptionText", "Multiple Sorting"); 
  • modalDialogHeight
    継承

    タイプ:
    enumeration
    デフォルト:
    ""

    複数の並べ替えダイアログの高さを指定します。

    メンバー

    • string
    • タイプ:string
    • ウィジェットの高さはピクセル (px) およびパーセント (%) で設定できます (%)。
    • number
    • タイプ:number
    • 幅の高さは数値 (25) として設定できます。

    コード サンプル

     //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Sorting",
                        modalDialogHeight : 300
                    }
                ]
            });
    
            //Get
            var height = $(".selector").igTreeGridSorting("option", "modalDialogHeight");
    
            //Set
            $(".selector").igTreeGridSorting("option", "modalDialogHeight", 300); 
  • modalDialogResetButtonLabel
    継承

    タイプ:
    string
    デフォルト:
    ""

    複数の並べ替えダイアログで並べ替えが解除された列ごとに並べ替えボタンのラベルを指定します。

    コード サンプル

     //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Sorting",
                        modalDialogResetButtonLabel : "Reset"
                    }
                ]
            });
    
            //Get
            var label = $(".selector").igTreeGridSorting("option", "modalDialogResetButtonLabel");
    
            //Set
            $(".selector").igTreeGridSorting("option", "modalDialogResetButtonLabel", "Reset"); 
  • modalDialogSortByButtonText
    継承

    タイプ:
    string
    デフォルト:
    ""

    複数の並べ替えダイアログで並べ替えが解除された列ごとに並べ替えボタンのテキストを指定します。

    コード サンプル

     //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Sorting",
                        modalDialogSortByButtonText : "Sort By"
                    }
                ]
            });
    
            //Get
            var text = $(".selector").igTreeGridSorting("option", "modalDialogSortByButtonText");
    
            //Set
            $(".selector").igTreeGridSorting("option", "modalDialogSortByButtonText", "Sort By"); 
  • modalDialogSortOnClick
    継承

    タイプ:
    bool
    デフォルト:
    false

    複数の並べ替えダイアログで列を並べ替える/並べ替えを解除するをクリックした時に直ちに並べ替えが適用されるかどうかを指定します。false の場合 [適用] ボタンが表示され、ボタンをクリックすると並べ替えが適用されます。

    コード サンプル

     //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Sorting",
                        modalDialogSortOnClick : true
                    }
                ]
            });
    
            //Get
            var text = $(".selector").igTreeGridSorting("option", "modalDialogSortOnClick");
    
            //Set
            $(".selector").igTreeGridSorting("option", "modalDialogSortOnClick", true); 
  • modalDialogWidth
    継承

    タイプ:
    number
    デフォルト:
    350

    複数の並べ替えダイアログの幅を指定します。

    メンバー

    • string
    • タイプ:string
    • 幅をピクセル単位で文字列として指定します ("300px")。
    • number
    • タイプ:number
    • 幅をピクセル単位で数値として指定します (300)。

    コード サンプル

     //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Sorting",
                        modalDialogWidth : 400
                    }
                ]
            });
    
            //Get
            var width = $(".selector").igTreeGridSorting("option", "modalDialogWidth");
    
            //Set
            $(".selector").igTreeGridSorting("option", "modalDialogWidth", 300); 
  • mode
    継承

    タイプ:
    enumeration
    デフォルト:
    single

    単一列の並べ替えまたは複数列の並べ替えを定義します。

    メンバー

    • single
    • タイプ:string
    • 単一の列のみを並べ替えます。新しい列を並べ替えると、以前に並べ替えた列の並べ替えが保持されていません。
    • multi
    • タイプ:string
    • 有効な場合、前に列の並べ替えを行った状態はクリアされません。

    コード サンプル

     //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Sorting",
                        mode : "multi" 
                    }
                ]
            });
    
            //Get
            var mode = $(".selector").igTreeGridSorting("option", "mode");
    
            //Set
            $(".selector").igTreeGridSorting("option", "mode", "multi"); 
  • persist
    継承

    タイプ:
    bool
    デフォルト:
    true

    状態の間に並べ替えの永続化を有効/無効にします。

    コード サンプル

     //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Sorting",
                        persist : false 
                    }
                ]
            });
    
            //Get
            var persist = $(".selector").igTreeGridSorting("option", "persist");
    
            //Set
            $(".selector").igTreeGridSorting("option", "persist", true); 
  • sortedColumnTooltip
    継承

    タイプ:
    string
    デフォルト:
    ""

    並べ替えられた列の jQuery テンプレート化形式のカスタム ツールチップ。

    コード サンプル

     //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Sorting",
                        sortedColumnTooltip : "Sorted"
                    }
                ]
            });
    
            //Get
            var tooltip = $(".selector").igTreeGridSorting("option", "sortedColumnTooltip");
    
            //Set
            $(".selector").igTreeGridSorting("option", "sortedColumnTooltip", "Sorted"); 
  • sortingDialogContainment
    継承

    タイプ:
    string
    デフォルト:
    "owner"

    複数並べ替えダイアログのコンテインメント動作を管理します。
    owner 複数並べ替えダイアログはグリッド領域のみにドラッグ可能です。
    window 複数並べ替えダイアログはウィンドウ領域の全体にドラッグ可能です。

    コード サンプル

     //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Sorting",
                        sortingDialogContainment : "window"
                    }
                ]
            });
    
            //Get
            var sortingDialogContainment = $(".selector").igTreeGridSorting("option", "sortingDialogContainment"); 
  • sortUrlKey
    継承

    タイプ:
    string
    デフォルト:
    null

    並べ替えの式を URL 内でエンコードする方法を指定する URL パラメーター名。OData conventions. ex: ?sort(col1)=asc を使用します。

    コード サンプル

     //Initialize
        $(".selector").igTreeGrid({
            features : [
                {
                    name : "Sorting",
                    sortUrlKey: "myCustomSort"
                }
            ]
        });
    
        //Get
        var sortKey = $(".selector").igTreeGridSorting("option", "sortUrlKey");
     
        //Set
        $(".selector").igTreeGridSorting("option", "sortUrlKey", "myCustomSort"); 
  • sortUrlKeyAscValue
    継承

    タイプ:
    string
    デフォルト:
    null

    昇順の並べ替えの URL パラメーター値。OData 規約を使用します。例: ?sort(col1)=asc。

    コード サンプル

     //Initialize
        $(".selector").igTreeGrid({
            features : [
                {
                    name : "Sorting",
                    sortUrlKey: "myCustomSort",
    			    sortUrlKeyAscValue: "myAsc"
                }
            ]
        });
    
        //Get
        var sortKeyAsc = $(".selector").igTreeGridSorting("option", "sortUrlKeyAscValue");
     
        //Set
        $(".selector").igTreeGridSorting("option", "sortUrlKeyAscValue", "myAsc"); 
  • sortUrlKeyDescValue
    継承

    タイプ:
    string
    デフォルト:
    null

    降順の並べ替えの URL パラメーター値。OData 規約を使用します。

    コード サンプル

     //Initialize
        $(".selector").igTreeGrid({
            features : [
                {
                    name : "Sorting",
                    sortUrlKey: "myCustomSort",
    			    sortUrlKeyDescValue: "myDesc"
                }
            ]
        });
    
        //Get
        var sortKeyDesc = $(".selector").igTreeGridSorting("option", "sortUrlKeyDescValue");
     
        //Set
        $(".selector").igTreeGridSorting("option", "sortUrlKeyDescValue", "myDesc"); 
  • toLevel

    タイプ:
    number
    デフォルト:
    -1

    並べ替えの適用を開始するデータ バインドされたレベルを指定します。-1 の場合、並べ替えは最後のデータ バインドされたレベルに適用されます。

    コード サンプル

     //Initialize
        $(".selector").igTreeGrid({
            features : [
                {
                    name : "Sorting",
                    toLevel: -1
                }
            ]
        });
    
        //Get
        var toLevel = $(".selector").igTreeGridSorting("option", "toLevel"); 
  • type
    継承

    タイプ:
    enumeration
    デフォルト:
    null

    ローカルまたはリモート並べ替えを定義します。

    メンバー

    • remote
    • タイプ:string
    • 並べ替えはサーバー側操作としてリモートで実行されます。
    • local
    • タイプ:string
    • 並べ替えは $.ig.DataSource コンポーネントによってローカルで実行されます。

    コード サンプル

     //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Sorting",
                        type : "remote"
                    }
                ]
            });
    
            //Get
            var sortType = $(".selector").igTreeGridSorting("option", "type");
    
            //Set
            $(".selector").igTreeGridSorting("option", "type", "remote"); 
  • unsortedColumnTooltip
    継承

    タイプ:
    string
    デフォルト:
    ""

    並べ替えされていない列の igTemplating 形式のカスタム ツールチップ。

    コード サンプル

     //Initialize
            $(".selector").igTreeGrid({
                features : [
                    {
                        name : "Sorting",
                        unsortedColumnTooltip : "Unsorted"
                    }
                ]
            });
            
            //Get
            var tooltip = $(".selector").igTreeGridSorting("option", "unsortedColumnTooltip");
            
            //Set
            $(".selector").igTreeGridSorting("option", "unsortedColumnTooltip", "Unsorted"); 

Ignite UI コントロール イベントの詳細については、
Ignite UI でイベントを使用するを参照してください。

注: API メソッドの呼び出しは、API ヘルプに特に記述がない限り、操作に関連するイベントはプログラムによって発生されません。これらのイベントは各ユーザー操作によってのみ呼び出されます。

詳細の表示
  • columnSorted
    継承

    キャンセル可能:
    false

    列が並べ替えられ、データが再描画された後に発生するイベント。
    関数は引数 evt および ui を受け取ります。
    ui.owner を使用して、igGridSorting への参照を取得します。
    ui.owner.grid を使用して、igGrid への参照を取得します。
    ui.columnKey を使用して、列のキーを取得します。
    ui.direction を使用して、並べ替えの方向を取得します。
    ui.expressions を使用して並べ替え済みの式を取得します。

    コード サンプル

     //Delegate
    			$(document).delegate(".selector", "igtreegridsortingcolumnsorted", function (evt, ui) {
    				//return reference to igTreeGridSorting object
    				ui.owner;
    				//return reference igTreeGrid object
    				ui.owner.grid;
    				//return column key
    				ui.columnKey;
    				//return sort direction
    				ui.direction;
    			});
    
    			//Initialize
                $(".selector").igTreeGrid({
    				features: [{
    					name: "Sorting",
    					type: "local",
    					columnSorted: function (evt, ui) {...}
    				}]
    			}); 
  • columnSorting
    継承

    キャンセル可能:
    true

    ある列に対して並べ替えを呼び出す前に発生するイベント。
    行の並べ替えをキャンセルするには、false を返します。
    関数は引数 evt および ui を受け取ります。
    ui.owner を使用して、igGridSorting への参照を取得します。
    ui.owner.grid を使用して、igGrid への参照を取得します。
    ui.columnKey を使用して、列のキーを取得します。
    ui.direction を使用して、並べ替えの方向を取得します。
    ui.expressions を使用して並べ替え式を取得します。

    コード サンプル

     //Delegate
    			$(document).delegate(".selector", "igtreegridsortingcolumnsorting", function (evt, ui) {
    				//return reference to igTreeGridSorting object
    				ui.owner;
    				//return reference igTreeGrid object
    				ui.owner.grid;
    				//return column key
    				ui.columnKey;
    				//return sort direction
    				ui.direction;
    			});
    
    			//Initialize
                $(".selector").igTreeGrid({
    				features: [{
    					name: "Sorting",
    					type: "local",
    					columnSorting: function (evt, ui) {...}
    				}]
    			}); 
  • modalDialogButtonApplyClick
    継承

    キャンセル可能:
    true

    モーダル ダイアログの [適用] ボタンをクリックしたときに発生するイベント。
    ハンドラー関数は引数 evt および ui を受け取ります。
    igGridSorting ウィジェットへの参照を取得するには ui.owner を使用します。
    ui.owner.grid を使用して、igGrid ウィジェットへの参照を取得します。
    モーダル ダイアログ要素への参照を取得するには ui.modalDialogElement を使用します。これは jQuery オブジェクトです。
    並べ替える列の配列を取得するには ui.columnsToSort を使用します。配列はオブジェクトおよび並べ替えの順序を含みます。順序は Asc または Desc です。オブジェクトは columnIdentifier です。

    コード サンプル

     //Delegate
    			$(document).delegate(".selector", "igtreegridsortingmodaldialogbuttonapplyclick", function (evt, ui) {
    				
                    // Get reference to igTreeGridSorting object
    				ui.owner;
                    
    				// Get the reference to the igTreeGrid widget.
    				ui.owner.grid;
                    
    				// Get a reference to the modal dialog element. This is a jQuery object.
    				ui.modalDialogElement;
                    
    				// Get array of columns which should be sorted - array of objects of sort order - Asc/Desc and columnIdentifier
    				ui.columnsToSort;
    			});
    
    			//Initialize
                $(".selector").igTreeGrid({
    				features: [{
    					name: "Sorting",
    					modalDialogButtonApplyClick: function (evt, ui) {...}
    				}]
    			}); 
  • modalDialogButtonResetClick
    継承

    キャンセル可能:
    true

    並べ替えをリセットするボタンをクリックしたときに発生するイベント。
    ハンドラー関数は引数 evt および ui を受け取ります。
    igGridSorting ウィジェットへの参照を取得するには ui.owner を使用します。
    ui.owner.grid を使用して、igGrid ウィジェットへの参照を取得します。
    モーダル ダイアログ要素への参照を取得するには ui.modalDialogElement を使用します。これは jQuery オブジェクトです。

    コード サンプル

     //Delegate
    			$(document).delegate(".selector", "igtreegridsortingmodaldialogbuttonresetclick", function (evt, ui) {
    				
                    // Get reference to igTreeGridSorting object
    				ui.owner;
                    
    				// Get the reference to the igTreeGrid widget.
    				ui.owner.grid;
                    
    				// Get a reference to the modal dialog element. This is a jQuery object.
    				ui.modalDialogElement;
    			});
    
    			//Initialize
                $(".selector").igTreeGrid({
    				features: 
                    [{
    					name: "Sorting",
    					modalDialogButtonResetClick: function (evt, ui) {...}
    				}]
    			}); 
  • modalDialogButtonUnsortClick
    継承

    キャンセル可能:
    true

    列の並べ替えをしないボタンをモーダル ダイアログでクリックした場合に発生するイベント
    ハンドラー関数は引数 evt および ui を受け取ります。
    igGridSorting ウィジェットへの参照を取得するには ui.owner を使用します。
    ui.owner.grid を使用して、igGrid ウィジェットへの参照を取得します。
    モーダル ダイアログ要素への参照を取得するには ui.modalDialogElement を使用します。これは jQuery オブジェクトです。
    ui.columnKey を使用して列キーを取得します。

    コード サンプル

     //Delegate
    			$(document).delegate(".selector", "igtreegridsortingmodaldialogbuttonunsortclick", function (evt, ui) {
    				
                    // Get reference to igTreeGridSorting object
    				ui.owner;
                    
    				// Get the reference to the igTreeGrid widget.
    				ui.owner.grid;
                    
    				// Get a reference to the modal dialog element. This is a jQuery object.
    				ui.modalDialogElement;
                    
                    // Get column key.
                    ui.columnKey;
    			});
    
    			//Initialize
                $(".selector").igTreeGrid({
    				features: 
                    [{
    					name: "Sorting",
    					modalDialogButtonUnsortClick: function (evt, ui) {...}
    				}]
    			}); 
  • modalDialogClosed
    継承

    キャンセル可能:
    false

    モーダル ダイアログが閉じた後に発生するイベント。
    ハンドラー関数は引数 evt および ui を受け取ります。
    igGridSorting ウィジェットへの参照を取得するには ui.owner を使用します。
    ui.owner.grid を使用して、igGrid ウィジェットへの参照を取得します。
    モーダル ダイアログ要素への参照を取得するには ui.modalDialogElement を使用します。これは jQuery オブジェクトです。

    コード サンプル

     // Delegate
    			$(document).delegate(".selector", "igtreegridsortingmodaldialogclosed", function (evt, ui) {
    				
                    // Get reference to igTreeGridSorting object
    				ui.owner;
                    
    				// Get the reference to the igTreeGrid widget.
    				ui.owner.grid;
                    
    				// Get a reference to the modal dialog element. This is a jQuery object.
    				ui.modalDialogElement;
    			});
    
    			// Initialize
                $(".selector").igTreeGrid({
    				features: 
                    [{
    					name: "Sorting",
    					modalDialogClosed: function (evt, ui) {...}
    				}]
    			}); 
  • modalDialogClosing
    継承

    キャンセル可能:
    true

    モーダル ダイアログが閉じる前に発生するイベント。
    ハンドラー関数は引数 evt および ui を受け取ります。
    igGridSorting ウィジェットへの参照を取得するには ui.owner を使用します。
    ui.owner.grid を使用して、igGrid ウィジェットへの参照を取得します。
    モーダル ダイアログ要素への参照を取得するには ui.modalDialogElement を使用します。これは jQuery オブジェクトです。

    コード サンプル

     // Delegate
    			$(document).delegate(".selector", "igtreegridsortingmodaldialogclosing", function (evt, ui) {
    				
                    // Get reference to igTreeGridSorting object
    				ui.owner;
                    
    				// Get the reference to the igTreeGrid widget.
    				ui.owner.grid;
                    
    				// Get a reference to the modal dialog element. This is a jQuery object.
    				ui.modalDialogElement;
    			});
    
    			// Initialize
                $(".selector").igTreeGrid({
    				features: 
                    [{
    					name: "Sorting",
    					modalDialogClosing: function (evt, ui) {...}
    				}]
    			}); 
  • modalDialogContentsRendered
    継承

    キャンセル可能:
    false

    モーダル ダイアログのコンテンツが描画された後に発生するイベント
    ハンドラー関数は引数 evt および ui を受け取ります。
    igGridSorting ウィジェットへの参照を取得するには ui.owner を使用します。
    ui.owner.grid を使用して、igGrid ウィジェットへの参照を取得します。
    モーダル ダイアログ要素への参照を取得するには ui.modalDialogElement を使用します。これは jQuery オブジェクトです。

    コード サンプル

     // Delegate
    	    // Delegate
    			$(document).delegate(".selector", "igtreegridsortingmodaldialogcontentsrendered", function (evt, ui) {
    				
                    // Get reference to igTreeGridSorting object
    				ui.owner;
                    
    				// Get the reference to the igTreeGrid widget.
    				ui.owner.grid;
                    
    				// Get a reference to the modal dialog element. This is a jQuery object.
    				ui.modalDialogElement;
    			});
    
    			// Initialize
                $(".selector").igTreeGrid({
    				features: 
                    [{
    					name: "Sorting",
    					modalDialogContentsRendered: function (evt, ui) {...}
    				}]
    			}); 
  • modalDialogContentsRendering
    継承

    キャンセル可能:
    true

    モーダル ダイアログのコンテンツが描画される前に発生するイベント
    ハンドラー関数は引数 evt および ui を受け取ります。
    igGridSorting ウィジェットへの参照を取得するには ui.owner を使用します。
    ui.owner.grid を使用して、igGrid ウィジェットへの参照を取得します。
    モーダル ダイアログ要素への参照を取得するには ui.modalDialogElement を使用します。これは jQuery オブジェクトです。

    コード サンプル

     $(document).delegate(".selector", "igtreegridsortingmodaldialogcontentsrendering", function (evt, ui) {
    				
                    // Get reference to igTreeGridSorting object
    				ui.owner;
                    
    				// Get the reference to the igTreeGrid widget.
    				ui.owner.grid;
                    
    				// Get a reference to the modal dialog element. This is a jQuery object.
    				ui.modalDialogElement;
    			});
    
    			// Initialize
                $(".selector").igTreeGrid({
    				features: 
                    [{
    					name: "Sorting",
    					modalDialogContentsRendering: function (evt, ui) {...}
    				}]
    			}); 
  • modalDialogMoving
    継承

    キャンセル可能:
    true

    モーダル ダイアログの位置が変更するたびに発生するイベント。
    ハンドラー関数は引数 evt および ui を受け取ります。
    igGridSorting ウィジェットへの参照を取得するには ui.owner を使用します。
    ui.owner.grid を使用して、igGrid ウィジェットへの参照を取得します。
    モーダル ダイアログ要素への参照を取得するには ui.modalDialogElement を使用します。これは jQuery オブジェクトです。
    モーダル ダイアログ div の元の位置をページに相対して { top, left } オブジェクトとして取得するには ui.originalPosition を使用します。
    モーダル ダイアログ div の現在の位置をページに相対して { top, left } オブジェクトとして取得するには ui.position を使用します。

    コード サンプル

     // Delegate
    			$(document).delegate(".selector", "igtreegridsortingmodaldialogmoving", function (evt, ui) {
    				
                    // Get reference to igTreeGridSorting object
    				ui.owner;
                    
    				// Get the reference to the igTreeGrid widget.
    				ui.owner.grid;
                    
    				// Get a reference to the modal dialog element. This is a jQuery object.
    				ui.modalDialogElement;
                    
                    // Get the original position of the modal dialog div as { top, left } object, relative to the page.
                    ui.originalPosition;
                    
                    // Get the current position of the modal dialog div as { top, left } object, relative to the page.
                    ui.position;
    			});
    
    			// Initialize
                $(".selector").igTreeGrid({
    				features: 
                    [{
    					name: "Sorting",
    					modalDialogMoving: function (evt, ui) {...}
    				}]
    			}); 
  • modalDialogOpened
    継承

    キャンセル可能:
    false

    モーダル ダイアログがすでに開いた後に発生するイベント。
    ハンドラー関数は引数 evt および ui を受け取ります。
    igGridSorting ウィジェットへの参照を取得するには ui.owner を使用します。
    ui.owner.grid を使用して、igGrid ウィジェットへの参照を取得します。
    モーダル ダイアログ要素への参照を取得するには ui.modalDialogElement を使用します。これは jQuery オブジェクトです。

    コード サンプル

     // Delegate
    			$(document).delegate(".selector", "igtreegridsortingmodaldialogopened", function (evt, ui) {
    				
                    // Get reference to igTreeGridSorting object
    				ui.owner;
                    
    				// Get the reference to the igTreeGrid widget.
    				ui.owner.grid;
                    
    				// Get a reference to the modal dialog element. This is a jQuery object.
    				ui.modalDialogElement;
    			});
    
    			// Initialize
                $(".selector").igTreeGrid({
    				features: 
                    [{
    					name: "Sorting",
    					modalDialogOpened: function (evt, ui) {...}
    				}]
    			}); 
  • modalDialogOpening
    継承

    キャンセル可能:
    true

    モーダル ダイアログが開く前に発生するイベント。
    ハンドラー関数は引数 evt および ui を受け取ります。
    igGridSorting ウィジェットへの参照を取得するには ui.owner を使用します。
    ui.owner.grid を使用して、igGrid ウィジェットへの参照を取得します。
    モーダル ダイアログ要素への参照を取得するには ui.columnChooserElement を使用します。これは jQuery オブジェクトです。

    コード サンプル

     // Delegate
    			$(document).delegate(".selector", "igtreegridsortingmodaldialogopening", function (evt, ui) {
    				
                    // Get reference to igTreeGridSorting object
    				ui.owner;
                    
    				// Get the reference to the igTreeGrid widget.
    				ui.owner.grid;
                    
    				// Get a reference to the modal dialog element. This is a jQuery object.
    				ui.modalDialogElement;
    			});
    
    			// Initialize
                $(".selector").igTreeGrid({
    				features: 
                    [{
    					name: "Sorting",
    					modalDialogOpening: function (evt, ui) {...}
    				}]
    			}); 
  • modalDialogSortClick
    継承

    キャンセル可能:
    true

    並べ替えられていない列をクリックして、モーダル ダイアログで並べ替える場合に発生するイベント。
    ハンドラー関数は引数 evt および ui を受け取ります。
    igGridSorting ウィジェットへの参照を取得するには ui.owner を使用します。
    ui.owner.grid を使用して、igGrid ウィジェットへの参照を取得します。
    モーダル ダイアログ要素への参照を取得するには ui.modalDialogElement を使用します。これは jQuery オブジェクトです。
    ui.columnKey を使用して列キーを取得します。

    コード サンプル

     // Delegate
    			$(document).delegate(".selector", "igtreegridsortingmodaldialogsortclick", function (evt, ui) {
    				
                    // Get reference to igTreeGridSorting object
    				ui.owner;
                    
    				// Get the reference to the igTreeGrid widget.
    				ui.owner.grid;
                    
    				// Get a reference to the modal dialog element. This is a jQuery object.
    				ui.modalDialogElement;
                    
                    // Get the column key.
                    ui.columnKey;
    			});
    
    			// Initialize
                $(".selector").igTreeGrid({
    				features: 
                    [{
    					name: "Sorting",
    					modalDialogSortClick: function (evt, ui) {...}
    				}]
    			}); 
  • modalDialogSortingChanged
    継承

    キャンセル可能:
    true

    列の並べ替えがモーダル ダイアログで変更された場合に発生するイベント。列を並べ替える必要があります。
    ハンドラー関数は引数 evt および ui を受け取ります。
    igGridSorting ウィジェットへの参照を取得するには ui.owner を使用します。
    ui.owner.grid を使用して、igGrid ウィジェットへの参照を取得します。
    モーダル ダイアログ要素への参照を取得するには ui.modalDialogElement を使用します。これは jQuery オブジェクトです。
    ui.columnKey を使用して列キーを取得します。
    列を昇順または降順に並べ替えるかどうかを決定するには ui.isAsc を使用します。True の場合は昇順順序です。

    コード サンプル

     // Delegate
    			$(document).delegate(".selector", "igtreegridsortingmodaldialogsortingchanged", function (evt, ui) {
                    
                    // Get reference to igTreeGridSorting object
    				ui.owner;
                    
    				// Get the reference to the igTreeGrid widget.
    				ui.owner.grid;
                    
    				// Get a reference to the modal dialog element. This is a jQuery object.
    				ui.modalDialogElement;
                    
                    // Get the column key.
                    ui.columnKey;
                    
                    // Get whether column should be ascending or not. If true it should be ascending
                    ui.isAsc;
    			});
    
    			// Initialize
                $(".selector").igTreeGrid({
    				features: 
                    [{
    					name: "Sorting",
    					modalDialogSortingChanged: function (evt, ui) {...}
    				}]
    			}); 
  • clearSorting
    継承

    .igTreeGridSorting( "clearSorting" );

    すべての並べ替えた列で現在の並べ替えを解除し、UI を更新します。

    コード サンプル

     $(".selector").igTreeGridSorting("clearSorting"); 
  • closeMultipleSortingDialog
    継承

    .igTreeGridSorting( "closeMultipleSortingDialog" );

    複数並べ替えダイアログを閉じます。

    コード サンプル

     $(".selector").igTreeGridSorting("closeMultipleSortingDialog"); 
  • destroy

    .igTreeGridSorting( "destroy" );

    コード サンプル

     $(".selector").igTreeGridSorting("destroy"); 
  • isColumnSorted

    .igTreeGridSorting( "isColumnSorted", columnKey:string );
    返却型:
    bool

    指定した columnKey を持つ列を並べ替える (データ ソースの並べ替え式から取得される) かどうかを返します。

    • columnKey
    • タイプ:string
    • 列キー (文字列)。

    コード サンプル

     $(".selector").igTreeGridSorting("isColumnSorted", "employeeId"); 
  • openMultipleSortingDialog
    継承

    .igTreeGridSorting( "openMultipleSortingDialog" );

    複数並べ替えダイアログを開きます。

    コード サンプル

     $(".selector").igTreeGridSorting("openMultipleSortingDialog"); 
  • removeDialogClearButton
    継承

    .igTreeGridSorting( "removeDialogClearButton" );

    [複数並べ替え] ダイアログの [クリア] ボタンを削除します。

    コード サンプル

     $(".selector").igTreeGridSorting("removeDialogClearButton"); 
  • renderMultipleSortingDialogContent
    継承

    .igTreeGridSorting( "renderMultipleSortingDialogContent", isToCallEvents:object );

    並べ替えられた項目および並べ替えられていない項目の [複数並べ替え] ダイアログの内容を描画します。

    • isToCallEvents
    • タイプ:object

    コード サンプル

     $(".selector").igTreeGridSorting("renderMultipleSortingDialogContent", true); 
  • sortColumn
    継承

    .igTreeGridSorting( "sortColumn", index:object, direction:object );

    グリッド列を並べ替え、UI を更新します。

    • index
    • タイプ:object
    • 列キー (文字列) またはインデックス (数値) - 複数行グリッドのみ列キーが使用できます。並べ替える列を指定します。モードが複数の場合、前の並べ替え状態がクリアされません。
    • direction
    • タイプ:object
    • 並べ替え方向 (昇順または降順) を指定します。

    コード サンプル

     $(".selector").igTreeGridSorting("sortColumn", 1, "descending"); 
  • sortMultiple
    継承

    .igTreeGridSorting( "sortMultiple" );

    グリッド列を並べ替え、UI を更新します。

    コード サンプル

     $(".selector").igTreeGridSorting("sortMultiple"); 
  • unsortColumn
    継承

    .igTreeGridSorting( "unsortColumn", index:object );

    指定した columnKey/columnIndex を持つグリッド列で並べ替えを解除し、UI を更新します。

    • index
    • タイプ:object
    • 列キー (文字列) またはインデックス (数値) - 複数行グリッドのみ列キーが使用できます。並べ替えを解除する列を指定します。モードが複数の場合、前の並べ替え状態がクリアされません。

    コード サンプル

     $(".selector").igTreeGridSorting("unsortColumn"); 
  • ui-iggrid-colasc ui-state-highlight

    昇順に並べ替えられるある列のセルに適用されるクラス。
  • ui-iggrid-colheaderasc

    昇順に並べ替えられる列ヘッダーに適用されるクラス。
  • ui-iggrid-coldesc ui-state-highlight

    降順に並べ替えられるある列のセルに適用されるクラス。
  • ui-iggrid-colheaderdesc

    降順に並べ替えられる列ヘッダーに適用されるクラス。
  • ui-iggrid-sorting-dialog-ascdescbutton

    複数並べ替えダイアログで昇順/降順ボタンに適用されるクラス。
  • ui-button ui-corner-all ui-button-icon-only ig-sorting-indicator

    複数並べ替えダイアログで並べ替えた列の昇順ボタンに適用されるクラス。
  • ui-button-icon-primary ui-icon ui-icon-arrowthick-1-n

    複数並べ替えダイアログで並べ替えた列の昇順ボタン アイコンに適用されるクラス。
  • ui-button ui-corner-all ui-button-icon-only ig-sorting-indicator

    複数並べ替えダイアログで並べ替えた列の降順ボタン アイコンに適用されるクラス。
  • ui-button-icon-primary ui-icon ui-icon-arrowthick-1-s

    複数並べ替えダイアログで並べ替えた列の降順ボタン アイコンに適用されるクラス。
  • ui-state-hover

    複数並べ替えダイアログの並べ替え解除ボタンなどのホバーされたボタンに適用されるクラス。
  • ui-iggrid-sorting-dialog-sortbybuttons ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-igbutton ui-widget-content ui-igbutton-remove

    複数並べ替えダイアログで並べ替えた列の並べ替え解除ボタンに適用されるクラス。
  • ui-button-icon-primary ui-icon ui-icon-circle-close

    複数並べ替えダイアログで並べ替えた列の並べ替え解除ボタンに適用されるクラス。
  • ui-iggrid-dialog-text

    複数並べ替えダイアログで並べ替えていない列名を表示するコンテナーに適用されるクラス。
  • ui-iggrid-sorting-dialog-sortedcolumns

    複数並べ替えダイアログで並べ替えた列のコンテナーに適用されるクラス。
  • ui-widget-content

    複数並べ替えダイアログで各並べ替えた列のリスト項目に適用されるクラス。
  • ui-iggrid-dialog-text

    複数並べ替えダイアログで並べ替えた列名を表示するコンテナーに適用されるクラス。
  • ui-iggrid-sorting-dialog-unsortedcolumns

    複数並べ替えダイアログで並べ替えていない列のコンテナーに適用されるクラス。
  • ui-widget-content

    複数並べ替えダイアログで並べ替えていない各列のリスト項目に適用されるクラス。
  • ui-iggrid-sorting-dialog-unsortedcolumns-sortbybutton

    複数並べ替えダイアログで各列の並べ替えボタンに適用されるクラス。
  • ui-iggrid-featurechooser-li-iconcontainer ui-icon ui-iggrid-icon-sort-a-z

    機能セレクターで昇順並べ替えインジケーターに適用されるクラス。
  • ui-iggrid-featurechooser-li-iconcontainer ui-icon ui-iggrid-icon-sort-z-a

    機能セレクターで降順並べ替えインジケーターに適用されるクラス。
  • ui-icon ui-iggrid-icon-multiple-sorting

    複数並べ替えダイアログを表示する昨日セレクター アイコンに適用されるクラス。
  • ui-iggrid-sorting-dialog-sortbybutton

    複数並べ替えダイアログで並べ替え条件ボタンに適用されるクラス。
  • ui-iggrid-sortableheader ui-state-default

    並べ替え可能な列ヘッダーに適用されるクラス。
  • ui-iggrid-sortableheaderactive ui-state-active

    アクティブな (キーボードでのナビゲートやクリックのできる) 並べ替え可能なヘッダーに適用されるクラス。
  • ui-iggrid-sortableheaderfocus ui-state-focus

    フォーカスがある並べ替え可能な列ヘッダーに適用されるクラス。
  • ui-iggrid-sortableheaderhover ui-state-hover

    ホバー状態の並べ替え可能な列ヘッダーに適用されるクラス。
  • ui-iggrid-colindicator

    列ヘッダー内に描画される並べ替えインジケーター SPAN に適用されるクラス。
  • ui-iggrid-colindicator-asc ui-icon ui-icon-arrowthick-1-n

    昇順状態の並べ替えインジケーター スパンに適用されるクラス。
  • ui-iggrid-colindicator-desc ui-icon ui-icon-arrowthick-1-s

    降順状態の並べ替えインジケーター スパンに適用されるクラス。

Copyright © 1996 - 2024 Infragistics, Inc. All rights reserved.