RealGrid HELPA19 컬럼 필터링(Filtering) - II setColumnFilters()함수 사용하기
들어가며
이번 강좌에서는 지난[A18 강좌]에 이어 GridBase.setColumnFilters()함수를 이용해 필터링하는 방법에 대해 배워보겠습니다.
이론
기본적인 필터링 함수인 GridBase.setColumnFilters()는 데이터컬럼(DataColumn)과 컬럼필터(ColumnFilter)를 인자로 합니다. 첫 번째 인자인 데이터컬럼은 필터링할 컬럼을 지시합니다. 두 번째 인자인 컬럼필터는 필터선택상자에 표시될 필터정보를 지시합니다.
setColumnFilters()함수의 첫 번째 인자인 데이터컬럼에는 DataColumn객체를 넘겨도 되지만 단순히 컬럼이름(ColumnName)만 string형으로 넘겨주어도 됩니다. 아래 코드는 데이터컬럼에 컬럼이름만 넘기는 경우와 데이터컬럼 객체를 넘기는 두 가지 경우의 코드를 보여주고 있습니다. 두 경우 모두 동일한 동작을 하게 됩니다.
//컬럼 이름만 넘기는 경우
gridView.setColumnFilters("col1", filters)
//데이터컬럼 객체를 넘기는 경우
var dataColumn = {"name" : "col1"}
gridView.setColumnFilters(dataColumn, filters);
컬럼필터(ColumnFilter)객체에는 name, criteria, text, description, active라는 속성이 있지만 이번 강좌에서는 name, criteria, text속성만 알아보겠습니다.
name속성은 필터를 구분하기 위한 이름입니다.criteria속성은 필터의 조건을 입력하기 위한 Expression속성 입니다.text속성은 필터선택창에 표시될 문자열입니다. 입력하지 않으면name속성이 표시됩니다.
실습
- 버튼을 클릭하면
직업컬럼에 필터를 지정하기 위해 filters라는 ColumnFilter객체를 만들고 필터 정보를 입력합니다. - setColumnFilters()함수로 직업컬럼에 필터를 적용하기 위해 “col1”이라는 직업컬럼 필터의 이름을 첫 번째 인자로 넘겨줍니다.
- ColumnFilter객체인 filters를 두 번째 인자로 넘겨줍니다.
// setColumnFilters()함수로 직업컬럼에 필터 적용
$("#btnSetColumnFilters").on("click", function(){
var filters = [{
name: "가수",
criteria: "value = '가수'",
text: "가수만 걸러주세요."
}, {
name: "배우",
criteria: "value = '배우'"
}];
gridView.setColumnFilters("col1", filters);
})
- 버튼을 클릭할때
직업컬럼에 지정된 필터정보를 제거하기 위해 clearColumnFilters()함수는 호출합니다.
// 필터링된 컬럼의 필터정보 지우기
$("#btnClearColumnFilters").on("click", function(){
gridView.clearColumnFilters("col1");
})
실행화면
-
직업컬럼 필터링버튼을 눌러직업컬럼에 필터아이콘이 생성되는 것을 확인하세요. - 필터선택창에
text속성에 입력한 문자열이 표시되는 것을 확인하세요. -
text속성을 사용하지 않았을때name속성이 표시되는 것을 확인하세요. -
직업컬럼 필터정보 지우기버튼을 눌러 직업컬럼에 설정된 필터정보를 지웁니다.직업컬럼에서 필터아이콘이 제거되는 것을 확인하세요.
나가며
필터에 대한 설명은 B Class에서 4개 강좌([B1-1], [B1-2], [B1-3], [B1-4])에 걸쳐 자세히 다루고 있습니다.
전체 소스코드
SCRIPT
<link rel="stylesheet" href="/css/bootstrap.css">
<script type="text/javascript" src="/script/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/script/bootstrap.min.js"></script>
<!--realgrid-->
<script type="text/javascript" src="/script/realgridjs-lic.js"></script>
<script type="text/javascript" src="/script/realgridjs_eval.1.0.14.min.js"></script>
<script type="text/javascript" src="/script/realgridjs-api.1.0.14.js"></script>
<script>
var gridView;
var dataProvider;
$(document).ready( function() {
RealGridJS.setTrace(false);
RealGridJS.setRootContext("/script");
dataProvider = new RealGridJS.LocalDataProvider();
gridView = new RealGridJS.GridView("realgrid");
gridView.setDataSource(dataProvider);
//다섯개의 필드를 가진 배열 객체를 생성합니다.
var fields = [
{
fieldName: "field1"
},
{
fieldName: "field2"
},
{
fieldName: "field3"
},
{
fieldName: "field4"
},
{
fieldName: "field5"
},
{
fieldName: "field6"
},
{
fieldName: "field7"
},
{
fieldName: "field8"
},
{
fieldName: "field9"
},
{
fieldName: "field10"
}
];
//DataProvider의 setFields함수로 필드를 입력합니다.
dataProvider.setFields(fields);
//필드와 연결된 컬럼 배열 객체를 생성합니다.
var columns = [
{
name: "col1",
fieldName: "field1",
header : {
text: "직업"
},
width : 60
},
{
name: "col2",
fieldName: "field2",
header : {
text: "성별"
},
width: 50
},
{
name: "col3",
fieldName: "field3",
header : {
text: "이름"
},
width: 80
},
{
name: "col4",
fieldName: "field4",
header : {
text: "국어"
},
width: 80
},
{
name: "col5",
fieldName: "field5",
header : {
text: "수학"
},
width: 80
},
{
name: "col6",
fieldName: "field6",
header : {
text: "민법"
},
width: 80
},
{
name: "col7",
fieldName: "field7",
header : {
text: "한국사"
},
width: 80
},
{
name: "col8",
fieldName: "field8",
header : {
text: "영어"
},
width: 80
},
{
name: "col9",
fieldName: "field9",
header : {
text: "과학"
},
width: 80
},
{
name: "col10",
fieldName: "field10",
header : {
text: "사회"
},
width: 80
}
];
//컬럼을 GridView에 입력 합니다.
gridView.setColumns(columns);
var data = [
["가수", "여자", "정수라", "80", "99", "90", "90", "100", "100", "90"],
["배우", "여자", "송윤아", "10", "33", "90", "70", "60", "100", "80"],
["배우", "여자", "전도연", "20", "22", "90", "70", "60", "100", "80"],
["가수", "여자", "이선희", "40", "33", "90", "70", "60", "100", "80"],
["배우", "여자", "하지원", "10", "11", "90", "70", "60", "100", "80"],
["가수", "여자", "소찬휘", "30", "55", "90", "70", "60", "100", "80"],
["가수", "여자", "박정현", "40", "22", "90", "70", "60", "100", "80"],
["배우", "여자", "전지현", "20", "44", "90", "70", "60", "100", "80"]
];
dataProvider.setRows(data);
// setColumnFilters()함수로 직업컬럼에 필터 적용
$("#btnSetColumnFilters").on("click", function(){
var filters = [{
name: "가수",
criteria: "value = '가수'",
text: "가수만 걸러주세요."
}, {
name: "배우",
criteria: "value = '배우'"
}];
gridView.setColumnFilters("col1", filters);
})
// 필터링된 컬럼의 필터정보 지우기
$("#btnClearColumnFilters").on("click", function(){
gridView.clearColumnFilters("col1");
})
});
</script>
HTML
<button type="button" class="btn btn-primary btn-xs" id="btnSetColumnFilters">직업컬럼 필터링</button> <button type="button" class="btn btn-primary btn-xs" id="btnClearColumnFilters">직업컬럼 필터정보 지우기</button> <div id="realgrid" style="width: 100%; height: 400px;"></div>
관련 데모 페이지
API 참조