グリッド：階層データのフィルター

CollectionViewクラスは、コレクションの直接の子に当たる項目のフィルター処理のみをサポートします。ほとんどの場合、これは階層化データに対してうまく動作しません。

子要素が表示される場合は、その祖先ノードもすべて表示する必要があるため、階層化データのフィルター処理は容易な作業ではありません。

次のグリッドは、単純な階層化結合を実装する方法を示します。この階層化結合は、フィルターに一致する都市や州、およびフィルターに一致する都市を含む州を表示します。

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

function init() {
    // ツリー形式のグリッドを作成します
    var theGrid = new wjGrid.FlexGrid('#theGrid', {
        childItemsPath: 'cities',
        headersVisibility: 'Column',
        itemsSource: getData(),
    });

    // フィルターテキストボックスが変更されたときに更新します
    document.getElementById('filter').addEventListener('input', function(e) {
        var filter = e.target.value.toLowerCase();
        applyHierarchicalFilter(theGrid, filter);
    });

    // 行の表示/非表示を更新します
    function applyHierarchicalFilter(grid, filter) {
        var rows = grid.rows;
        for (var i = 0; i < rows.length; i++) {
            var row = rows[i],
            state = row.dataItem,
            rng = row.getCellRange();

            // 州を処理します（レベル0）
            if (row.level == 0) {

                // 州名がフィルターに一致するかどうかを確認します
                var stateVisible = state.name.toLowerCase().indexOf(filter) >= 0;
                if (stateVisible) {
                    // 一致する場合は、州とそのすべての都市を表示します
                    for (var j = rng.topRow; j <= rng.bottomRow; j++) {
                        rows[j].visible = true;
                    }
                } 
                else {
                    // 一致しない場合は、都市を確認します
                    for (var j = rng.topRow + 1; j <= rng.bottomRow; j++) {
                        var city = rows[j].dataItem,
                            cityVisible = city.name.toLowerCase().indexOf(filter) >= 0;
                        rows[j].visible = cityVisible;
                        stateVisible |= cityVisible;
                    }
                    // 1つ以上の都市が表示される場合、州も表示されます
                    rows[i].visible = stateVisible; 
                }
                // 次のグループに移動します
                i = rng.bottomRow;
            }
        }
    }  
}