FlexGrid 계층 구조 데이터 필터

CollectionView 클래스는 컬렉션의 직계 하위 항목에 대해서만 필터링을 지원합니다. 대부분의 경우 계층 구조 데이터에는 제대로 작동하지 않습니다.

하위 요소가 표시되면 모든 상위 요소도 표시되어야 하므로 계층 구조 데이터를 필터링하는 것은 간단한 작업이 아닙니다.

아래 그리드는 도시를 표시하는 간단한 계층적 바인딩 메서드 구현 방법을 보여주는데, 이는 필터와 일치하는 도시와, 필터와 일치하거나 일치하는 도시를 포함하는 주가 표시됩니다.

// create tree-style grid
var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    childItemsPath: 'cities',
    headersVisibility: 'Column',
    itemsSource: getData(),
});
  
// update when filter textbox changes
document.getElementById('filter').addEventListener('input', function(e) {
    var filter = e.target.value.toLowerCase();
    applyHierarchicalFilter(theGrid, filter);
});

// update row visibility
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();

        // handle states (level 0)
         if (row.level == 0) {

            // check if the state name matches the filter
            var stateVisible = state.name.toLowerCase().indexOf(filter) >= 0;
            if (stateVisible) {
                // it does, so show the state and all its cities
                for (var j = rng.topRow; j <= rng.bottomRow; j++) {
                    rows[j].visible = true;
                }
            } 
            else {
                // it does not, so check the cities
                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;
                }
                // if at least one city is visible, the state is visible
                rows[i].visible = stateVisible; 
            }
            // move on to the next group
            i = rng.bottomRow;
        }
    }
}  

	// some hierarchical data
	function getData() {
  	return [
  		{ name: 'Washington', type: 'state', population: 6971, cities: [
            { name: 'Seattle', type: 'city', population: 652 },
            { name: 'Spokane', type: 'city', population: 210 }]
        }, 
        { name: 'Oregon', type: 'state', population: 3930, cities: [
            { name: 'Portland', type: 'city', population: 609 },
            { name: 'Eugene', type: 'city', population: 159 }]
			},
        { name: 'California', type: 'state', population: 38330, cities: [
            { name: 'Los Angeles', type: 'city', population: 3884 },
            { name: 'San Diego', type: 'city', population: 1356 },
            { name: 'San Francisco', type: 'city', population: 837 }]
        }
    ];
  }