このオプションが true に設定されている場合、グリッド行の高さは、avgRowHeight と表示バーチャル レコードに基づいて自動的に計算されます。 avgRowHeight が指定されていない場合、ランタイムで自動的に計算されます。

 
				// Initialize
				$(".selector").igGrid({
					adjustVirtualHeights : true
				});

				// Get
				var virtualHeights = $(".selector").igGrid("option", "adjustVirtualHeights");
			 

true に設定した場合、次の動作を実行します:
新しい行が追加された後に削除された場合、トランザクションはログに追加されません。
新しい行を追加し、編集した後に削除された場合、トランザクションはログに追加されません。
行または特定のセルに複数の編集を実行すると、単一のトランザクションになります。
注: このオプションは、 autoCommit を false に設定した場合のみに適用されます。

 
				//Initialize
				$(".selector").igGrid({
					aggregateTransactions : true
				});

				//Get
				var aggregateTransactions = $(".selector").igGrid("option", "aggregateTransactions");
			 

交互行スタイル (奇数行と偶数行で異なるスタイルになる) のレンダリングを有効または無効にします。

 
				//Initialize
				$(".selector").igGrid({
					alternateRowStyles : true;
				});

				//Get
				var rowAltStyles = $(".selector").igGrid("option", "alternateRowStyles");

				//Set
				$(".selector").igGrid("option", "alternateRowStyles", true);
			 

autoAdjustHeight を false に設定した場合、height はスクロール コンテナーのみに設定されます。ページング フッター、フィルター行、ヘッダーなどのすべての他の UI 要素は高さを追加します。グリッドの合計の高さはこの値より大きくなります。スクロール コンテナー (コンテンツ領域) の高さは動的に計算されません。このオプションを false に設定するとサイズの大きなデータ セット (1000 行を一度に描画、virtualizationは無効) の初期描画パフォーマンスが向上します。これは offsetHeight などの DOM プロパティにアクセスするときにリフローがブラウザーで行われないためです。

 
				// Initialize
				$(".selector").igGrid({
					autoAdjustHeight : false
				});

				// Get
				var adjustHeight = $(".selector").igGrid("option", "autoAdjustHeight");
			 

行またはセルを編集するとトランザクションをクライアント データソースに自動的にコミットします。その場合も、トランザクションをサーバー側のデータソースにコミットするために、saveChanges 呼び出しを実行する必要があります。

 
				//Initialize
				$(".selector").igGrid({
					autoCommit : true
				});

				//Get
				var commit = $(".selector").igGrid("option", "autoCommit");
			 

true およびすべての列の幅を指定し、合計幅がグリッド幅より小さい場合、最後の列幅がグリッドにフィットするよう自動的に調整されます。

 
				//Initialize
				$(".selector").igGrid({
					autofitLastColumn : true
				});

				//Get
				var autoFit = $(".selector").igGrid("option", "autofitLastColumn");
			 

数値列、日付列、および時間列のセルの自動書式設定テキストを取得または設定します。数値および日付の書式パターンおよびルールは $.ig.regional.defaults オブジェクトで定義されます。 列形式の詳細です。

 
				//Initialize
				$(".selector").igGrid({
					autoFormat : "number"
				});
				//Get
				var autoFormat = $(".selector").igGrid("option", "autoFormat");
			 

columns コレクションが定義されておらず、autoGenerateColumns が true に設定された場合、columns は dataRendering イベントが発生される前にデータソースから暗示されます。暗示された columns コレクションは dataRendering で変更できます。autoGenerateColumns が明示的に設定されておらず、columns に少なくとも 1 つの列が定義されている場合、autoGenerateColumns は自動的に false に設定されます。
autoGenerateColumns が true で列が自動生成列に定義された列がある場合、明示的に定義した後に描画されます。
自動生成列に幅が定義されないため、defaultColumnWidth の設定も検討してください。

 
				// Initialize
				$(".selector").igGrid({
					autoGenerateColumns : false
				});

				// Get
				var autoCols = $(".selector").igGrid("option", "autoGenerateColumns");
			 

fixed モードでcolumnVirtualizationに使用されます。これは列幅の平均値 (ピクセル単位) です。

 
				// Initialize
				$(".selector").igGrid({
					avgColumnWidth : "100px"
				});
				// Get
				var width = $(".selector").igGrid("option", "avgColumnWidth");
			 

rowVirtualization - fixed モードで使用されます。これは、エンド ユーザーがスクロールするときに描画する行の数を計算するために使用されるピクセル単位 (デフォルト) の平均値です。また、すべての行の高さが自動的にこの値に設定されます。

 
				// Initialize
				$(".selector").igGrid({
					avgRowHeight : "35px"
				});
				// Get
				var height = $(".selector").igGrid("option", "avgRowHeight");
			 

グリッド ヘッダーの上に表示されるキャプション テキスト。

 
				//Initialize
				$(".selector").igGrid({
					caption : "Sales Data"
				});

				//Get
				var caption = $(".selector").igGrid("option", "caption");

				//Set
				$(".selector").igGrid("option", "caption", "Sales Data");
			 

列オブジェクトの配列。列配列の構成の詳細については、列とレイアウト トピックを参照してください。

 
				// Initialize
				$(".selector").igGrid({
					autoGenerateColumns: false,
					columns: [
						{ headerText: "Product ID", key: "ProductID", dataType: "number" },
						{ headerText: "Product Name", key: "Name", dataType: "string" },
						{ headerText: "ProductNumber", key: "ProductNumber", dataType: "string" },
						{ headerText: "Color", key: "Color", dataType: "string" },
						{ headerText: "StandardCost", key: "StandardCost", dataType: "number" },
					]
				});

				// Get
				var cols = $(".selector").igGrid("option", "columns");

				// Set
				var newColumn = { headerText: "New Column", key: "NewCol" };
				cols.push(newColumn);
				$(".selector").igGrid("option", "columns", cols);
			 

• colSpan

  タイプ:

  number

  デフォルト:

  1

  複数行レイアウト構成でセルの colSpan を指定します。colSpan 0 はサポートされていないため、グリッドにより 1 に変更されます。詳細については、複数行レイアウトを参照してください。

  コード サンプル

   
  						//Initialize
  						$(".selector").igGrid({
  							autoGenerateColumns: false,
  							columns: [
  								{ headerText: "Product ID", key: "ProductID", dataType: "number" },
  								{ headerText: "Product Name", key: "Name", dataType: "string", colSpan: 2 },
  								{ headerText: "ProductNumber", key: "ProductNumber", dataType: "string" },
  								{ headerText: "Color", key: "Color", dataType: "string" },
  								{ headerText: "StandardCost", key: "StandardCost", dataType: "number", colSpan: 2 },
  							]
  						});
  
  						//Get
  						var colSpan = $(".selector").igGrid("option", "columns")[0].colSpan;
  					 

• columnCssClass

  タイプ:

  string

  デフォルト:

  null

  この列のデータ セルに適用される CSS クラスのスペースで分割されたリスト。このクラスは、テンプレートに完全な <td> 定義を含む列 template が定義されている列がある場合、適用されません。

  コード サンプル

   
  						<style>
  							.colStyle {
  								background-color: red;
  							}
  						</style>
  
  						$(".selector").igGrid({
  						autoGenerateColumns: false,
  						columns: [
  							{ headerText: "Product ID", key: "ProductID", dataType: "number", columnCssClass: "colStyle" },
  							{ headerText: "Product Name", key: "Name", dataType: "string" },
  							{ headerText: "ProductNumber", key: "ProductNumber", dataType: "string" },
  							{ headerText: "Color", key: "Color", dataType: "string" },
  							{ headerText: "StandardCost", key: "StandardCost", dataType: "number" }
  						]
  						});
  						//Get
  						var colCssClass =  $(".selector").igGrid("option", "columns")[0].columnCssClass;
  					 

