グリッド：フィルター演算子

FlexGridFilterクラスはローカライズ可能です。UIに表示される文字列をカスタマイズできるだけでなく、各データ型に対してどのフィルター条件を表示するかをカスタマイズできます。

次のサンプルでは、フィルターのstringOperators、numberOperators、dateOperators、およびbooleanOperatorsにカスタム配列を割り当てることで、演算子のリストをカスタマイズしました。フィルターのドロップダウンを開いて、その効果を確認してください。

この方法では、各データ型に対して演算子を並べ替え、使用/不使用にすることができます。新しいカスタム演算子を作成することはできません。それには、ソースコードのコピーを生成し、それをカスタマイズする必要があります。

import * as wjCore from '@mescius/wijmo';
import * as wjGridFilter from '@mescius/wijmo.grid.filter';
import * as wjGrid from '@mescius/wijmo.grid';
import { getData } from './data';

function init() {
    // FlexGridFilter条件をカスタマイズします
    var filter = wjCore.culture.FlexGridFilter, Operator = wjGridFilter.Operator;
    filter.stringOperators = [
        { name: '(設定しない)', op: null },
        { name: '指定の値に等しい', op: Operator.EQ },
        { name: '指定の値に等しくない', op: Operator.NE },
        { name: '指定の値より大きい', op: Operator.GT },
        { name: '指定の値より小さい', op: Operator.LT },
    ];
    filter.numberOperators = [
        { name: '(設定しない)', op: null },
        { name: '指定の値に等しい', op: Operator.EQ },
        { name: '指定の値に等しくない', op: Operator.NE },
        { name: '指定の値より大きい', op: Operator.GT },
        { name: '指定の値より小さい', op: Operator.LT },
    ];
    filter.dateOperators = [
        { name: '(設定しない)', op: null },
        { name: '指定の値に等しい', op: Operator.EQ },
        { name: '指定の値より前', op: Operator.LT },
        { name: '指定の値より後', op: Operator.GT }
    ];
    filter.booleanOperators = [
        { name: '(設定しない)', op: null },
        { name: '指定の値に等しい', op: Operator.EQ },
        { name: '指定の値に等しくない', op: Operator.NE },
    ];

    // フィルターを含むグリッドを作成します
    var theGrid = new wjGrid.FlexGrid('#theGrid', {
        itemsSource: getData(),
    });
    var f = new wjGridFilter.FlexGridFilter(theGrid);
    f.defaultFilterType = wjGridFilter.FilterType.Condition;
}