Ignite UI™ API ヘルプ

ui.igGridFiltering

概要
オプション
イベント
メソッド
テーマ

igGrid コントロールおよび igHierarchicalGrid コントロールはどちらも、ユーザーが、指定された条件を満たすデータのみにグリッド行を制限できるようにする行フィルタリングを備えています。フィルタリングオプションは、数値、文字列、および日付のフィルターを含んでいます。この API のクラス、オプション、イベント、メソッド、およびテーマに関するさらに詳しい情報は上の関連するタブの下で入手可能です。

次のコードスニペットは、igGrid コントロールを初期化する方法を示します。

この 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 products = [
			        { "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381" },
			        { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327" },
			        { "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349" },
			        { "ProductID": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908" },
			        { "ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036" },
			        { "ProductID": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965" },
			        { "ProductID": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738" },
			        { "ProductID": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457" },
			        { "ProductID": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903" }
		        ];

		        $(function () {
			        $("#gridFiltering").igGrid({
				        columns: [
					        { headerText: "Product ID", key: "ProductID", dataType: "number" },
					        { headerText: "Product Name", key: "Name", dataType: "string" },
					        { headerText: "Product Number", key: "ProductNumber", dataType: "string" }
				        ],
				        features:[
					        {
						        name: "Filtering"
					        }
				        ],
				        width: "500px",
				        dataSource: products
			        });
		        });
	        </script>
        </head>
        <body>
	        <table id="gridFiltering"></table>
        </body>
        </html>

advancedModeEditorsVisible

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

詳細モードでエディターを描画するかどうかを定義します。false の場合、詳細モードでエディターは描画されません。

コードサンプル

 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						advancedModeEditorsVisible : true
					}
				]
			});

			// Get
			var editorsVisible = $(".selector").igGridFiltering("option", "advancedModeEditorsVisible");

			// Set
			$(".selector").igGridFiltering("option", "advancedModeEditorsVisible", true);

advancedModeHeaderButtonLocation

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

advancedModeEditorsVisible が False の場合 (ボタンがヘッダーに描画される場合) の詳細フィルタリングボタンの場所。

メンバー

left
タイプ:string
right
タイプ:string

コードサンプル

 
				// Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "Filtering",
							advancedModeHeaderButtonLocation : "right"
						}
					]
				});
				// Get
				var location = $(".selector").igGridFiltering("option", "advancedModeHeaderButtonLocation");
				// Set
				$(".selector").igGridFiltering("option", "advancedModeHeaderButtonLocation", "right");

caseSensitive

タイプ:

bool

デフォルト:

false
フィルタリングで大文字小文字の区別を有効化または無効化します。ローカルのフィルタリングでのみ使用できます。True の場合、フィルタリングで大文字小文字の区別を有効にします。False の場合、フィルタリングで大文字小文字の区別を無効にします。
コードサンプル
```
 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						caseSensitive : true
					}
				]
			});

			// Get
			var caseSensitive = $(".selector").igGridFiltering("option", "caseSensitive");

			// Set
			$(".selector").igGridFiltering("option", "caseSensitive", true);
			 
```

columnSettings

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

カスタムフィルタリングオプションを列ごとに指定する列設定のリスト。

コードサンプル

 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						columnSettings : [
							{
								columnKey: "ProductDescription", 
								condition: "endsWith"
							}
						]
					}
				]
			});

			// Get
			var colSettings = $(".selector").igGridFiltering("option", "columnSettings");

			// Set
			$(".selector").igGridFiltering("option", "columnSettings", 
				[{columnKey: "ProductDescription", 
					condition: "endsWith"
				}]
			);

allowFiltering

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

列のフィルタリングを有効/無効にします。

コードサンプル

 
					//Initialize
					$(".selector").igGrid({
						features: [
							{
								name : "Filtering",
								columnSettings : [
									{
										columnKey: "ProductDescription", 
										allowFiltering: false
									}
								]
							}
						]
					});

					//Get
					var colSettings = $(".selector").igGridFiltering("option", "columnSettings");
					var filterAllowed = colSettings[0].allowFiltering;

					// Set
					$(".selector").igGridFiltering("option", "columnSettings", colSettings);

columnIndex

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

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