• columnIndex

  タイプ:

  number

  デフォルト:

  null

  複数行レイアウト構成でセルの列インデックスを指定します。複数行レイアウト モードを有効にするには、すべての列にこのプロパティを設定する必要があります。 詳細については、複数行レイアウト機能を参照してください。

  コード サンプル

   
  						//Initialize
  						$(".selector").igGrid({
  							autoGenerateColumns: false,
  							columns: [
  								{ headerText: "Product ID", key: "ProductID", dataType: "number", rowIndex: 0, columnIndex: 0 },
  								{ headerText: "Product Name", key: "Name", dataType: "string", rowIndex: 0, columnIndex: 1, colSpan: 3 },
  								{ headerText: "ProductNumber", key: "ProductNumber", dataType: "string", rowIndex: 1, columnIndex: 0 },
  								{ headerText: "Color", key: "Color", dataType: "string", rowIndex: 1, columnIndex: 1 },
  								{ headerText: "StandardCost", key: "StandardCost", dataType: "number", rowIndex: 1, columnIndex: 2, colSpan: 2 },
  							]
  						});
  
  						//Get
  						var colIndex = $(".selector").igGrid("option", "columns")[0].columnIndex;
  					 

• dataType

  タイプ:

  enumeration

  デフォルト:

  string

  列セル値のデータ型。string、number、bool、date、time、または object。

  メンバー

  • string
  • タイプ:string
  • 列のデータが string 型の場合に使用されます。
  • number
  • タイプ:string
  • 列のデータが number 型の場合に使用されます。
  • boolean
  • タイプ:string
  • 列のデータが boolean 型の場合に使用されます。
  • date
  • タイプ:string
  • 列のデータが date 型の場合に使用されます。
  • time
  • タイプ:string
  • 列のデータは日付型ですが、時間部分のみが必要な場合に使用されます。
  • object
  • タイプ:string
  • 列のデータが object 型の場合に使用されます。

  コード サンプル

   
  						//Initialize
  						$(".selector").igGrid({
  							autoGenerateColumns: false,
  							columns: [
  								{ headerText: "Product ID", key: "ProductID", dataType: "number" },
  								{ headerText: "Product Name", key: "Name", dataType: "string" },
  								{ headerText: "Production Date", key: "ProductionDate", dataType: "date" },
  							]
  						});
  						//Get
  						var cols = $(".selector").igGrid("option", "columns");
  						var productIdDataType = cols[0].dataType;
  					 

• dateDisplayType

  タイプ:

  enumeration

  デフォルト:

  local

  グリッドのこの列で日付が表示される方法を決定します。

  メンバー

  • local
  • タイプ:string
  • この列の日付がクライアントのローカル タイムゾーンで描画されます。
  • utc
  • タイプ:string
  • この列の日付が UTC 表記で描画されます。

  コード サンプル

   
  						// Initialize
  						$(".selector").igGrid({
  							columns: [
  								{ headerText: "Departure Date", key: "DepartureDate", dataType: "date", dateDisplayType: "local" },
  								{ headerText: "Arrival Date", key: "ArrivalDate", dataType: "date", dateDisplayType: "utc" }
  							]
  						});
  						// Get
  						var cols = $('.selector').igGrid('option', 'columns');
  						var departureDateDisplayType = cols[0].dateDisplayType;
  					 

• format

  タイプ:

  string

  デフォルト:

  null

  列のセルの書式タイプを取得または設定します。デフォルト値は null です。書式指定子の詳細については、日付、数値、および文字列の書式設定 を参照してください。
  
  dataType が "date" の場合、次の書式がサポートされます。"date", "dateLong", "dateTime", "time", "timeLong", "MM/dd/yyyy", "MMM-d, yy, h:mm:ss tt", "dddd d MMM" など。
  dataType が "time" の場合、次の書式がサポートされます。"date", "dateLong", "dateTime", "time", "timeLong", "MMM-d, yy, h:mm:ss tt" など。
  dataType が "number" の場合、次の書式がサポートされます。 "number", "currency", "percent", "int", "double", "0.00", "#.0####", "0", "#.#######" など。
  "double" の値は "number" と同様ですが、小数点以下の桁数に制限はありません。
  数値および日付の書式パターンおよびルールは $.ig.regional.defaults オブジェクトで定義されます。
  dataType が "string" または設定されていない場合、可能性のある書式は "{0}" フラグの代用で描画されます。たとえば、書式が Name: {0} に設定されていて、セル値が Bob の場合、値は Name: Bob として表示されます。
  値が checkbox に設定される場合、グリッドの renderCheckboxes オプションを無視し、チェックボックスが常に使用されます。列の dataType オプションが bool に設定される場合のみに影響します。

  コード サンプル

   
  						// Initialize
  						$(".selector").igGrid({
  							autoGenerateColumns: false,
  							columns: [
  								{ headerText: "Product ID", key: "ProductID", dataType: "number", format: "number" },
  								{ headerText: "Production Date", key: "ProductionDate", dataType: "date", format: "ddd, MMM-d-yy HH:mm" },
  							]
  						});
  
  						// Get
  						var cols = $(".selector").igGrid("option", "columns");
  						var productIdFormat = cols[0].format;
  					 

• formatter

  タイプ:

  enumeration

  デフォルト:

  null

  セル値を書式設定するために使用される関数 (文字列または関数) への参照。関数は値を取得して、新しく書式設定された値を返します。 詳細については、列の書式設定を参照してください。

  メンバー

  • string
  • タイプ:string
  • セル値を書式設定するために使用される関数の名前。
  • function
  • タイプ:function
  • セル値を書式設定するために使用される関数。関数は値を取得して、新しく書式設定された値を返します。

  コード サンプル

   
  						// Initialize
  						$(".selector").igGrid({
  							autoGenerateColumns: false,
  							columns: [
  								{ headerText: "In production", key: "InProduction", formatter: function(val, record) {return (val === 1)? "Yes" : "No";} }
  							]
  						});
  						// Get
  						var cols = $(".selector").igGrid("option", "columns");
  						var inProductionFormatter = cols[0].formatter;
  					 

• formula

  タイプ:

  enumeration

  デフォルト:

  null

  同じ行の他のセル値に基づいて現在のセルの値を計算するJavaScript関数への参照または名前。unbound columns で使用されます。

  メンバー

  • string
  • タイプ:string
  • JavaScript 関数の名前。
  • function
  • タイプ:function
  • JavaScript 関数への参照。

  コード サンプル

   
  						// Initialize
  						$(".selector").igGrid({
  							autoGenerateColumns: false,
  							columns: [
  								{ headerText: "Total", key: "TotalUC", unbound: true,  formula: function (data, grid)
  									{
  										return data["UnitPrice"] * data["UnitsInStock"];
  									}
  								}
  							]
  						});
  						// Get
  						var totalUC = $('.selector').igGrid('getUnboundColumnByKey', 'TotalUC');
  						var totalFormula = totalUC.formula;
  					 

