Excel 스타일 필터

wijmo.grid.filter 모듈은 각 열에 Excel 스타일 필터링 UI를 추가하는 FlexGridFilter 클래스를 제공합니다.

FlexGridFilter는 열 헤더에 필터 아이콘을 추가합니다. 사용자는 아이콘을 클릭하여 값 또는 조건별로 필터를 적용할 수 있는 드롭다운을 볼 수 있습니다.

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);
}

데이터를 값으로 필터링할 때 현재 선택된 값과 이전에 선택된 값을 함께 포함하려면 현재 선택 영역 포함(Include Current Selection) 체크박스를 사용할 수 있습니다. 이 옵션은 그리드의 필터 드롭다운에 있으며, 기본적으로 값에 따른 필터(Filter By Value) 탭에서는 숨겨져 있습니다.

현재 선택 영역 포함(Include Current Selection) 체크박스의 표시 여부는 showIncludeSelection 속성을 사용해 제어합니다. FlexGridFilter 클래스의 showIncludeSelection을 true로 설정하면 체크박스가 활성화됩니다. 기본적으로 showIncludeSelection 속성은 false로 설정되어 있습니다.

현재 선택 영역 포함(Include Current Selection) 옵션을 선택한 후 값 필터를 다시 적용하면 이전에 선택된 행(있을 경우)이 새로운 선택된 행과 함께 유지됩니다. 예를 들어, 데모에서 사용자가

1. ‘Germany’, ‘Italy’ 값을 선택해 필터를 적용하면 그리드에는 해당 데이터만 표시됩니다.

2. 이후 ‘Greece’, ‘Japan’ 값을 선택하고, 이번에는 현재 선택 영역 포함(Include Current Selection) 체크박스를 체크한 경우,

3. 데이터 그리드에는 ‘Germany’, ‘Greece’, ‘Italy’, ‘Japan’ 값의 행이 모두 표시됩니다. 즉, 이전에 선택된 값도 필터 목록에 유지됩니다.

아래 예제 코드는 필터 탭에서 Include Current Selection 옵션을 활성화하는 방법을 보여줍니다.

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

function init() {  
    // FlexGridFilter 클라이언트 측 필터링  
    var theGrid = new wjGrid.FlexGrid('#theGrid', {  
        itemsSource: data,  
    });  

    // 모든 값 필터에 대해 활성화/비활성화
    var filter = new wjGridFilter.FlexGridFilter(flexGrid);  
    filter.showIncludeSelection = true;  

    // 특정 열의 값 필터에 대해 활성화/비활성화
    filter.getColumnFilter("country").valueFilter.showIncludeSelection = false;
} 

사용자 정의 필터 메소드

ValueFilter는 기본 제공되는 Text, Regex, Excel 검색 유형 외에도 자체 필터링 로직을 정의할 수 있는 Custom 검색 유형을 지원합니다.

사용자 정의 필터를 사용하려면 searchType 속성을 ValueFilterSearchKind.Custom로 설정하고 ValueFilter에 customFilter 함수를 할당합니다. 사용자 정의 필터 함수는 다음 두 개의 매개변수를 전달받습니다.

• filterText: 필터 편집기 검색 상자에 입력된 텍스트입니다.

• filterItem: value(원본 셀 값), text(서식이 적용된 표시 텍스트), show(현재 체크 상태) 속성을 포함하는 {@link ICustomFilterItem} 객체입니다.

이 함수는 항목을 필터 결과에 포함하려면 true, 제외하려면 false를 반환해야 합니다.

위 예제에서는 필터 입력 상자에 aa&bb를 입력하면 "aa"와 "bb"를 모두 포함하는 항목(예: "aa bb")이 매칭됩니다.

Wijmo는 조건 필터와 값 필터를 하나의 UI 패널에 동시에 표시하는 MultiFilter도 지원합니다. 이 디자인은 두 가지 필터를 한눈에 구분하고 설정할 수 있어 사용성을 향상시킵니다.

MultiFilter UI에서는 적용(Apply) 및 취소(Cancel) 버튼을 제거합니다. 즉, UI에서 필터를 설정하면 즉시 필터가 적용됩니다.

Multi Filter를 활성화하려면 아래 코드와 같이 적용하시면 됩니다:

import { FlexGridFilter, FilterMode } from '@mescius/wijmo.grid.filter';

const filter = new FlexGridFilter(grid, {
  defaultFilterMode: FilterMode.MultiFilter // 각 열에 MultiFilter 적용
});

또는 특정 열에만 MultiFilter를 적용할 수도 있습니다.

import { FilterMode } from '@mescius/wijmo.grid.filter';

const col = grid.getColumn('some-column'); // 바인딩으로 열 인스턴스 가져오기
const cf = filter.getColumnFilter(col);    // 열 인스턴스로부터 열 필터 가져오기
cf.filterMode = FilterMode.MultiFilter;    // 해당 열에 MultiFilter 적용