コードサンプル

 
					// Initialize
					$(".selector").igGrid({
						features: [
							{
								name : "Filtering",
								columnSettings : [
									{
										columnIndex: 0,
										allowFiltering: false
									}
								]
							}
						]
					});

					// Get
					var colSettings = $(".selector").igGridFiltering("option", "columnSettings");
					var colIndex = colSettings[0].columnIndex;

columnKey

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

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

コードサンプル

 
					//Initialize
					$(".selector").igGrid({
						features: [
							{
								name : "Filtering",
								columnSettings : [
									{
										columnKey: "ProductDescription", 
										allowFiltering: false
									}
								]
							}
						]
					});

					//Get
					var colSettings = $(".selector").igGridFiltering("option", "columnSettings");
					var colKey = colSettings[0].columnKey;

condition

タイプ:

enumeration

デフォルト:

null
列のデフォルトフィルタリング条件。
メンバー
- empty
- タイプ:string
- notEmpty
- タイプ:string
- null
- タイプ:string
- notNull
- タイプ:string
- equals
- タイプ:string
- doesNotEqual
- タイプ:string
- startsWith
- タイプ:string
- contains
- タイプ:string
- doesNotContain
- タイプ:string
- endsWith
- タイプ:string
- greaterThan
- タイプ:string
- lessThan
- タイプ:string
- greaterThanOrEqualTo
- タイプ:string
- lessThanOrEqualTo
- タイプ:string
- true
- タイプ:bool
- false
- タイプ:bool
- on
- タイプ:string
- notOn
- タイプ:string
- before
- タイプ:string
- after
- タイプ:string
- today
- タイプ:string
- yesterday
- タイプ:string
- thisMonth
- タイプ:string
- lastMonth
- タイプ:string
- nextMonth
- タイプ:string
- thisYear
- タイプ:string
- nextYear
- タイプ:string
- lastYear
- タイプ:string
コードサンプル
```
 
					// Initialize
					$(".selector").igGrid({
						features: [
							{
								name : "Filtering",
								columnSettings : [
									{
										columnKey: "ProductDescription", 
										condition: "startsWith"
									}
								]
							}
						]
					});
					// Get
					var colSettings = $(".selector").igGridFiltering("option", "columnSettings");
					var condition = colSettings[0].condition;
					// Set
					$(".selector").igGridFiltering("option", "columnSettings", colSettings);
					 
```

conditionList

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

この列に表示する conditions を決定する文字列の配列。

コードサンプル

 
					//Initialize
					$(".selector").igGrid({
						features: [
							{
								name : "Filtering",
								columnSettings : [{
									columnKey: "ProductNumber",
									conditionList: ["startsWith", "contains"]
								}]
							}
						]
					});

					//Get
					var conditionList = $(".selector").igGridFiltering("option", "columnSettings")[2].conditionList;

customConditions

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

カスタムフィルター条件をこの列のオブジェクトとして指定するためのオブジェクト。
labelText 列の条件ドロップダウンで表示するようなラベル。
expressionText requireExpr が false の場合にエディターに表示するテキスト。
requireExpr この条件にユーザーがフィルター式を入力する必要がある場合
filterImgIcon simple モードでドロップダウン項目に適用されるクラス。
filterFunc カスタム比較フィルター関数。定義: function (value, expression, dataType, ignoreCase, preciseDateFormat)。

コードサンプル

 
					// Initialize
					$(".selector").igGrid({
						features: [
							{
								name : "Filtering",
								columnSettings : [{
									columnKey: "ProductNumber",
									customConditions: {
										BE: {
											labelText: "BE",
											expressionText: "BE-####",
											requireExpr: false,
											filterFunc: filterProductNumber
										},
										CA: {
											labelText: "CA",
											expressionText: "CA-####",
											requireExpr: false,
											filterFunc: filterProductNumber1
										}
									}
								}]
							}
						]
					});

					function filterProductNumber(value, expression, dataType, ignoreCase, preciseDateFormat) {
						return value.startsWith("BE");
					}

					function filterProductNumber1(value, expression, dataType, ignoreCase, preciseDateFormat) {
						return value.startsWith("CA");
					}
					// Get
					var customConditions = $(".selector").igGridFiltering("option", "columnSettings")[2].customConditions;

defaultExpressions

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