• group

  タイプ:

  array

  デフォルト:

  []

  要素タイプ:

  object

  子列定義の配列。列がプロパティ グループを持つ場合、グリッドは複数列ヘッダーを含みます。

  コード サンプル

   
  						// Initialize
  						$(".selector").igGrid({
  							columns: [
  								{ headerText: "Product Data", key: "ProductData", group: [
  									{ headerText: "Product Name", key: "Name", dataType: "string" },
  									{ headerText: "Product Number", key: "ProductNumber", dataType: "string" }
  								]}
  							],
  							features:[
  								{
  									name: "MultiColumnHeaders"
  								}
  							],
  							width: "500px"
  						});
  
  						// Get
  						// getMultiColumnHeaders method returns multicolumn headers array. if there aren't multicolumn headers returns undefined.
  						var columns = $(".selector").igGridMultiColumnHeaders("getMultiColumnHeaders");
  						var group = columns[0].group;
  					 

• groupOptions

  タイプ:

  object

  デフォルト:

  {}

  縮小可能な列 groups の構成に使用されるオプション。

  コード サンプル

   
                          //Initialize
                          $(".selector").igGrid({
                              columns: [
                                  {
                                      headerText: "Company Information",
                                      group: [
                                          {
                                              headerText: "Company Name", key: "CompanyName", dataType: "string", width: "150px",
                                              groupOptions: {
                                                  hidden: "parentcollapsed"
                                              }
                                          },
                                          {
                                              headerText: "Contact Name", key: "ContactName", dataType: "string", width: "150px",
                                              groupOptions: {
                                                  hidden: "parentcollapsed"
                                              }
                                          },
                                          { headerText: "Contact Title", key: "ContactTitle", dataType: "string", width: "150px" }
                                      ],
                                      groupOptions: {
                                          expanded: false,
                                          allowGroupCollapsing: true
                                      },
                                      key: "companyInfo"
                                  }
                              ],
                              features: [
                                  {
                                      name: "MultiColumnHeaders"
                                  }
                              ],
                              width: "500px"
                          });
  
                          //Get
                          var columns = $(".selector").igGridMultiColumnHeaders("getMultiColumnHeaders");
                          var groupOptions = columns[0].groupOptions;
                       

  • allowGroupCollapsing

    タイプ:

    bool

    デフォルト:

    false

    列ヘッダーに展開インジケーターを表示するかどうかを設定します。

    コード サンプル

     
                                //Initialize
                                $(".selector").igGrid({
                                    columns: [
                                        {
                                            headerText: "Company Information",
                                            group: [
                                                {
                                                    headerText: "Company Name", key: "CompanyName", dataType: "string", width: "150px",
                                                    groupOptions: {
                                                        hidden: "parentcollapsed"
                                                    }
                                                },
                                                {
                                                    headerText: "Contact Name", key: "ContactName", dataType: "string", width: "150px",
                                                    groupOptions: {
                                                        hidden: "parentcollapsed"
                                                    }
                                                },
                                                { headerText: "Contact Title", key: "ContactTitle", dataType: "string", width: "150px" }
                                            ],
                                            groupOptions: {
                                                expanded: false,
                                                allowGroupCollapsing: true
                                            },
                                            key: "companyInfo"
                                        }
                                    ],
                                    features: [
                                        {
                                            name: "MultiColumnHeaders"
                                        }
                                    ],
                                    width: "500px"
                                });
    
                                //Get
                                var columns = $(".selector").igGridMultiColumnHeaders("getMultiColumnHeaders");
                                var groupOptions = columns[0].groupOptions;
                                var allowGroupCollapsing = groupOptions.allowGroupCollapsing;
                             

  • expanded

    タイプ:

    bool

    デフォルト:

    true

    グループが展開または縮小されるかどうかを設定します。allowGroupCollapsing が true に設定された場合のみ適用します。

    コード サンプル

     
                                //Initialize
                                $(".selector").igGrid({
                                    columns: [
                                        {
                                            headerText: "Company Information",
                                            group: [
                                                {
                                                    headerText: "Company Name", key: "CompanyName", dataType: "string", width: "150px",
                                                    groupOptions: {
                                                        hidden: "parentcollapsed"
                                                    }
                                                },
                                                {
                                                    headerText: "Contact Name", key: "ContactName", dataType: "string", width: "150px",
                                                    groupOptions: {
                                                        hidden: "parentcollapsed"
                                                    }
                                                },
                                                { headerText: "Contact Title", key: "ContactTitle", dataType: "string", width: "150px" }
                                            ],
                                            groupOptions: {
                                                expanded: false,
                                                allowGroupCollapsing: true
                                            },
                                            key: "companyInfo"
                                        }
                                    ],
                                    features: [
                                        {
                                            name: "MultiColumnHeaders"
                                        }
                                    ],
                                    width: "500px"
                                });
    
                                //Get
                                var columns = $(".selector").igGridMultiColumnHeaders("getMultiColumnHeaders");
                                var groupOptions = columns[0].groupOptions;
                                var expanded = groupOptions.expanded;
                             

  • hidden

    タイプ:

    enumeration

    デフォルト:

    never

    グループが非表示にされる条件を設定します。allowGroupCollapsing が true に設定された場合のみ適用します。

    メンバー

    • never
    • タイプ:string
    • グループを非表示にしません。
    • always
    • タイプ:string
    • グループを常に非表示にします。
    • parentcollapsed
    • タイプ:string
    • 親グループが縮小されるときにグループを非表示にします。
    • parentexpanded
    • タイプ:string
    • 親グループが展開されるときにグループを非表示にします。

    コード サンプル

     
                                //Initialize
                                $(".selector").igGrid({
                                    columns: [
                                        {
                                            headerText: "Company Information",
                                            group: [
                                                {
                                                    headerText: "Company Name", key: "CompanyName", dataType: "string", width: "150px",
                                                    groupOptions: {
                                                        hidden: "parentcollapsed"
                                                    }
                                                },
                                                {
                                                    headerText: "Contact Name", key: "ContactName", dataType: "string", width: "150px",
                                                    groupOptions: {
                                                        hidden: "parentcollapsed"
                                                    }
                                                },
                                                { headerText: "Contact Title", key: "ContactTitle", dataType: "string", width: "150px" }
                                            ],
                                            groupOptions: {
                                                expanded: false,
                                                allowGroupCollapsing: true
                                            },
                                            key: "companyInfo"
                                        }
                                    ],
                                    features: [
                                        {
                                            name: "MultiColumnHeaders"
                                        }
                                    ],
                                    width: "500px"
                                });
                                //Get
                                var columns = $(".selector").igGridMultiColumnHeaders("getMultiColumnHeaders");
                                var groupOptions = columns[0].group[0].groupOptions;
                                var hidden = groupOptions.hidden;
                             

• headerCssClass

  タイプ:

  string

  デフォルト:

  null

  この列のヘッダー セルに適用される CSS クラスのスペースで分割されたリスト。

  コード サンプル

   
  						<style>
  							.headerCss {
  								background-color: red;
  							}
  						</style>
  
  						// Initialize
  						$(".selector").igGrid({
  							autoGenerateColumns: false,
  							columns: [
  								{ headerText: "Product Name", key: "Name", dataType: "string", headerCssClass: "headerCss" }
  							]
  						});
  
  						// Get
  						var headerCss = $(".selector").igGrid("option", "columns");
  						var headerCssClass = cols[0].headerCssClass;
  					 

