フィルタリング

Wijgrid は、コーディングが不要な組み込みのデータフィルタ機能を提供します。実行時にデータのフィルタリングを有効にするには、showFilterオプションを True に設定する必要があります（デフォルトはFalse）。showFilter が True の場合、フィルタバーがグリッド上部の列見出しの下に表示されます。

実行時にグリッドのデータをフィルタするには、フィルタバーにテキストを入力して、フィルタリングする列のフィルタ行にあるドロップダウン矢印をクリックし、メニューからフィルタタイプを選択します。フィルタを削除するには、フィルタリングする列のフィルタ行にあるドロップダウン矢印をクリックして Nofilter を選択します。次の画面では、Nationality 列で「c」から開始されるレコードのみを表示するようにフィルタされています。

画像
スクリプト

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijgrid"], function () {
    $(document).ready(function () {
        $("#wijgrid").wijgrid({
             showFilter: true,
                data: [
                [27, 'Canada', 'Adams, Craig', 'RW'],
                [43, 'Canada', 'Boucher, Philippe', 'D', 'R'],
                [24, 'Canada', 'Cooke, Matt', 'LW', 'L'],
                [87, 'Canada', 'Crosby, Sidney (C)', 'C', 'L'],
                [1, 'United States', 'Curry, John', 'G', 'L'],
            ],
            columns: [
                {headerText: "Number"},
                {headerText: "Nationality"},
                {headerText: "Player"},
                {headerText: "Position"}
            ]
        });
    });
    });
</script>

フィルタ値は filterValue オプションで設定されていますが、値を明示的に指定しないと、列に設定されているデータ型のデフォルト値が設定されます。

filterOperator オプションを設定して、フィルタ条件を選択できます。デフォルトで filterOperator は Contains に設定されますが、以下の値も設定できます。

オプション	説明
NoFilter	フィルタを適用しません。
Contains（デフォルト）	列にフィルタ項目を含めます。データ型: string
NotContain	列にフィルタ項目を含めません。データ型: string
BeginsWith	列の項目はフィルタ項で開始します。データ型: string
EndsWith	列の項目はフィルタ項で終了します。データ型: string
Equals	列の項目はフィルタ項と厳密に等しくなります。データ型: string、number、datetime、currency、boolean
NotEqual	列の項目はフィルタ項と厳密に等しくありません。データ型: string、number、datetime、currency、boolean
Greater	列の項目が（数値）フィルタ項より小さくなります。データ型: string、number、datetime、currency、boolean
Less	列の項目が（数値）フィルタ項より大きくなります。データ型: string、number、datetime、currency、boolean
GreaterOrEqual	列の項目が（数値）フィルタ項より大きいか等しくなります。データ型: string、number、datetime、currency、boolean
LessOrEqual	列の項目が（数値）フィルタ項より小さいか等しくなります。データ型: string、number、datetime、currency、boolean
IsEmpty	列の項目は空です。データ型: string
NotIsEmpty	列の項目は空ではありません。データ型: string
IsNull	列の項目は Null です。データ型: string、number、datetime、currency、boolean
NotIsNull	列の項目は Null ではありません。データ型: string、number、datetime、currency、boolean
Custom	カスタムフィルタを適用します。

なお、フィルタタイプのテキストをカスタマイズまたはローカライズすることが可能です。詳細については、「カスタム Grid 文字列」トピックを参照してください。

関連トピック

参照