初期フィルタリング式 - 設定すると初期化で定義済み condition と一緒に適用されます。

コードサンプル

 
					// Initialize
					$(".selector").igGrid({
						features: [
							{
								name : "Filtering",
								columnSettings : [
									{
										columnKey: "Name", 
										defaultExpressions: [
											{ expr: "B", cond: "startsWith" }
										]
									}
								]
							}
						]
					});

					// Get
					var defaultExpressions = $(".selector").igGridFiltering("option", "columnSettings")[0].defaultExpressions;

dialogWidget

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

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

コードサンプル

 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						dialogWidget: "advancedModalDialog"
					}
				]
			});

			// Get
			var widgetName = $(".selector").igGridFiltering("option", "dialogWidget");

featureChooserText
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
フィルタが表示され、フィルター mode が簡易な場合の機能セレクターテキスト。locale.featureChooserText オプションを使用します。

コードサンプル

 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						featureChooserText : "Hide Filter"
					}
				]
			});

			// Get
			var text = $(".selector").igGridFiltering("option", "featureChooserText");

			// Set
			$(".selector").igGridFiltering("option", "featureChooserText", "Hide Filter");

featureChooserTextAdvancedFilter
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
フィルター mode が詳細である場合、フィルターの内容が表示されます。locale.featureChooserTextAdvancedFilter オプションを使用します。

コードサンプル

 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						featureChooserTextAdvancedFilter : "Advanced Filter"
					}
				]
			});

			// Get
			var text = $(".selector").igGridFiltering("option", "featureChooserTextAdvancedFilter");

			// Set
			$(".selector").igGridFiltering("option", "featureChooserTextAdvancedFilter", "Advanced Filter");

featureChooserTextHide
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
フィルターが非表示で、mode がシンプルである場合、フィルターの内容は表示されません。locale.featureChooserTextHide オプションを使用します。

コードサンプル

 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						featureChooserTextHide : "Show Filter"
					}
				]
			});

			// Get
			var text = $(".selector").igGridFiltering("option", "featureChooserTextHide");

			// Set
			$(".selector").igGridFiltering("option", "featureChooserTextHide", "Show Filter");

filterButtonLocation

タイプ:

enumeration

デフォルト:

left
フィルタードロップダウンのフィルタリングボタンは、フィルターエディターの左側または右側に描画できます。
メンバー
- left
- タイプ:string
- ボタンが左側に描画されます。
- right
- タイプ:string
- ボタンが右側に描画されます。
コードサンプル
```
 
				// Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "Filtering",
							filterButtonLocation : "right"
						}
					]
				});
				// Get
				var location = $(".selector").igGridFiltering("option", "filterButtonLocation");
				// Set
				$(".selector").igGridFiltering("option", "filterButtonLocation", "right");
				 
```

filterDelay

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

フィルタリング要求を送信する前に、キー入力までのウィジェットの待機時間 (ミリ秒)。

コードサンプル

 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						filterDelay : 1000
					}
				]
			});

			// Get
			var delay = $(".selector").igGridFiltering("option", "filterDelay");

			// Set
			$(".selector").igGridFiltering("option", "filterDelay", 1000);

filterDialogAddButtonWidth

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

詳細フィルターダイアログ内の [追加] ボタンの幅。

メンバー

string
タイプ:string
ピクセルのダイアログ追加ボタン幅 (100px)
number
タイプ:number
数値のダイアログ追加ボタン幅 (100)

コードサンプル

 
				// Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "Filtering",
							filterDialogAddButtonWidth : 75
						}
					]
				});
				// Get
				var width = $(".selector").igGridFiltering("option", "filterDialogAddButtonWidth");
				// Set
				$(".selector").igGridFiltering("option", "filterDialogAddButtonWidth", 75);

filterDialogAddConditionDropDownTemplate

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

フィルターダイアログの追加条件領域のドロップダウンのオプションのカスタムテンプレート。
デフォルトのテンプレートは "<option value='${value}'>${text}</option>"。

コードサンプル

 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						filterDialogAddConditionDropDownTemplate: "<option value='${text}'>${text}</option>"
					}
				]
			});

			// Get
			var dropDownTemplate = $(".selector").igGridFiltering("option", "filterDialogAddConditionDropDownTemplate");

			// Set
			$(".selector").igGridFiltering("option",
										   "filterDialogAddConditionDropDownTemplate",
										   "<option value='${text}'>${text}</option>");

