フィルタ処理

.NETと同様に、CollectionViewクラスはICollectionViewインタフェースを介してフィルタ処理をサポートします。フィルタ処理を有効にするには、ビューに入れるオブジェクトを決定する関数をCollectionView.filterプロパティに設定します。

次の図は、FlexGridコントロールにフィルタ処理が適用された後のFlexGridを示しています。

クライアント側のみで使用できるデータに対してフィルタ処理、ページング、ソートを行う場合は、ItemSourceのDisableServerReadプロパティを必ずtrueに設定してください。

この例ではC1NWindデータソースを使用しますが、これは「クイックスタート」で示されているようにアプリケーション内で設定されたものです。

任意の文字を入力してグリッドデータをフィルタ処理します。たとえば、次の図はeAを入力したときのFlexGridです。

次のコード例は、CollectionViewを使用してFlexGridでフィルタ処理を適用する方法を示します。

コードの場合

FilteringController.cs

C#	コードのコピー
private C1NWindEntities db = new C1NWindEntities(); public ActionResult Index() { return View(db); }

Filtering.cshtml

ASP.NET Core
JS

HTML	コードのコピー
<div> <input id="filteringInput" type="text" class="form-control app-pad" placeholder="CustomerIDによるフィルタする文字を入力してください" /> </div> <c1-flex-grid id="filteringGrid" auto-generate-columns="false" is-read-only="true" allow-sorting="false"> <c1-items-source source-collection="@Model" disable-server-read="true"></c1-items-source> <c1-flex-grid-column binding="CustomerID"></c1-flex-grid-column> <c1-flex-grid-column binding="会社名"></c1-flex-grid-column> <c1-flex-grid-column binding="連絡先名"></c1-flex-grid-column> <c1-flex-grid-column binding="都市" format="c"></c1-flex-grid-column> <c1-flex-grid-column binding="国名" format="p0"></c1-flex-grid-column> <c1-flex-grid-column binding="電話番号"></c1-flex-grid-column> </c1-flex-grid>

HTML

コードのコピー

<div>
    <input id="filteringInput" type="text" class="form-control app-pad"
      placeholder="CustomerIDによるフィルタする文字を入力してください" />
</div>

<c1-flex-grid  id="filteringGrid" auto-generate-columns="false"
               is-read-only="true" allow-sorting="false">
    <c1-items-source source-collection="@Model" disable-server-read="true"></c1-items-source>
    <c1-flex-grid-column binding="CustomerID"></c1-flex-grid-column>
    <c1-flex-grid-column binding="会社名"></c1-flex-grid-column>
    <c1-flex-grid-column binding="連絡先名"></c1-flex-grid-column>
    <c1-flex-grid-column binding="都市" format="c"></c1-flex-grid-column>
    <c1-flex-grid-column binding="国名" format="p0"></c1-flex-grid-column>
    <c1-flex-grid-column binding="電話番号"></c1-flex-grid-column>
</c1-flex-grid>

スクリプト	コードのコピー
<script> $(document).ready(function () { //フィルタ処理 // collectionview、グリッド、タイムアウトが含むフィルタ、 // フィルタを入力するフィルタを作成します filteringGrid = wijmo.Control.getControl('#filteringGrid'); cvFiltering = filteringGrid.itemsSource; filteringInput = document.getElementById('filteringInput'); // 入力時フィルタを適用します filteringInput.addEventListener('input', filterGrid); }); //フィルタ処理 // collectionview、グリッド、タイムアウトが含むフィルタ、フィルタを入力する // フィルタを作成します var cvFiltering = null, filteringGrid = null, toFilter, filteringInput = null; // collection view に対してフィルタ処理を定義します function filterFunction(item) { var filter = filteringInput.value.toLowerCase(); if (!filter) { return true; } return item.CustomerID.toLowerCase().indexOf(filter) > -1; }; // フィルタを適用します(500 ms のタイムアウトに適用された) function filterGrid() { if (toFilter) { clearTimeout(toFilter); } toFilter = setTimeout(function () { toFilter = null; if (cvFiltering.filter === filterFunction) { cvFiltering.refresh(); } else { cvFiltering.filter = filterFunction; } }, 500); }; </script>

スクリプト

コードのコピー

<script>

    $(document).ready(function () {
        //フィルタ処理
        // collectionview、 グリッド、タイムアウトが含むフィルタ、
        // フィルタを入力するフィルタを作成します
        filteringGrid = wijmo.Control.getControl('#filteringGrid');
        cvFiltering = filteringGrid.itemsSource;
        filteringInput = document.getElementById('filteringInput');
        // 入力時フィルタを適用します
        filteringInput.addEventListener('input', filterGrid);
    });

    //フィルタ処理
    // collectionview、 グリッド、タイムアウトが含むフィルタ、フィルタを入力する
    // フィルタを作成します
    var cvFiltering = null,
        filteringGrid = null,
        toFilter,
        filteringInput = null;

    // collection view に対してフィルタ処理を定義します
    function filterFunction(item) {
        var filter = filteringInput.value.toLowerCase();
        if (!filter) {
            return true;
        }

        return item.CustomerID.toLowerCase().indexOf(filter) > -1;
    };

    // フィルタを適用します(500 ms のタイムアウトに適用された)
    function filterGrid() {
        if (toFilter) {
            clearTimeout(toFilter);
        }

        toFilter = setTimeout(function () {
            toFilter = null;
            if (cvFiltering.filter === filterFunction) {
                cvFiltering.refresh();
            }
            else {
                cvFiltering.filter = filterFunction;
            }
        }, 500);
    };
</script>