[]
        
(Showing Draft Content)

FlexGrid의 사용자 정의 필터 연산자

FlexGridFilter 클래스는 현지화할 수 있으며, 이를 활용하여 UI에 표시되는 문자열을 사용자 정의할 수 있을 뿐만 아니라, 각 데이터 유형에 대해 표시할 필터 조건을 지정할 수 있습니다.

이 fiddle에서는 필터의 stringOperators, numberOperators, dateOperators, booleanOperators에 사용자 지정 배열을 할당하여 연산자 목록을 사용자 지정했습니다. 필터 드롭다운을 열어 효과를 확인할 수 있습니다.

이 기법을 통해 각 데이터 유형에 대한 연산자를 재정렬, 제거 및 포함할 수 있습니다. 새 사용자 지정 연산자를 생성할 수 없습니다. 이를 위해서는 소스 코드를 나누고 사용자 지정해야 합니다.

// customize the FlexGridFilter conditions
var filter = wijmo.culture.FlexGridFilter,
    Operator = wijmo.grid.filter.Operator;
filter.stringOperators = [
    { name: '(doesn\'t matter)', op: null },
    { name: 'Is', op: Operator.EQ },
    { name: 'Is not', op: Operator.NE },
    { name: 'Is bigger than', op: Operator.GT }, // added
    { name: 'Is smaller than', op: Operator.LT }, // added
    //{ name: 'Begins with', op: Operator.BW },
    //{ name: 'Ends with', op: Operator.EW },
    //{ name: 'Has', op: Operator.CT },
    //{ name: 'Hasn\'t', op: Operator.NC }
];
filter.numberOperators = [
    { name: '(doesn\'t matter)', op: null },
    { name: 'Is', op: Operator.EQ },
    { name: 'Is not', op: Operator.NE },
    { name: 'Is bigger than', op: Operator.GT },
    //{ name: 'Is Greater than or equal to', op: Operator.GE },
    { name: 'Is smaller than', op: Operator.LT },
    //{ name: 'Is Less than or equal to', op: Operator.LE }
    ];
filter.dateOperators = [
    { name: '(doesn\'t matter)', op: null },
    { name: 'Is', op: Operator.EQ },
    { name: 'Is earlier than', op: Operator.LT },
    { name: 'Is later than', op: Operator.GT }
];
filter.booleanOperators = [
    { name: '(not set)', op: null },
    { name: 'Is', op: Operator.EQ },
    { name: 'Is not', op: Operator.NE },
];

// create a grid with a filter
var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    itemsSource: getData(),
});
var f = new wijmo.grid.filter.FlexGridFilter(theGrid);
f.defaultFilterType = 'Condition';