filterDialogAddConditionTemplate

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

フィルターダイアログの追加条件領域のカスタムテンプレート。
デフォルトのテンプレートは "<div><span>${label1}</span><div><select></select></div><span>${label2}</span></div>"。

コードサンプル

 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						filterDialogAddConditionTemplate: "<div><div><select></select></div><span>${label1}</span><span>${label2}</span></div>"
					}
				]
			});

			// Get
			var addConditionTemplate = $(".selector").igGridFiltering("option", "filterDialogAddConditionTemplate");

			// Set
			$(".selector").igGridFiltering("option",
										   "filterDialogAddConditionTemplate",
										   "<div><div><select></select></div><span>${label1}</span><span>${label2}</span></div>");

filterDialogColumnDropDownDefaultWidth

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

詳細フィルターダイアログ内の列選択ドロップダウンの幅。

メンバー

string
タイプ:string
ピクセルの列選択ドロップダウンの幅 (80px)。
number
タイプ:number
数値の列選択ドロップダウンの幅 (80)

コードサンプル

 
				// Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "Filtering",
							filterDialogColumnDropDownDefaultWidth : 100
					    }
					]
				});
				// Get
				var width = $(".selector").igGridFiltering("option", "filterDialogColumnDropDownDefaultWidth");
				// Set
				$(".selector").igGridFiltering("option", "filterDialogColumnDropDownDefaultWidth", 100);

filterDialogContainment

タイプ:

string

デフォルト:

"owner"
コンテインメント動作を制御します。
owner - フィルターダイアログはグリッド領域でのみドラッグ可能です。
window - フィルターダイアログはウィンドウ領域全体でドラッグ可能です。
コードサンプル
```
 
				// Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "Filtering",
							filterDialogContainment : "window"
					    }
					]
				});

				// Get
				var filterDialogContainment = $(".selector").igGridFiltering("option", "filterDialogContainment");
				 
```

filterDialogExprInputDefaultWidth

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

詳細フィルターダイアログ内のフィルタリングの式の入力ボックスの幅。

メンバー

string
タイプ:string
ピクセルのフィルター式入力ボックスの幅 (80px)。
number
タイプ:number
数値のフィルター式入力ボックスの幅 (80)

コードサンプル

 
				// Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "Filtering",
							filterDialogExprInputDefaultWidth : 100
					    }
					]
				});
				// Get
				var width = $(".selector").igGridFiltering("option", "filterDialogExprInputDefaultWidth");
				// Set
				$(".selector").igGridFiltering("option", "filterDialogExprInputDefaultWidth", 100);

filterDialogFilterConditionTemplate

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

フィルターダイアログにある条件リストのオプションのカスタムテンプレート。
デフォルトのテンプレートは "<option value='${condition}'>${text}</option>"。

コードサンプル

 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						filterDialogFilterConditionTemplate: "<option value='${conditionName}'>${conditionLabel}</option>"
					}
				]
			});

			// Get
			var filterConditionTemplate = $(".selector").igGridFiltering("option", "filterDialogFilterConditionTemplate");

			// Set
			$(".selector").igGridFiltering("option",
										   "filterDialogFilterConditionTemplate",
										   "<option value='${conditionName}'>${conditionLabel}</option>");

filterDialogFilterDropDownDefaultWidth

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

詳細フィルターダイアログ内のフィルタリング条件ドロップダウンの幅。

メンバー

string
タイプ:string
ピクセルのフィルター条件ドロップダウンの幅 (80px)。
number
タイプ:number
数値のフィルター条件ドロップダウンの幅 (80)

コードサンプル

 
				// Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "Filtering",
							filterDialogFilterDropDownDefaultWidth : 100
						}
					]
				});
				// Get
				var width = $(".selector").igGridFiltering("option", "filterDialogFilterDropDownDefaultWidth");
				// Set
				$(".selector").igGridFiltering("option", "filterDialogFilterDropDownDefaultWidth", 100);

filterDialogFilterTemplate

タイプ:

string

デフォルト:

