グリッド：フィルターの最適化

wijmo.grid.filterモジュールに用意されたFlexGridFilterクラスを使用して、列ごとにExcel形式のフィルター処理UIを追加できます。FlexGridFilterには、2つのタイプのフィルター（値と条件）があります。

値フィルターエディタには、ユーザーが選択できる一意の値のリストが含まれます。グリッドに大量のデータが含まれる場合は、この一意の値リストの生成に時間がかかる場合があります。さらに、リストに含まれている値が多過ぎると、あまり役に立ちません。このような場合は、条件フィルターの方が適しています。

次のサンプルは、3つの方法で値フィルターを最適化する方法を示しています。

uniqueValues：「Rating」列フィルターでは、この列が取り得る一意の値のリストを指定しています。したがって、フィルターがリストを構築するためにデータをスキャンする必要はありません。
maxValues：「Sales」列フィルターでは、最大20個の値のみをリストに表示するように指定しています。ユーザーはエディタのフィルターフィールドを使用して、目的の値を選択できます。
filterType：「Expenses」列フィルターでは、条件フィルタータイプのみを使用するように指定しています。この列には値フィルターが表示されません。

import * as wjGrid from '@mescius/wijmo.grid';
import * as wjGridFilter from '@mescius/wijmo.grid.filter';

function init() {
    // FlexGridFilter - クライアント側のフィルター処理
    var theGrid = new wjGrid.FlexGrid('#theGrid', {
        itemsSource: data
    });
    var filter = new wjGridFilter.FlexGridFilter(theGrid);

    // レーティングは0～5までの値です
    var filterRating = filter.getColumnFilter('rating');
    filterRating.valueFilter.uniqueValues = [0, 1, 2, 3, 4, 5];

    // salesフィルターに表示される値の数を制限します
    var filterSales = filter.getColumnFilter('sales');
    filterSales.valueFilter.maxValues = 20;

    // 条件でのみ経費をフィルター処理します
    var filterExpenses = filter.getColumnFilter('expenses');
    filterExpenses.filterType = wjGridFilter.FilterType.Condition;
}

グリッド：フィルターの最適化