데이터 필터링(Filtering)
자동 필터링이 아닌 필터 목록을 개발자가 직접 설정하고 적용할 수 있습니다.
그리드 FilteringOptions.enabled 가 true이고, 컬럼에 filter들이 설정되면 컬럼 헤더에 필터 핸들이 표시되고, 사용자는 그 핸들을 클릭해서 표시되는 필터 리스트를 이용 컬럼 별로 데이터를 필터링할 수 있습니다.
한 컬럼 내에서 복수 필터가 선택되면 필터셋 중 하나의 필터 조건에만 해당되어도 행들이 표시됩니다. 하지만 여러 컬럼에 필터가 설정되면 모든 컬럼의 필터셋에 해당되는 행들만이 표시됩니다.
필터 등록, 필터 제거
컬럼에 setFilters()로 컬럼필터를 적용하고 clearFilters()로 필터를 제거할 수 있습니다.
//필터 적용
var filters = [
{
name: "모잠비크",
criteria: "value = '모잠비크'"
},
{
name: "캐나다",
criteria: "value = '캐나다'"
}
//...생략...
];
gridView.setColumnFilters("KorCountry", filters);
//필터 제거
gridView.clearColumnFilters("KorCountry");필터 추가 등록, 일부 제거
기존 필터 목록에 추가로 필터를 등록하거나 필터를 제거 할 수 있습니다.
투자국가의 기존 필터 목록에 추가로 '우크라이나', '브라질', '페루'를 추가해보도록 하겠습니다. 그리고 '모잠비크', '캐나다'는 제거해보도록 하겠습니다.
//필터 추가 등록
var filters = [
{
name: "우크라이나",
criteria: "value = '우크라이나'",
active: false
},
{
name: "브라질",
criteria: "value = '브라질'",
active: true
},
{
name: "페루",
criteria: "value = '페루'"
}
];
var overwrite = true; // false면 기존에 같은 이름의 필터가 있을 때 예외 발생.
gridView.addColumnFilters("KorCountry", filters, overwrite);
//필터 모잠비크 캐나다 제거
gridView.removeColumnFilters("KorCountry", ["모잠비크", "캐나다"]);필터 적용, 필터 해제
특정 필터나 모든 필터들을 적용하고 해제할 수 있습니다.
//모잠비크, 캐나다 필터 적용
gridView.activateColumnFilters("KorCountry", ["모잠비크", "캐나다"], true);
//모잠비크 적용해제
gridView.activateColumnFilters("KorCountry", ["모잠비크"], false);
//모든필터 적용
gridView.activateAllColumnFilters("KorCountry", true);
//모든필터 적용해제
gridView.activateAllColumnFilters("KorCountry", false);필터 숨기기, 숨김 해제
등록되어 있는 필터 목록 중 특정 필터나 모든 필터들을 숨기거나 숨김 해제 할 수 있습니다. 투자 국가의 모잠비크, 캐나다 필터를 숨기고, 모잠비크 필터를 숨김 해제 하는 것과 모든 필터들을 숨기고 숨김 해제해보도록 하겠습니다.
//모잠비크, 캐나다 숨기기
gridView.hideColumnFilters("KorCountry", ["모잠비크", "캐나다"], true);
//모잠비크 숨김 해제
gridView.hideColumnFilters("KorCountry", ["모잠비크"], false);
//모든필터 숨기기
gridView.hideAllColumnFilters("KorCountry", true);
//모든필터 숨김 해제
gridView.hideAllColumnFilters("KorCountry", false);필터 토글(toggle)
해당 컬럼의 지정한 필터들을 토글한다. 투자 국가의 모잠비크, 캐나다 필터를 토글하는것과 모든 필터를 토글해 보도록 하겠습니다.
//모잠비크, 캐나다 토글하기
gridView.toggleColumnFilters("KorCountry", ["모잠비크", "캐나다"]);
//모든필터 토글하기
gridView.toggleAllColumnFilters("KorCountry");필터 조건 함수로 설정
필터링 조건을 함수형태로 설정합니다.
//filter 함수 set
var filterFunc = function(dataProvider, dataRow, level, fieldName, filter, value) {
if (filter.tag == 1 && value == "모잠비크") {
return true;
} else if (filter.tag == 2 && value == "캐나다") {
return true;
} else if (filter.tag == 3 && value == "우크라이나") {
return true;
} else {
return false;
}
};
var filters = [
{
name: "filter1",
text: "모잠비크",
tag: 1,
callback: filterFunc
},
{
name: "filter2",
text: "캐나다",
tag: 2,
callback: filterFunc
},
{
name: "filter3",
text: "우크라이나",
tag: 3,
callback: filterFunc
}
];
gridView.setColumnFilters("KorCountry", filters);lookup 필터 설정
lookup컬럼 labels값으로 필터링 목록생성 및 검색할 수 있습니다.
gridView.filteringOptions.automating.lookupDisplay = true;and, or 범위 필터 설정
criteria에 and와 or 를 적용해서 필터링을 설정할 수 있습니다.
'나이'컬럼에 값이 20~50인 필터를 설정합니다. active: true 설정 시 필터 설정과 동시에 필터링이 적용됩니다.
//and 조건 필터
var filters = [
{
name: "나이 20~50",
criteria: "(value > 19) and (value <= 50)",
active: true
}
];
gridView.setColumnFilters("Age", filters);'주문일자'컬럼에 5월과 11월인 값으로 필터를 설정합니다.
//or 조건 필터
var filters = [
{
name: "5월과 11월",
criteria: "(month(value) = 5) or (month(value) = 11)",
active: true
}
];
gridView.setColumnFilters("OrderDate", filters);