• headerText

  タイプ:

  string

  デフォルト:

  null

  指定した列のヘッダー テキスト。

  コード サンプル

   
  						// Initialize
  						$(".selector").igGrid({
  							autoGenerateColumns: false,
  							columns: [
  								{ headerText: "Product Name", key: "Name", dataType: "string" },
  							]
  						});
  
  						// Get
  						var cols = $(".selector").igGrid("option", "columns");
  						var productNameHeaderText = cols[0].headerText;
  					 

• hidden

  タイプ:

  bool

  デフォルト:

  false

  列の初期表示状態 (表示/非表示)。非表示機能が有効ではなくても列を非表示にすることができますが、表示にするための UI はありません。非表示機能のオプションで列を非表示として定義することもでき、これらの定義が優先されます。

  コード サンプル

   
  						// Initialize
  						$('.selector').igGrid({
  							autoGenerateColumns: false,
  							columns: [
  								{ headerText: "Product Name", key: "Name", dataType: "string", hidden: true },
  							]
  						});
  
  						// Get
  						var cols = $('.selector').igGrid('option', 'columns');
  						var productNameHidden = cols[0].hidden;
  					 

• key

  タイプ:

  string

  デフォルト:

  null

  列がバインドされるデータ ソースのプロパティ。また、columnByKey などの API メソッドを使用して列を識別し、特定の列を検索するために使用されます。

  コード サンプル

   
  						// Initialize
  						$(".selector").igGrid({
  							autoGenerateColumns: false,
  							columns: [
  								{ headerText: "Product Name", key: "Name", dataType: "string" },
  							]
  						});
  
  						// Get
  						var cols = $(".selector").igGrid("option", "columns");
  						var productNameKey = cols[0].key;
  					 

• mapper

  タイプ:

  enumeration

  デフォルト:

  null

  このオプションは、dataType オブジェクトのある列のみ適用されます。データレコードからの複雑なデータ抽出に使用される関数への参照、または関数の名前。戻り値はこの列に関連付けられたすべてのデータ操作に使用され、セル値として表示されます。詳細については、列マッパーを設定する方法の例を参照してください。

  メンバー

  • string
  • タイプ:string
  • マッパー関数の名前。
  • function
  • タイプ:function
  • マッパー関数への参照。

  コード サンプル

   
  						//Initialize
  						$(".selector").igGrid({
  							columns: [
  								{ headerText: "Product ID", key: "ProductID", dataType: "number" },
  								{ headerText: "Product Name", key: "Name", dataType: "string" },
  								{ headerText: "Product Number", key: "ProductNumber", dataType: "string" },
  								{
  									headerText: "Category",
  									key: "Category",
  									dataType: "object",
  									mapper: function (record) {
  										return record.Category.Name;
  									}
  								}
  							]
  						});
  						//Get
  						var cols = $(".selector").igGrid("option", "columns");
  						var categoryMapper = cols[3].mapper;
  					 

• navigationIndex

  タイプ:

  number

  デフォルト:

  null

  複数行レイアウトを持つグリッドでセルが編集モードにある場合、TAB シーケンスでセルのナビゲーション インデックスを指定します。それ以外の場合に結果がありません。 グリッドの複数行レイアウトを参照してください。

  コード サンプル

   
  					//Initialize
  					$(".selector").igGrid({
  						autoGenerateColumns: false,
  						columns: [
  							{ headerText: "Product ID", key: "ProductID", dataType: "number", rowIndex: 0, columnIndex: 0 },
  							{ headerText: "Product Name", key: "Name", dataType: "string", rowIndex: 0, columnIndex: 1, colSpan: 3, navigationIndex: 1 },
  							{ headerText: "ProductNumber", key: "ProductNumber", dataType: "string", rowIndex: 1, columnIndex: 0, navigationIndex: 2 },
  							{ headerText: "Color", key: "Color", dataType: "string", rowIndex: 1, columnIndex: 1, navigationIndex: 4 },
  							{ headerText: "StandardCost", key: "StandardCost", dataType: "number", rowIndex: 1, columnIndex: 2, colSpan: 2, navigationIndex: 3 }
  						]
  					});
  					//Get
  					var colIndex = $(".selector").igGrid("option", "columns")[1].navigationIndex;
  					 

• rowIndex

  タイプ:

  number

  デフォルト:

  null

  複数行レイアウト構成でセルの行インデックスを指定します。複数行レイアウト モードを有効にするには、すべての列にこのプロパティを設定する必要があります。 詳細については、グリッドの複数行レイアウトを参照してください。

  コード サンプル

   
  						//Initialize
  						$(".selector").igGrid({
  							autoGenerateColumns: false,
  							columns: [
  								{ headerText: "Product ID", key: "ProductID", dataType: "number", rowIndex: 0, columnIndex: 0 },
  								{ headerText: "Product Name", key: "Name", dataType: "string", rowIndex: 0, columnIndex: 1, colSpan: 3 },
  								{ headerText: "ProductNumber", key: "ProductNumber", dataType: "string", rowIndex: 1, columnIndex: 0 },
  								{ headerText: "Color", key: "Color", dataType: "string", rowIndex: 1, columnIndex: 1 },
  								{ headerText: "StandardCost", key: "StandardCost", dataType: "number", rowIndex: 1, columnIndex: 2, colSpan: 2 },
  							]
  						});
  
  						//Get
  						var rowIndex = $(".selector").igGrid("option", "columns")[0].rowIndex;
  					 

• rowspan

  非推奨

  タイプ:

  number

  デフォルト:

  0

  このオプションは 2016 年 6 月のサービス リリースより非推奨となります。
  複数列ヘッダー セルのスパンを変更します。代わりに rowSpan オプションを使用します。

• rowSpan

  タイプ:

  number

  デフォルト:

  1

  複数行レイアウト構成でセルの rowSpan を指定します。rowSpan 0 はサポートされていないため、グリッドにより 1 に変更されます。 詳細については、複数行レイアウト機能を参照してください。複数行レイアウトが使用されていないが複数列ヘッダーを設定する場合、このオプションはヘッダー セルのスパンを変更するために使用されます。

  コード サンプル

   
  						//Initialize
  						$(".selector").igGrid({
  							autoGenerateColumns: false,
  							columns: [
  								{ headerText: "Product ID", key: "ProductID", dataType: "number", rowIndex: 0, columnIndex: 0, rowSpan: 2 },
  								{ headerText: "Product Name", key: "Name", dataType: "string", rowIndex: 0, columnIndex: 1, colSpan: 3 },
  								{ headerText: "ProductNumber", key: "ProductNumber", dataType: "string", rowIndex: 1, columnIndex: 1 },
  								{ headerText: "Color", key: "Color", dataType: "string", rowIndex: 1, columnIndex: 2 },
  								{ headerText: "StandardCost", key: "StandardCost", dataType: "number", rowIndex: 1, columnIndex: 3 },
  							]
  						});
  
  						//Get
  						var rowSpan = $(".selector").igGrid("option", "columns")[0].rowSpan;
  					 

• template

  タイプ:

  string

  デフォルト:

  null

  個々の列のテンプレートを設定します。テンプレートのコンテンツは、テーブル セル内に入る HTML マークアップまたはテーブル セル マークアップ全体でなければなりません。 基本的な列テンプレート作成の例を参照してください。

  コード サンプル

   
  						// Initialize
  						$(".selector").igGrid({
  							autoGenerateColumns: false,
  							columns: [
  								{ headerText: "Product Name", key: "Name", dataType: "string", template: "Product: ${Name}" },
  							]
  						});
  
  						// Get
  						var cols = $(".selector").igGrid("option", "columns");
  						var template = cols[0].template;
  					 