null
フィルターダイアログのカスタムテンプレート。
フィルター条件/列/フィルター式を選択するために使用される各 DOM 要素は "data-*" 属性があります。
例: 列を選択するための DOM 要素は "data-af-col" 属性があります。フィルター条件の選択で使用される要素は "data-af-cond" があります。フィルター式の要素は "data-af-expr" があります。
注: テンプレートは <tr /> のみでサポートされます。
デフォルトのテンプレートは "<tr data-af-row><td><input data-af-col/></td><td><select data-af-cond></select></td><td><input data-af-expr /> </td><td><span data-af-rmv></span></td></tr>"。
コードサンプル
```
 
				// Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "Filtering",
							filterDialogFilterTemplate: "<tr><td>Choose column<input/></td><td>Condition<select></select></td><td>Search value<input /> </td><td><span></span></td></tr>"
						}
					]
				});

				// Get
				var dialogFilterTemplate = $(".selector").igGridFiltering("option", "filterDialogFilterTemplate");

				// Set
				$(".selector").igGridFiltering("option",
											   "filterDialogFilterTemplate",
											   "<tr><td>Choose column<input/></td><td>Condition<select></select></td><td>Search value<input /> </td><td><span></span></td></tr>");
				 
```
filterDialogHeight

タイプ:

enumeration

デフォルト:

""
デフォルトフィルターダイアログの高さ (詳細フィルターmode)で使用)。
メンバー
- string
- タイプ:string
- ピクセルでのダイアログウィンドウの高さ (350px)。
- number
- タイプ:number
- 数値のダイアログウィンドウの高さ (350)。
コードサンプル
```
 
				// Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "Filtering",
							filterDialogHeight : 30
						}
					]
				});
				// Get
				var height = $(".selector").igGridFiltering("option", "filterDialogHeight");
				// Set
				$(".selector").igGridFiltering("option", "filterDialogHeight", 30);
				 
```

filterDialogMaxFilterCount

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

詳細フィルタリングダイアログ内のフィルター行の最大数。この数を超えると、エラーメッセージが描画されます。

コードサンプル

 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						filterDialogMaxFilterCount : 3
					}
				]
			});

			// Get
			var count = $(".selector").igGridFiltering("option", "filterDialogMaxFilterCount");

			// Set
			$(".selector").igGridFiltering("option", "filterDialogMaxFilterCount", 3);

filterDialogOkCancelButtonWidth

タイプ:

enumeration

デフォルト:

120
詳細フィルタリングダイアログ内の [OK] および [キャンセル] ボタンの幅。
メンバー
- string
- タイプ:string
- ピクセルの詳細フィルターダイアログ OK およびキャンセルボタンの幅 (120 px)。
- number
- タイプ:number
- 数値の詳細フィルターダイアログ OK およびキャンセルボタンの幅 (120)。
コードサンプル
```
 
				// Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "Filtering",
							filterDialogOkCancelButtonWidth : 120
						}
					]
				});
				// Get
				var width = $(".selector").igGridFiltering("option", "filterDialogOkCancelButtonWidth");
				// Set
				$(".selector").igGridFiltering("option", "filterDialogOkCancelButtonWidth", 120);
				 
```
filterDialogWidth

タイプ:

enumeration

デフォルト:

430
デフォルトフィルターダイアログの幅 (詳細フィルター mode で使用)。
メンバー
- string
- タイプ:string
- ピクセルでのダイアログウィンドウ幅 (370 px)。
- number
- タイプ:number
- 数値のダイアログウィンドウの幅 (370)。
コードサンプル
```
 
				// Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "Filtering",
							filterDialogWidth : 500
						}
					]
				});
				// Get
				var width = $(".selector").igGridFiltering("option", "filterDialogWidth");
				// Set
				$(".selector").igGridFiltering("option", "filterDialogWidth", 500);
				 
```

filterDropDownAnimationDuration

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

filterDropDownAnimations の期間 (ミリ秒単位)。

コードサンプル

 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						filterDropDownAnimationDuration : 300
					}
				]
			});

			// Get
			var duration = $(".selector").igGridFiltering("option", "filterDropDownAnimationDuration");

			// Set
			$(".selector").igGridFiltering("option", "filterDropDownAnimationDuration", 300);

filterDropDownAnimations

タイプ:

enumeration

デフォルト:

