製品版のみの機能
グリッド - Excel スタイル フィルタリング
このサンプルでは、EditorProviderCombo を使用してフィルタリング フィールドをカスタマイズする方法を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
EditorProviderCombo をカテゴリ列の入力フィールドで使用し、複数選択やチェックボックスを有効にしたコンボを使用してフィルタリングします。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
<table id="productsGrid"></table>
<script src="/data-files/nw-products.js"></script>
<script>$(function () {
let uniqueCategoriesSet = new Set();
let uniqueCategories = [];
northwindProducts.forEach(function (product) {
uniqueCategoriesSet.add(product.CategoryName)
});
uniqueCategoriesSet.forEach(function (item) {
uniqueCategories.push(item);
});
$.ig.CustomComboEditorProvider = $.ig.CustomComboEditorProvider || $.ig.EditorProviderCombo.extend({
setSize: function (width, height) {
this.editor.element.css({
width: width,
height: height
});
},
getValue: function () {
return this.editor.value();
},
destroy: function () {
this.editor.element.remove();
}
});
$("#productsGrid").igGrid({
autoGenerateColumns: false,
width: '100%',
columns: [
{ headerText: "製品名", key: "ProductName", dataType: "string" },
{ headerText: "在庫数", key: "InStock", dataType: "number" },
{ headerText: "カテゴリ", key: "CategoryName", dataType: "string" }
],
dataSource: northwindProducts,
responseDataKey: "results",
autoCommit: true,
features: [
{
name: "Sorting",
sortingDialogContainment: "window"
},
{
name: "Filtering",
type: "local",
columnSettings: [
{
columnKey: "CategoryName",
conditionList: [
"equals"
],
editorProvider: new $.ig.CustomComboEditorProvider(),
editorOptions: {
dataSource: uniqueCategories,
allowCustomValue: false,
autoComplete: true,
multiSelection: {
enabled: true,
showCheckboxes: true,
itemSeparator: ', '
}
}
}
]
},
{
name: "Paging",
pageSize: 10
}
]
});
});</script>
</body>
</html>
var northwindProducts = [
{ "ProductID": 1, "ProductName": "果汁100% オレンジ", "CategoryName": "飲料", "ImageUrl": "../../images/samples/nw/categories/1.png", "InStock": 39 },
{ "ProductID": 2, "ProductName": "果汁100% グレープ", "CategoryName": "飲料", "ImageUrl": "../../images/samples/nw/categories/1.png", "InStock": 17 },
{ "ProductID": 3, "ProductName": "ホワイトソルト", "CategoryName": "調味料", "ImageUrl": "../../images/samples/nw/categories/2.png", "InStock": 13 },
{ "ProductID": 4, "ProductName": "ブラックペッパー", "CategoryName": "調味料", "ImageUrl": "../../images/samples/nw/categories/2.png", "InStock": 53 },
{ "ProductID": 5, "ProductName": "ピュアシュガー", "CategoryName": "調味料", "ImageUrl": "../../images/samples/nw/categories/2.png", "InStock": 0 },
{ "ProductID": 6, "ProductName": "うまい素", "CategoryName": "調味料", "ImageUrl": "../../images/samples/nw/categories/2.png", "InStock": 120 },
{ "ProductID": 7, "ProductName": "乾燥バナナ", "CategoryName": "加工食品", "ImageUrl": "../../images/samples/nw/categories/7.png", "InStock": 15 },
{ "ProductID": 8, "ProductName": "ピュアデミグラスソース", "CategoryName": "調味料", "ImageUrl": "../../images/samples/nw/categories/2.png", "InStock": 6 },
{ "ProductID": 9, "ProductName": "アメリカンポーク", "CategoryName": "肉類", "ImageUrl": "../../images/samples/nw/categories/6.png", "InStock": 29 },
{ "ProductID": 10, "ProductName": "大陸サーモン", "CategoryName": "魚介類", "ImageUrl": "../../images/samples/nw/categories/8.png", "InStock": 31 },
{ "ProductID": 11, "ProductName": "ロッキーチーズ", "CategoryName": "乳製品", "ImageUrl": "../../images/samples/nw/categories/4.png", "InStock": 22 },
{ "ProductID": 12, "ProductName": "フレッシュバター", "CategoryName": "乳製品", "ImageUrl": "../../images/samples/nw/categories/4.png", "InStock": 86 },
{ "ProductID": 13, "ProductName": "うなぎ", "CategoryName": "魚介類", "ImageUrl": "../../images/samples/nw/categories/8.png", "InStock": 24 },
{ "ProductID": 14, "ProductName": "乾燥アップル", "CategoryName": "加工食品", "ImageUrl": "../../images/samples/nw/categories/7.png", "InStock": 35 },
{ "ProductID": 15, "ProductName": "だしかつお", "CategoryName": "調味料", "ImageUrl": "../../images/samples/nw/categories/2.png", "InStock": 39 },
{ "ProductID": 16, "ProductName": "バニラクリームアイス", "CategoryName": "菓子類", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 29 },
{ "ProductID": 17, "ProductName": "うす味ウインナー", "CategoryName": "肉類", "ImageUrl": "../../images/samples/nw/categories/6.png", "InStock": 0 },
{ "ProductID": 18, "ProductName": "かに", "CategoryName": "魚介類", "ImageUrl": "../../images/samples/nw/categories/8.png", "InStock": 42 },
{ "ProductID": 19, "ProductName": "チョコクリームアイス", "CategoryName": "菓子類", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 25 },
{ "ProductID": 20, "ProductName": "紅茶バー", "CategoryName": "菓子類", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 40 },
{ "ProductID": 21, "ProductName": "じゃがチップス", "CategoryName": "菓子類", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 3 },
{ "ProductID": 22, "ProductName": "モーニングブレッド", "CategoryName": "穀類、シリアル", "ImageUrl": "../../images/samples/nw/categories/5.png", "InStock": 104 },
{ "ProductID": 23, "ProductName": "バタートースト", "CategoryName": "穀類、シリアル", "ImageUrl": "../../images/samples/nw/categories/5.png", "InStock": 61 },
{ "ProductID": 24, "ProductName": "コーヒーマイルド", "CategoryName": "飲料", "ImageUrl": "../../images/samples/nw/categories/1.png", "InStock": 20 },
{ "ProductID": 25, "ProductName": "アメリカンクラッカー", "CategoryName": "菓子類", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 76 },
{ "ProductID": 26, "ProductName": "バナナキャンディー", "CategoryName": "菓子類", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 15 },
{ "ProductID": 27, "ProductName": "メロンミルクキャンディー", "CategoryName": "菓子類", "ImageUrl": "../../images/samples/nw/categories/3.png", "InStock": 49 },
{ "ProductID": 28, "ProductName": "特選味のり", "CategoryName": "加工食品", "ImageUrl": "../../images/samples/nw/categories/7.png", "InStock": 26 },
{ "ProductID": 29, "ProductName": "ベターローストハム", "CategoryName": "肉類", "ImageUrl": "../../images/samples/nw/categories/6.png", "InStock": 0 },
{ "ProductID": 30, "ProductName": "いくら", "CategoryName": "魚介類", "ImageUrl": "../../images/samples/nw/categories/8.png", "InStock": 10 }
]