그리드의 모든 필드에 필터링을 사용할 수 있도록 설정한 예제입니다.
필터 메뉴는 그리드 속성 enableFilter=true 설정, 칼럼레이아웃에서 filter : { showIcon : true} 설정하면 사용할 수 있습니다.
헤더의 필터링 아이콘을 클릭하여 나오는 필터 메뉴에서 필터링을 할 수 있습니다.
기본적으로 해당 칼럼에 있는 값들을 모두 체크박스 형태로 출력 시키나 고유값들이 너무 많은 경우 지정된 최대 개수(filterMenuItemMaxCount 속성)만큼 출력 시키고 하단에 출력시킬 값이 더 이 있다는 메세지를 출력시킵니다.
필드의 값이 없는 경우(null, "", 필드 지정안 한 경우(typeof === "undefined")) 필드 메뉴에는 "(필드 값 없음)" 으로 표시됩니다.
Price 는 유형이 숫자로 숫자 필터링을 지정한 모습입니다.
정렬 후 필터링, 필터링 후 정렬 형태로 데이터를 쉽게 분석할 수 있도록 제공합니다.
필터 메뉴 크기 조절(resizing) : 우측 하단 손잡이 드래깅 조절 가능
필터 메뉴 이동(moving) : 메뉴의 상단 드래깅으로 이동 가능
이름이 Anna, Emma 만 필터링하기 이름이 Kim, Anna 이고 나라가 대한민국인 사람만 필터링하기
모든 데모는 각각 독립적인 단일 HTML 페이지입니다. 마우스 우클릭 후 "소스 보기" (또는 크롬 기준 단축키 Ctrl + U)로 어떻게 작성되었는지 쉽게 확인 할 수 있습니다.
Copyright © AUISoft Co., Ltd.