• unbound

  タイプ:

  bool

  デフォルト:

  false

  列データーがデータ ソースにバインドされるかどうかを設定します。true の場合、この列のセルはデータソースにバインドされません。 この列のデータは、数式、unboundValues、または setUnboundValues API メソッドで生成されます。 非バインド列機能の概要を参照してください。

  コード サンプル

   
  						// Initialize
  						$(".selector").igGrid({
  							autoGenerateColumns: false,
  							columns: [
  								{
  									headerText: "Promotion Expired Date",
  									key: "PromExpDate",
  									dataType: "date",
  									unbound: true,
  									unboundValues: [
  										new Date('4/24/2016'),
  										new Date('8/24/2016'),
  										new Date('6/24/2016'),
  										new Date('10/24/2016'),
  										new Date('11/24/2016')
  									]
  								}
  							]
  						});
  
  						// Get
  						var unboundColumn = $(".selector").igGrid('getUnboundColumnByKey', 'PromExpDate');
  						var isUnbound = unboundColumn.unbound;
  					 

• unboundValues

  タイプ:

  array

  デフォルト:

  null

  要素タイプ:

  列が非バインドの場合、列セルの初期化で生成される値の配列。

  コード サンプル

   
  						// Initialize
  						$(".selector").igGrid({
  							autoGenerateColumns: false,
  							columns: [
  								{
  									headerText: "Promotion Expired Date",
  									key: "PromotionExpDate",
  									dataType: "date",
  									unbound: true,
  									unboundValues: [
  										new Date('4/24/2016'),
  										new Date('8/24/2016'),
  										new Date('6/24/2016'),
  										new Date('10/24/2016'),
  										new Date('11/24/2016')
  									]
  								}
  							]
  						});
  					 

• width

  タイプ:

  enumeration

  デフォルト:

  null

  列幅 (ピクセルまたはパーセント)。列セルのコンテンツ (ヘッダー テキストを含む) に基づいた幅自動サイズ調整の場合、'*' として設定もできます。 幅を定義せずに defaultColumnWidth を設定した場合、すべての列に設定されます。

  メンバー

  • string
  • タイプ:string
  • 列幅は、ピクセル (px) およびパーセンテージ (％) で設定します。セルとヘッダーのコンテンツに基づいて自動サイズ調整するには、'*' を設定します。
  • number
  • タイプ:number
  • 列幅は数値として設定できます。

  コード サンプル

   
  							// Initialize
  							$(".selector").igGrid({
  								autoGenerateColumns: false,
  								columns: [
  									{ headerText: "Product Name", key: "Name", width: "100px", dataType: "string" },
  								]
  							});
  							// Get
  							var cols = $(".selector").igGrid("option", "columns");
  							var productNameWidth = cols[0].width;
  						 

列のみの可視化を有効にします。列の仮想化は、固定行仮想化でのみで有効です。columnVirtualization を true に設定するとvirtualization が自動的に true に設定され virtualizationMode は fixed に設定されます。

 
				// Initialize
				$(".selector").igGrid({
					columnVirtualization : true
				});

				// Get
				var columnVirtualization = $(".selector").igGrid("option", "columnVirtualization");
			 

$.ig.DataSource が受け取る任意の有効なデータソース、または $.ig.DataSource 自体のインスタンスにすることができます。

 
				//Initialize
				$(".selector").igGrid({
					dataSource : ds
				});
				//Get
				var ds = $(".selector").igGrid("option", "dataSource");
				Note:
				This code will return the original data source used when initializing the grid.
				To get the igDataSource instance use the following syntax:
				var igDs = $(".selector").data("igGrid").dataSource;
				//Set
				$(".selector").igGrid("option", "dataSource", ds);
			 

データ ソースのタイプ ("json" など) を明示的に設定します。$.ig.DataSource タイプを参照してください。

 
				//Initialize
				$(".selector").igGrid({
					dataSourceType : "xml"
				});

				//Get
				var dsType = $(".selector").igGrid("option", "dataSourceType");
			 

$.ig.DataSource を使用してデータが取得されるデータソースとしてリモート URL を指定します。

 
				//Initialize
				$(".selector").igGrid({
					dataSourceUrl : urlString
				});

				//Get
				var urlString = $(".selector").igGrid("option", "dataSourceUrl");
			 

列幅が設定されていないすべての列に設定されるデフォルトの列幅。列セルのコンテンツ (ヘッダー テキストを含む) に基づいた幅自動サイズ調整の場合、'*' として設定もできます。

 
				// Initialize
				$(".selector").igGrid({
					defaultColumnWidth : 100
				});
				// Get
				var width = $(".selector").igGrid("option", "defaultColumnWidth");
			 

マウスがレコードの上にある場合にホバー スタイルの描画を有効/無効にします。テンプレートされたコンテンツにホバー スタイル設定を適用しないテンプレートなどの場合に便利です。

 
				//Initialize
				$(".selector").igGrid({
					enableHoverStyles : false
				});

				//Get
				var enableHoverStyles = $(".selector").igGrid("option", "enableHoverStyles");
			 

幅および/または高さをパーセント (%) で設定した際にグリッドの親 DOM コンテナーがサイズ変更されるときのグリッドのディメンションの調整を有効または無効にします。

 
				//Initialize
				$(".selector").igGrid({
					enableResizeContainerCheck : false
				});

				//Get
				var enableResizeContainerCheck = $(".selector").igGrid("option", "enableResizeContainerCheck");

				//Set
				$(".selector").igGrid("option", "enableResizeContainerCheck", false);
			 

ローカル時間およびゾーン値の代わりにクライアント側の日付を UTC ISO 8061 文字列としてのシリアル化を有効/無効にします。

 
				//Initialize
				$(".selector").igGrid({
					enableUTCDates : true
				});

				//Get
				var enableUTCDates = $(".selector").igGrid("option", "enableUTCDates");

				//Set
				$(".selector").igGrid("option", "enableUTCDates", true);
			 

機能セレクター アイコンをヘッダー セルに表示する方法を構成します (ギアアイコンの表示など)。

 
				//Initialize
				$(".selector").igGrid({
					featureChooserIconDisplay : "always"
				});
				//Get
				var featureChooserIconDisplay = $(".selector").igGrid("option", "featureChooserIconDisplay");
			 

並べ替え、ページングなどのグリッド機能の定義のリスト。各機能はそれぞれ別のオプションを使用します。オプションについては機能ごとに文書化されています。 詳細については、 igGrid 機能の詳細を参照してください。

 
				//Initialize
				$(".selector").igGrid({
			features: [
				{
							name: "Paging",
							type: "local",
							pageSize: 13
						},
						{
							name: "Sorting",
							type: "local"
						},
						{
							name: "Selection"
						},
						{
							name: "Filtering",
							type: "local",
							filterDropDownItemIcons: false,
							filterDropDownWidth: 200
						}
					]
				});

				//Get
				var features = $(".selector").igGrid("option", "features");
			 

• name

  タイプ:

  string

  デフォルト:

  null

  有効にする機能の名前。

