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

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

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 적용