[]
데모 테마 디자이너 도움말 API
다른 샘플 다운로드
(Showing Draft Content)

FlexGridFilter 최적화

wijmo.grid.filter 모듈은 각 열에 Excel 스타일의 필터링 UI를 추가하는 FlexGridFilter 클래스를 제공합니다. FlexGridFilter는 두 가지 유형의 필터를 제공합니다: 값에 의한 필터 및 조건에 의한 필터


값 필터 편집기에는 사용자가 선택할 수 있는 고유한 값 목록이 포함되어 있습니다. 그리드에 많은 데이터가 포함된 경우, 이 고유 값 목록을 생성하는 데 시간이 걸릴 수 있습니다. 또한 목록에 너무 많은 값이 포함되어 있으면 그다지 유용하지 않습니다.(이 경우 조건 필터가 더 적합할 수 있습니다)


이 샘플은 값 필터를 최적화하는 3가지 방법을 보여줍니다:

  1. uniqueValues: 'Rating' 열 필터는 열에서 가능한 고유 값 목록을 지정하기 때문에, 필터는 목록 작성을 위해 데이터를 스캔할 필요가 없습니다.

  2. maxValues: 'Sales' 열 필터는 목록이 최대 20개의 값만 표시되도록 지정합니다. 편집기의 필터 필드를 사용하여 관심 있는 값을 선택할 수 있습니다.

  3. filterType: 'Expenses' 열 필터는 사용할 유일한 필터 유형이 조건임을 지정합니다. 값 필터는 이 열에 나타나지도 않습니다.

import * as wjGrid from '@mescius/wijmo.grid';
import * as wjGridFilter from '@mescius/wijmo.grid.filter';

function init() {
    // FlexGridFilter client-side filtering
    var theGrid = new wjGrid.FlexGrid('#theGrid', {
        itemsSource: data
    });
    var filter = new wjGridFilter.FlexGridFilter(theGrid);
    
    // ratings are values from 0 to 5
    var filterRating = filter.getColumnFilter('rating');
    filterRating.valueFilter.uniqueValues = [0, 1, 2, 3, 4, 5];
    
    // limit number of values shown in sales filter
    var filterSales = filter.getColumnFilter('sales');
    filterSales.valueFilter.maxValues = 20;
    
    // filter expenses only by condition
    var filterExpenses = filter.getColumnFilter('expenses');
    filterExpenses.filterType = wjGridFilter.FilterType.Condition;
}