このオプションが true の場合はフッターが固定されるため、グリッド データのみがスクロール可能になります。もし 仮想化が有効な場合、fixedFooters は、どの値が設定されていても常に true として機能します。

 
				//Initialize
				$(".selector").igGrid({
					fixedFooters : false
				});

				//Get
				var fixed = $(".selector").igGrid("option", "fixedFooters");

				//Set
				$(".selector").igGrid("option", "fixedFooters", false);
			 

このオプションが True の場合、ヘッダーが固定されるので、グリッド データのみがスクロール可能です。もし 仮想化 が有効な場合、fixedHeaders は、どの値が設定されていても常に True として機能します。

 
				//Initialize
				$(".selector").igGrid({
					fixedHeaders : false
				});

				//Get
				var fixedHeaders = $(".selector").igGrid("option", "fixedHeaders");
			 

これは、データ行のあるスクロール コンテナー、ヘッダー、フッター、フィルター行など (もしあれば)、すべての UI 要素を含むグリッドの合計の高さです。 詳細については、igGrid の高さの設定を参照してください。

 
				//Initialize
				$(".selector").igGrid({
					height : "850px"
				});
				// Get
				var height = $(".selector").igGrid("option", "height");
				// Set
				$(".selector").igGrid("option", "height", "800px");
			 

dataSource がリモート URL の場合、リモート データ ソースのタイプを JSONP 設定するかどうかを定義します。

 
				//Initialize
				$(".selector").igGrid({
					jsonpRequest : true
				});

				//Get
				var jsonpRequest = $(".selector").igGrid("option", "jsonpRequest");
			 

ウィジェットのロケール言語設定を取得または設定します。

 
					//Initialize
				$(".selector").igGrid({
					language: "ja"
				});

				// Get
				var language = $(".selector").igGrid("option", "language");

				// Set
				$(".selector").igGrid("option", "language", "ja");
			 

ウィジェットのロケール設定を取得または設定します。

 
					//Initialize
				$(".selector").igGrid({
					locale: { optionChangeNotSupported: "Changing {optionName} is not supported" }
				});

				// Get
				var locale = $(".selector").igGrid("option", "locale");

				// Set
				$(".selector").igGrid("option", "locale", { optionChangeNotSupported: "Changing {optionName} is not supported" });
			 

このオプションが False の場合、グリッドがバインドされるデータは、定義された列に基づく追加の変換なく「そのまま」で使用されます。または定義された列で使用されるデータ プロパティのサブセットのみ新しいオブジェクトで抽出されて使用されます。

 
				//Initialize
				$(".selector").igGrid({
					localSchemaTransform : false
				});

				//Get
				var schemaTransform = $(".selector").igGrid("option", "localSchemaTransform");
			 

データ ソースがリモートの場合、データソース内に非バインド列を結合します。True の場合、非バインド列はランタイムでサーバーのデータソースに結合されます。注: データ ソースは新しいデータで拡張されるため、データが大きい場合はパフォーマンスに影響がある場合があります。mergeUnboundColumns が false の場合、非バインド データが送信されてクライアントで結合されます。この要素は igGrid MVC ヘルパー によって使用されます。
詳細については非バインド列をリモートに生成 (igGrid)を参照してください。

 
				//Initialize
				$(".selector").igGrid({
					mergeUnboundColumns : true,
					dataSource : REMOTE_URL
				});

				//Get
				var mergeUC = $(".selector").igGrid("option", "mergeUnboundColumns");
			 

データ レコードの一意識別子を含む列キー。

 
				//Initialize
				$(".selector").igGrid({
					primaryKey : "CustomerID"
				});

				//Get
				var key = $(".selector").igGrid("option", "primaryKey");
			 

ウィジェットの領域設定を取得または設定します。

 
				//Initialize
				$(".selector").igGrid({
					regional: "ja"
				});
				// Get
				var regional = $(".selector").igGrid("option", "regional");
				// Set
				$(".selector").igGrid("option", "regional", "ja");
			 

列の dataType が bool の場合、チェックボックスを描画してチェックボックス エディターを使用する機能を取得または設定します。 チェックボックスは、列テンプレートのある列のブール値で描画されません。

 
				//Initialize
				$(".selector").igGrid({
					renderCheckboxes : true
				});

				//Get
				var renderCheckboxes = $(".selector").igGrid("option", "renderCheckboxes");

				//Set
				$(".selector").igGrid("option", "renderCheckboxes", true);
			 

リモートデータソースに要求を送信するために使用される HTTP 動詞を指定します。

 
				//Initialize
				$(".selector").igGrid({
					requestType : "POST"
				});

				//Get
				var requestType = $(".selector").igGrid("option", "requestType");
			 

応答のコンテンツ タイプ。http://api.jquery.com/jQuery.ajax/で contentType セクションを参照してください。

 
				//Initialize
				$(".selector").igGrid({
					responseContentType : "application/json; charset=utf-8"
				});

				//Get
				var responseContentType = $(".selector").igGrid("option", "responseContentType");
			 

$.ig.DataSource responseDataKeyを参照してください。これは、応答がラップした場合にデータ レコードが保持される応答内のプロパティです。

 
				//Initialize
				$(".selector").igGrid({
					responseDataKey : "records"
				});

				//Get
				var responseKey = $(".selector").igGrid("option", "responseDataKey");
			 

このオプションは非推奨です。 $.ig.DataSource responseTotalRecCountKeyを参照してください。サーバー上のレコード総数を指定する応答内のプロパティです。

 
				//Initialize
				$(".selector").igGrid({
					responseTotalRecCountKey : "totalRecords"
				});

				//Get
				var recordsCount = $(".selector").igGrid("option", "responseTotalRecCountKey");
			 

REST コンプライアント更新ルーチンに関連する設定。

 
				//Initialize
				$(".selector").igGrid({
					restSettings : {
						create: {
							url: "/api/customers/",
							batch: true
						},
						update: {
							url: "/api/customers/",
							batch: true
						},
						remove: {
							url: "/api/customers/",
							batch: true
						}
					}
				});

				//Get
				var restSettings = $(".selector").igGrid("option", "restSettings");
			 

• contentSerializer

  タイプ:

  function

  デフォルト:

  null

  サーバーに送信するコンテンツをシリアル化するカスタム関数を指定します。単一のオブジェクトまたはオブジェクトの配列を受け入れ文字列を返します。指定されていない場合、JSON.stringify() が使用されます。

  コード サンプル

   
  					//Initialize
  					$(".selector").igGrid({
  						restSettings : {
  							contentSerializer : "customSerializeFunction" ; // the name of the function, it can be also a reference to a function
  						}
  					});
  
  					//Get
  					var restSettings = $(".selector").igGrid("option", "restSettings");
  					var contentSerializerSetting = restSettings.contentSerializer;
  				 

• contentType

  タイプ:

  string

  デフォルト:

  "application/json; charset=utf-8"

  要求のコンテンツ タイプを指定します。http://api.jquery.com/jQuery.ajax/ => contentType。

  コード サンプル

   
  						//Initialize
  						$(".selector").igGrid({
  							restSettings : {
  								contentType : "application/json; charset=utf-8";
  							}
  						});
  
  						//Get
  						var restSettings = $(".selector").igGrid("option", "restSettings");
  						var contentTypeSetting = restSettings.contentType;
  				 