linear
列フィルタードロップダウンのアニメーションのタイプ。
メンバー
- linear
- タイプ:string
- 列フィルタードロップダウンがリニアアニメーションで表示されます。
- none
- タイプ:string
- フィルタードロップダウンの表示にアニメーションはありません。
コードサンプル
```
 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						filterDropDownAnimations : "none"
					}
				]
			});
			// Get
			var animation = $(".selector").igGridFiltering("option", "filterDropDownAnimations");
			// Set
			$(".selector").igGridFiltering("option", "filterDropDownAnimations", "none");
			 
```

filterDropDownHeight

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

列フィルタードロップダウンの高さ。
ピクセルの列フィルタードロップダウンの高さ (0px)。
数値のフィルタードロップダウンの高さ (0)。

コードサンプル

 
				// Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "Filtering",
							filterDropDownHeight : 30
						}
					]
				});

				// Get
				var height = $(".selector").igGridFiltering("option", "filterDropDownHeight");

				// Set
				$(".selector").igGridFiltering("option", "filterDropDownHeight", 30);

filterDropDownItemIcons

タイプ:

enumeration

デフォルト:

true
フィルターアイコンの表示状態を有効/無効にします。
メンバー
- true
- タイプ:bool
- フィルタードロップダウン内のすべての定義済みのフィルターで、テキストの前にアイコンが描画されます。
- false
- タイプ:bool
- アイコンは描画されません。
コードサンプル
```
 
				// Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "Filtering",
							filterDropDownItemIcons : false
						}
					]
				});
				// Get
				var showIcons = $(".selector").igGridFiltering("option", "filterDropDownItemIcons");
				// Set
				$(".selector").igGridFiltering("option", "filterDropDownItemIcons", false);
				 
```

filterDropDownWidth

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

列フィルタードロップダウンの幅。

メンバー

string
タイプ:string
ピクセルの幅 (0 px)
number
タイプ:number
数値の幅 (0)。

コードサンプル

 
				// Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "Filtering",
							filterDropDownWidth : 100
						}
					]
				});
				// Get
				var width = $(".selector").igGridFiltering("option", "filterDropDownWidth");
				// Set
				$(".selector").igGridFiltering("option", "filterDropDownWidth", 100);

filterExprUrlKey

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

リモート要求に対してフィルタリングの式をエンコードする方法を指定する URL キー名。たとえば、&filter('col') = startsWith。デフォルトは OData です。

コードサンプル

 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						filterExprUrlKey : "filter"
					}
				]
			});

			// Get
			var key = $(".selector").igGridFiltering("option", "filterExprUrlKey");

			// Set
			$(".selector").igGridFiltering("option", "filterExprUrlKey", "filter");

filterSummaryAlwaysVisible

タイプ:

bool

デフォルト:

true
フィルターの概要情報でフッターの表示を有効または無効にします。
False の場合、(フッター内の) フィルター集計行はページング (または、フッターを描画する他の機能) が有効なときのみ表示されます。
True の場合、フィルター集計行はフィルターが適用されるときのみ表示されます。デフォルトでは表示されません。
コードサンプル
```
 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						filterSummaryAlwaysVisible : false
					}
				]
			});

			// Get
			var showSummary = $(".selector").igGridFiltering("option", "filterSummaryAlwaysVisible");

			// Set
			$(".selector").igGridFiltering("option", "filterSummaryAlwaysVisible", false);
			 
```

filterSummaryTemplate
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
フッターの左下隅に表示されるサマリーテンプレート。「${matches} の一致レコード」の形式を持っています。locale.filterSummaryTemplate オプションを使用します。

コードサンプル

 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						filterSummaryTemplate: "${matches} products found"
					}
				]
			});

			// Get
			var summaryTemplate = $(".selector").igGridFiltering("option", "filterSummaryTemplate");

			// Set
			$(".selector").igGridFiltering("option", "filterSummaryTemplate", "${matches} products");

inherit

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

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

コードサンプル

 
			// Initialize
			$(".selector").igHierarchicalGrid({
				features: [
					{
						name: "Filtering",
						inherit: true
					}
				]
			});

			// Get
			var inherit = $(".selector").igGridFiltering("option", "inherit");

labels
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
フィルタードロップダウン内の定義済みのフィルタリング条件で使用する設定可能なローカライズ済みのラベルのリスト。locale オプションを使用します。