RealGrid HELPA18 컬럼 필터링(Filtering) - I 필터선택상자 사용하기
들어가며
[A18 강좌]와 [A19 강좌]에서는 필터링에 대해 배워보겠습니다. RealGrid는 다양한 방법으로 필터링이 가능하지만 [A클래스]에서는 기본적인 필터링 방법에 대해서만 다루게 됩니다.
이론
RealGrid에서 필터링(Filtering)이란 특정컬럼의 데이터중 주어진 조건에 해당하는 데이터가 포함된 행만을 그리드에 표시하는 기능을 의미합니다. 즉, 컬럼 단위로 조건을 주어 데이터를 필터링 하는 방식입니다.
아래 그림과 같이 필터선택상자(Filter selector) 또는 필터링 함수(GridBase.setColumnFilters())를 통해 필터링 명령이 전달되면 ItemModel에는 필터링 조건에 맞는 데이터만 남아 있게됩니다.
필터선택상자로 필터링하기
필터선택상자는 컬럼헤더에 표시된 필터 아이콘을 클릭할때 표시되는 선택상자입니다. 필터선택상자에서 선택(체크)된 데이터가 그리드에 표시됩니다. 필터아이콘과 필터선택상자를 표시하려면 해당 컬럼을 생성할때 filters속성을 지정해 주면 됩니다. 아래 실습의 코드를 참조하세요.
setColumnFilters()로 필터링하기
setColumnFilters(column, filters)함수는 필터링 할 데이터 컬럼(DataColumn) 정보와 컬럼필터(ColumnFilter)를 인자로 필터링하는 함수입니다. 자세한 내용은 [A19 강좌]에서 배워보겠습니다.
컬럼의 필터정보 지우기
필터가 지정된 컬럼에서 필터정보를 지우기 위해서는 GridBase.clearColumnFilters()함수를 사용합니다.
실습
직업컬럼에 필터를 지정하기 위해 컬럼생성 배열에 필터 정보를 추가합니다. //필드와 연결된 컬럼 배열 객체를 생성합니다.
//필드와 연결된 컬럼 배열 객체를 생성합니다.
var columns = [
{
name: "col1",
fieldName: "field1",
header : {
text: "직업"
},
width : 60,
filters : [{
name: "가수",
criteria: "value = '가수'"
}, {
name: "배우",
criteria: "value = '배우'"
}]
},
{
...
- 버튼을 클릭할때
직업컬럼에 지정된 필터정보를 제거하기 위해 clearColumnFilters()함수는 호출합니다.
// 필터링된 컬럼의 필터정보 지우기
$("#btnClearColumnFilters").on("click", function(){
gridView.clearColumnFilters("col1");
})
실행화면
직업컬럼 옆에 있는 필터아이콘을 클릭하여 필터선택상자(Filter selector)가 표시되는 것을 확인하세요.- 필터선택상자에서 필터링할 값을 선택(체크)하면 그리드에 데이터가 필터링되는 것을 확인하세요.
-
직업컬럼 필터정보 지우기버튼을 눌러 직업컬럼에 설정된 필터정보를 지웁니다.직업컬럼에서 필터아이콘이 제거되는 것을 확인하세요.
나가며
필터에 대한 설명은 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,
filters : [{
name: "가수",
criteria: "value = '가수'"
}, {
name: "배우",
criteria: "value = '배우'"
}]
},
{
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);
// 필터링된 컬럼의 필터정보 지우기
$("#btnClearColumnFilters").on("click", function(){
gridView.clearColumnFilters("col1");
})
});
</script>
HTML
<button type="button" class="btn btn-primary btn-xs" id="btnClearColumnFilters">직업컬럼 필터정보 지우기</button> <div id="realgrid" style="width: 100%; height: 400px;"></div>
관련 데모 페이지
API 참조