• create

  タイプ:

  object

  デフォルト:

  {}

  作成要求の設定。

  コード サンプル

   
  					//Initialize
  					$(".selector").igGrid({
  						restSettings : {
  				create: {
  								url: "/api/customers/",
  								batch: true
  							}
  						}
  					});
  
  					//Get
  					var restSettings = $(".selector").igGrid("option", "restSettings");
  					var createRestSettings = restSettings.create;
  				 

  • batch

    タイプ:

    bool

    デフォルト:

    false

    作成要求がバッチで送信されるどうかを指定します。

    コード サンプル

     
    						//Initialize
    						$(".selector").igGrid({
    							restSettings : {
    								create: {
    									url: "/api/customers/",
    									batch: true
    								}
    							}
    						});
    
    						//Get
    						var restSettings = $(".selector").igGrid("option", "restSettings");
    						var batch = restSettings.create.batch;
    					 

  • template

    タイプ:

    string

    デフォルト:

    null

    リモート URL テンプレートを指定します。リソース ID の代わりに ${id} を使用します。

    コード サンプル

     
    						//Initialize
    						$(".selector").igGrid({
    							restSettings : {
    								update: {
    									template: "/api/customers/${id}"
    								}
    							}
    						});
    
    						//Get
    						var restSettings = $(".selector").igGrid("option", "restSettings");
    						var template = restSettings.update.template;
    					 

  • url

    タイプ:

    string

    デフォルト:

    null

    作成要求を送信するリモート URL を指定します。バッチおよび非バッチの両方で使用されますが、テンプレートも設定されている場合、この URL はバッチ要求にのみ使用されます。

    コード サンプル

     
    						//Initialize
    						$(".selector").igGrid({
    							restSettings : {
    								update: {
    									url: "/api/customers/",
    									batch: true
    								}
    							}
    						});
    
    						//Get
    						var restSettings = $(".selector").igGrid("option", "restSettings");
    						var url = restSettings.update.url;
    					 

• encodeRemoveInRequestUri

  タイプ:

  bool

  デフォルト:

  true

  削除されたリソースの id が要求 URI を介して送信されるかどうかを指定します。

  コード サンプル

   
          //Initialize
          $(".selector").igGrid({
              restSettings : {
                  encodeRemoveInRequestUri: true
              }
          });
  
          //Get
          var restSettings = $(".selector").igGrid("option", "restSettings");
          var encodeRemoveInRequestUri = restSettings.encodeRemoveInRequestUri;
            

• remove

  タイプ:

  object

  デフォルト:

  {}

  削除要求の設定。

  コード サンプル

   
          //Initialize
          $(".selector").igGrid({
              restSettings : {
                  remove: {
                      url: "/api/customers/",
                      batch: true
                  }
              }
          });
  
          //Get
          var restSettings = $(".selector").igGrid("option", "restSettings");
          var removeRestSettings = restSettings.remove;
            

  • batch

    タイプ:

    bool

    デフォルト:

    false

    更新要求がバッチで送信されるかどうかを指定します。

    コード サンプル

     
            //Initialize
            $(".selector").igGrid({
                restSettings : {
                    remove: {
                        url: "/api/customers/",
                        batch: true
                    }
                }
            });
    
            //Get
            var restSettings = $(".selector").igGrid("option", "restSettings");
            var batch = restSettings.remove.batch;
                  

  • template

    タイプ:

    string

    デフォルト:

    null

    リモート URL テンプレートを指定します。リソース ID の代わりに ${id} を使用します。

    コード サンプル

     
            //Initialize
            $(".selector").igGrid({
                restSettings : {
                    remove: {
                        template: "/api/customers/${id}"
                    }
                }
            });
    
            //Get
            var restSettings = $(".selector").igGrid("option", "restSettings");
            var template = restSettings.remove.template;
                  

  • url

    タイプ:

    string

    デフォルト:

    null

    削除要求を送信するリモート URL を指定します。バッチおよび非バッチのために使用されますが、テンプレートも設定される場合、この URL はバッチ要求のみに使用されます。

    コード サンプル

     
            //Initialize
            $(".selector").igGrid({
                restSettings : {
                    remove: {
                        url: "/api/customers/",
                        batch: true
                    }
                }
            });
    
            //Get
            var restSettings = $(".selector").igGrid("option", "restSettings");
            var url = restSettings.remove.url;
                  

• update

  タイプ:

  object

  デフォルト:

  {}

  更新要求の設定。

  コード サンプル

   
          //Initialize
          $(".selector").igGrid({
              restSettings : {
                  update: {
                      url: "/api/customers/",
                      batch: true
                  }
              }
          });
  
          //Get
          var restSettings = $(".selector").igGrid("option", "restSettings");
          var updateRestSettings = restSettings.update;
            

  • batch

    タイプ:

    bool

    デフォルト:

    false

    更新要求がバッチで送信されるかどうかを指定します。

    コード サンプル

     
            //Initialize
            $(".selector").igGrid({
                restSettings : {
                    update: {
                        url: "/api/customers/",
                        batch: true
                    }
                }
            });
    
            //Get
            var restSettings = $(".selector").igGrid("option", "restSettings");
            var batch = restSettings.update.batch;
                  

  • template

    タイプ:

    string

    デフォルト:

    null

    リモート URL テンプレートを指定します。リソース ID の代わりに ${id} を使用します。

    コード サンプル

     
            //Initialize
            $(".selector").igGrid({
                restSettings : {
                    update: {
                        template: "/api/customers/${id}"
                    }
                }
            });
    
            //Get
            var restSettings = $(".selector").igGrid("option", "restSettings");
            var template = restSettings.update.template;
                  

  • url

    タイプ:

    string

    デフォルト:

    null

    削除要求を送信するリモート URL を指定します。バッチおよび非バッチの両方で使用されますが、テンプレートも設定されている場合、この URL はバッチ要求にのみ使用されます。

    コード サンプル

     
            //Initialize
            $(".selector").igGrid({
                restSettings : {
                    update: {
                        url: "/api/customers/",
                        batch: true
                    }
                }
            });
    
            //Get
            var restSettings = $(".selector").igGrid("option", "restSettings");
            var url = restSettings.update.url;
                  

行のみの仮想化を有効にします。 igGrid の行仮想化の設定を参照してください。

 
				// Initialize
				$(".selector").igGrid({
					rowVirtualization : true
				});

				// Get
				var virtualization = $(".selector").igGrid("option", "rowVirtualization");
			 

コンテンツのスクロールに関連する設定。

 
				//Initialize
				$(".selector").igGrid({
					scrollSettings: {
						scrollTop: 100,
						smoothing: true,
						smoothingStep: 2.5
					}
				});

				//Get
				var scrollSettings = $(".selector").igGrid("option", "scrollSettings");

				//Set
				var newSettings = {
					scrollTop: 100,
					smoothing: true,
					smoothingStep: 2.5
				}
				$(".selector").igGrid("option", "scrollSettings", newSettings);
			 

• inertiaDuration

  タイプ:

  number

  デフォルト:

  1

  タッチ デバイスで慣性が持続する時間の修飾子を取得または設定します。

  コード サンプル

   
  					//Initialize
  					$(".selector").igGrid({
  						scrollSettings: {
  							inertiaDuration: 0.75
  						}
  					});
  
  					//Get
  					var value = $(".selector").igGrid("option", "scrollSettings").inertiaDuration;
  
  					//Set
  					$(".selector").igGrid("option", "scrollSettings", { inertiaDuration: 0.75 });
  				 

• inertiaStep

  タイプ:

  number

  デフォルト:

  1

  タッチ デバイスで慣性がスクロールする量の修飾子を取得または設定します。注: 値を 0 に設定するとタッチ動作を無効にします。値を -1 に設定すると反転します。

  コード サンプル

   
  					//Initialize
  					$(".selector").igGrid({
  						scrollSettings: {
  							inertiaStep: 2
  						}
  					});
  
  					//Get
  					var value = $(".selector").igGrid("option", "scrollSettings").inertiaStep;
  
  					//Set
  					$(".selector").igGrid("option", "scrollSettings", { inertiaStep: 2 });
  				 

• scrollLeft

  タイプ:

  number

  デフォルト:

  0

  現在の水平位置を取得または設定します。

  コード サンプル

   
  					//Initialize
  					$(".selector").igGrid({
  						scrollSettings: {
  							scrollLeft: 200
  						}
  					});
  
  					//Get
  					var value = $(".selector").igGrid("option", "scrollSettings").scrollLeft;
  
  					//Set
  					$(".selector").igGrid("option", "scrollSettings", { scrollLeft: 300 });
  				 

• scrollTop

  タイプ:

  number

  デフォルト:

  0

  現在の垂直位置を取得または設定します。

  コード サンプル

   
  					//Initialize
  					$(".selector").igGrid({
  						scrollSettings: {
  							scrollTop: 500
  						}
  					});
  
  					//Get
  					var value = $(".selector").igGrid("option", "scrollSettings").scrollTop;
  
  					//Set
  					$(".selector").igGrid("option", "scrollSettings", { scrollTop: 600 });
  				 

• smoothing

  タイプ:

  bool

  デフォルト:

  false

  マウス ホイールを使用する場合、小さい慣性を持つスムーズ スクロールを使用するかどうかを取得または設定します。

  コード サンプル

   
  					//Initialize
  					$(".selector").igGrid({
  						scrollSettings: {
  							smoothing: true
  						}
  					});
  
  					//Get
  					var value = $(".selector").igGrid("option", "scrollSettings").smoothing;
  
  					//Set
  					$(".selector").igGrid("option", "scrollSettings", { smoothing: true });
  				 

• smoothingDuration

  タイプ:

  number

  デフォルト:

  1

  マウス ホイールを一度使用した場合にスクロールのアニメーションが持続する時間の修飾子を取得または設定します。これはスムーズ スクロール動作でのみ使用されます。

  コード サンプル

   
  					//Initialize
  					$(".selector").igGrid({
  						scrollSettings: {
  							smoothingDuration: 1.25
  						}
  					});
  
  					//Get
  					var value = $(".selector").igGrid("option", "scrollSettings").smoothingDuration;
  
  					//Set
  					$(".selector").igGrid("option", "scrollSettings", { smoothingDuration: 1.25 });
  				 

• smoothingStep

  タイプ:

  number

  デフォルト:

  1

  マウス ホイールを一度使用した場合にスクロールするピクセルを決定する修飾子を取得または設定します。スムーズ スクロール動作のみで使用されます。

  コード サンプル

   
  					//Initialize
  					$(".selector").igGrid({
  						scrollSettings: {
  							smoothingStep: 2.5
  						}
  					});
  
  					//Get
  					var value = $(".selector").igGrid("option", "scrollSettings").smoothingStep;
  
  					//Set
  					$(".selector").igGrid("option", "scrollSettings", { smoothingStep: 2.5 });
  				 

• wheelStep

  タイプ:

  number

  デフォルト:

  50

  マウス ホイールを使用する場合、デフォルトのスクロール動作のステップを取得または設定します。

  コード サンプル

   
  					//Initialize
  					$(".selector").igGrid({
  						scrollSettings: {
  							wheelStep: 100
  						}
  					});
  
  					//Get
  					var value = $(".selector").igGrid("option", "scrollSettings").wheelStep;
  
  					//Set
  					$(".selector").igGrid("option", "scrollSettings", { wheelStep: 50 });
  				 

True の場合、トランザクション ログがデータ ソースによってリモート データの要求に常に送られます。また、ログに値がある場合、GET ではなく POST が実行されることを意味します。

 
				//Initialize
				$(".selector").igGrid({
					serializeTransactionLog : false
				});

				//Get
				var log = $(".selector").igGrid("option", "serializeTransactionLog");
			 

グリッドのフッターの可視性を制御します。

 
				//Initialize
				$(".selector").igGrid({
					showFooter : false
				});

				//Get
				var showFooter = $(".selector").igGrid("option", "showFooter");

				//Set
				$(".selector").igGrid("option", "showFooter", false);
			 

グリッドのヘッダーの可視性を制御します。

 
				//Initialize
				$(".selector").igGrid({
					showHeader : false
				});

				//Get
				var showHeader = $(".selector").igGrid("option", "showHeader");

				//Set
				$(".selector").igGrid("option", "showHeader", false);
			 

すべてのフォーカス可能な要素に設定される初期 tabIndex 属性。

 
				//Initialize
				$(".selector").igGrid({
					tabIndex : 3
				});

				//Get
				var tabIndex = $(".selector").igGrid("option", "tabIndex");
			 

グリッド列 templateを描画するために使用されるテンプレート エンジン。igTemplating と jsRender 以外のテンプレート エンジンの使用方法は、ここを参照してください。

 
				// Initialize
				$(".selector").igGrid({
					templatingEngine : "jsRender"
				});
				// Get
				var templatingEngine = $(".selector").igGrid("option", "templatingEngine");
			 

更新要求先の URL。

 
				//Initialize
				$(".selector").igGrid({
					updateUrl : "http://mydomain.com/UpdateCustomer"
				});

				//Get
				var updateUrl = $(".selector").igGrid("option", "updateUrl");
			 

列および行の仮想化を同時に有効または無効にします。仮想化が描画のパフォーマンスを向上します。有効な場合、描画される行 (DOM 要素) の数は定数で、グリッドの表示可能なビューポートに関連します。エンド ユーザーがスクロールすると、新しいデータを描画するために DOM 要素を動的に更新します。igGrid を使用する際のパフォーマンス ガイドを参照してください。

 
				// Initialize
				$(".selector").igGrid({
					virtualization : true
				});

				// Get
				var virtualization = $(".selector").igGrid("option", "virtualization");
			 

行仮想化モードを決定します。

 
				// Initialize
				$(".selector").igGrid({
					virtualizationMode : "continuous"
				});
				// Get
				var virtualizationMode = $(".selector").igGrid("option", "virtualizationMode");
				// Set
				$(".selector").igGrid("option", "virtualizationMode", "continuous");
			 

仮想化が有効で、仮想グリッド領域上でマウス ホイールのスクロールを実行するときにグリッドの移動するピクセル数。 Null の場合、avgRowHeight と等しいです。

 
				// Initialize
				$(".selector").igGrid({
					virtualizationMouseWheelStep : 50
				});

				// Get
				var virtualizationStep = $(".selector").igGrid("option", "virtualizationMouseWheelStep");

				// Set
				$(".selector").igGrid("option", "virtualizationMouseWheelStep", 50);
			 

グリッドの幅をピクセル単位またはパーセントで定義します。 詳細については、igGrid の幅設定を参照してください。

 
				// Initialize
				$(".selector").igGrid({
					width : "800px"
				});
				// Get
				var width = $(".selector").igGrid("option", "width");
				// Set
				$(".selector").igGrid("option", "width", "850px");