B1-1 Column Filtering

들어가며

A18, A19 강좌에서 Filter에 대한 기본적인 이론과 사용방법을 배웠습니다. 이 강좌에서는 Filter에 관한 다양한 API 사용법을 알아봅시다.

이론

먼저 알아두셔야 할 내용입니다.

다른 대부분의 함수의 경우도 그렇지만, 이 강좌 중 함수에 전달하는 column 매개변수에는 column.name 또는 column object를 전달할 수 있습니다. 예를들어 toggleColumnFilters 함수의 경우
```
 gridView.toggleAllColumnFilters("textColumn");
```
와 같이 사용할 수 있고,
```
 var col = gridView.columnByField("textField");
 gridView.toggleAllColumnFilters(col);
```
와 같은 형태로도 사용이 가능합니다.

또한 filterNames 파라메터에는 지정할 필터가 하나일 때 “A”와 같은 문자열 형태로, 여럿일 때 [“A”,”B”]와 같이 배열 형태로 지정이 가능합니다.
Filter를 생성하는 방법은 다음과 같습니다.
- 컬럼 선언 시 filter속성 지정
```
gridView.setColumns([{
  fieldName: "textField",
  filters : [{   
    ...
  }]      
}]);
```
- GridBase.setColumnFilters()함수로 Filter 정의
  
  해당 컬럼의 기존 모든 Filter가 삭제되고 새롭게 생성됩니다.
```
gridView.setColumnsFilters(column, filters);
```
- GridBase.addColumnFilters()함수로 Filter 추가 기존 Filter는 유지되고 동일한 이름일 경우 overwrite parameter 값이 true이면 기존 Filter를 지우고 다시 생성됩니다.
```
gridView.addColumnsFilters(column, filters, overwrite);
```
Filter를 제거하는 방법은 다음과 같습니다.
- GridBase.clearColumnFilters()함수로 제거.
  
  해당 컬럼의 모든 Filter가 제거 됩니다.
```
gridView.clearColumnFilters(column);
```
- GridBase.removeColumnFilters()함수로 제거. 해당 컬럼의 지정한 Filter들만 제거 됩니다.
```
gridView.removeColumnFilters(column, filterNames);
```
Filter의 활성화 여부를 제어하는 방법은 다음과 같습니다.
- Filter 생성 시 active 속성 지정
  
  active 속성이 true이면 생성과 동시에 활성화됩니다.
```
gridView.addColumnsFilters("textColumn", [{
    name: "D",
    criteria: "value = 'D'",
    active: true      
  }]);      
}]);
```
- GridBase.activateAllColumnFilters()함수로 해당 컬럼 전체 필터의 활성화/비활성화 상태 지정
  
  active 파라메터의 값에 따라 해당 컬럼의 전체 필터들이 활성화, 비활성화 상태로 변경됩니다.
```
gridView.activateAllColumnFilters(column, active);
```
- GridBase.activateColumnFilters()함수로 일부 필터의 활성화/비활성화 상태 지정
  
  activate 파라메터의 값에 따라 해당 컬럼의 지정된 필터들이 활성화, 비활성화 상태로 변경됩니다.
```
gridView.activateColumnFilters(column, filterNames);
```
- GridBase.toggleAllColumnFilters()함수로 전체 필터의 활성화/비활성화 상태 반전
  
  해당 컬럼의 모든 필터들이 활성화 상태인 필터는 비활성화 상태로, 비활성화 상태인 필터는 활성화 상태로 반대의 상태로 변경됩니다.
```
gridView.toggleAllColumnFilters(column);
```
- GridBase.toggleColumnFilters()함수로 일부 필터의 활성화/비활성화 상태 반전
  
  해당 컬럼의 지정된 필터들이 활성화 상태인 필터는 비활성화 상태로, 비활성화 상태인 필터는 활성화 상태로 반대의 상태로 변경됩니다.
```
gridView.toggleColumnFilters(column, filterNames);
```
Filter가 활성화/비활성화 될 때 다음과 같은 이벤트가 발생합니다.
- GridBase.onFiltering()
  
  false를 반환하면 필터링을 실행하지 않습니다. (RealGridJS에서만 지원)
- GridBase.onFilteringChanged()
  
  필터링 상태가 변경될 경우 호출 됩니다.

실습

Grid, Provider용 전역변수 선언
```
 var gridView;
 var dataProvider;
```

Field및 filter를 포함한 Column구성, 실습을 위한 기초 데이터 구성

초기에 TextColumn에 A,B 필터가 있고 A를 활성화하기 위해 아래와 같이 filters 속성을 지정합니다.

 dataProvider.setFields([{
   fieldName: "textField"
 }, {
   fieldName: "numberField",
   dataType: "number"
 }]);

 gridView.setColumns([{
   fieldName: "textField",
   name: "textColumn",
   width: 200,
   header: {text: "Text Column"},
   filters : [{
     name: "A",
     criteria: "value = 'A'",
     active: true
   }, {
     name: "B",
     criteria: "value = 'B'"      
   }]
 }, {
   fieldName: "numberField",
   name: "numberColumn",
   width: 200,
   header: {text: "Number Column"}
 }]);

 dataProvider.setRows([{
   textField: "A",
   numberField: 1
 }, {
   textField: "B",
   numberField: 2
 }, {
   textField: "C",
   numberField: 3
 }, {
   textField: "D",
   numberField: 4
 }, {
   textField: "E",
   numberField: 5
 }]);

버튼 과 각각의 callback함수 선언

 
 $("#btnActivateColumnFilter").click(function () {
   gridView.activateColumnFilters("textColumn", ["B","C"], true);
 });

 $("#btnDeactivateColumnFilter").click(function () {
   gridView.activateColumnFilters("textColumn", ["B","C"], false);
 });

 $("#btnToggleColumnFilter").click(function () {
   gridView.toggleColumnFilters("textColumn", ["A","C"]);
 });

 $("#btnToggleAllColumnFilter").click(function () {
   gridView.toggleAllColumnFilters("textColumn");
 });

 $("#btnActivateAllColumnFilter").click(function () {
   gridView.activateAllColumnFilters("textColumn",true);
 });

 $("#btnDeactivateAllColumnFilter").click(function () {
   gridView.activateAllColumnFilters("textColumn",false);
 });

 $("#btnRemoveColumnFilters").click(function () {
   gridView.removeColumnFilters("textColumn", ["B","D"]);
 });

 $("#btnClearColumnFilters").click(function () {
   gridView.clearColumnFilters("textColumn");
 });

실행화면

화면 초기상태에 textColumn에 A, B, C 필터가 있고 A 필터는 활성화 상태.
기존 C필터는 없어지고 D필터 추가
C필터 추가, A필터는 새로운 필터로 교체
B, D Filter 활성화
B, D Filter 비활성화
A, C Filter 반전
전체 Filter 반전
전체 Filter 활성화
전체 Filter 비활성화
B, D Filter 제거
전체 Filter 제거

전체 소스코드

SCRIPT

<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 language="javascript">
  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);

    dataProvider.setFields([{
      fieldName: "textField"
    }, {
      fieldName: "numberField",
      dataType: "number"
    }]);

    gridView.setColumns([{
      fieldName: "textField",
      name: "textColumn",
      width: 200,
      header: {text: "Text Column"},
      filters : [{
        name: "A",
        criteria: "value = 'A'",
        active: true
      }, {
        name: "B",
        criteria: "value = 'B'"      
      }, {
        name: "C",
        criteria: "value = 'C'"      
      }]
    }, {
      fieldName: "numberField",
      name: "numberColumn",
      width: 200,
      header: {text: "Number Column"}
    }]);

    dataProvider.setRows([{
      textField: "A",
      numberField: 1
    }, {
      textField: "B",
      numberField: 2
    }, {
      textField: "C",
      numberField: 3
    }, {
      textField: "D",
      numberField: 4
    }, {
      textField: "E",
      numberField: 5
    }]);

    $("#btnSetFilter").click(function () {
      gridView.setColumnFilters("textColumn", [{
        name: "A",
        criteria: "value = 'A'",
        active: true
      }, {
        name: "B",
        criteria: "value = 'B'"
      }, {
        name: "D",
        criteria: "value = 'D'"
      }]);
    });

    $("#btnAddFilter").click(function () {
      gridView.addColumnFilters("textColumn", [{
        name: "A",
        text: "!A",
        criteria: "value <> 'A'"
      }, {
        name: "C",
        criteria: "value = 'C'",
        active:true
      }],true);
    });

    $("#btnActivateColumnFilter").click(function () {
      gridView.activateColumnFilters("textColumn", ["B","D"], true);
    });

    $("#btnDeactivateColumnFilter").click(function () {
      gridView.activateColumnFilters("textColumn", ["B","D"], false);
    });

    $("#btnToggleColumnFilter").click(function () {
      gridView.toggleColumnFilters("textColumn", ["A","C"]);
    });

    $("#btnToggleAllColumnFilter").click(function () {
      gridView.toggleAllColumnFilters("textColumn");
    });

    $("#btnActivateAllColumnFilter").click(function () {
      gridView.activateAllColumnFilters("textColumn",true);
    });

    $("#btnDeactivateAllColumnFilter").click(function () {
      gridView.activateAllColumnFilters("textColumn",false);
    });

    $("#btnRemoveColumnFilters").click(function () {
      gridView.removeColumnFilters("textColumn", ["B","D"]);
    });

    $("#btnClearColumnFilters").click(function () {
      gridView.clearColumnFilters("textColumn");
    });
  })
</script>

HTML

<ol>
<li><label>화면 초기상태에 textColumn에 A, B, C 필터가 있고 A 필터는 활성화 상태.</label></li>
<li><button type="button" id="btnSetFilter" class="btn btn-primary btn-xs">setColumnFilters()</button>
<label for="btnSetFilter">기존 C필터는 없어지고 D필터 추가</label></li>
<li><button type="button" id="btnAddFilter" class="btn btn-primary btn-xs">addColumnFilters()</button>
<label>C필터 추가, A필터는 새로운 필터로 교체</label></li>

<li><button type="button" id="btnActivateColumnFilter" class="btn btn-primary btn-xs">activateColumnFilters(active=true)</button>
<label for="btnActivateFilter">B, D Filter 활성화</label></li>
<li><button type="button" id="btnDeactivateColumnFilter" class="btn btn-primary btn-xs">activateColumnFilters(active=false)</button>
<label for="btnDeactivateFilter">B, D Filter 비활성화</label></li>
<li><button type="button" id="btnToggleColumnFilter" class="btn btn-primary btn-xs">toggleColumnFilters()</button>
<label for="btnToggleFilter">A, C Filter 반전</label></li>
<li><button type="button" id="btnToggleAllColumnFilter" class="btn btn-primary btn-xs">toggleAllColumnFilters()</button>
<label for="btnToggleAllFilter">전체 Filter 반전</label></li>
<li><button type="button" id="btnActivateAllColumnFilter" class="btn btn-primary btn-xs">activateAllColumnFilters(active=true)</button>
<label for="btnActivateAllFilter">전체 Filter 활성화</label></li>
<li><button type="button" id="btnDeactivateAllColumnFilter" class="btn btn-primary btn-xs">activateAllColumnFilters(active=false)</button>
<label for="btnDeactivateAllFilter">전체 Filter 비활성화</label></li>

<li><button type="button" id="btnRemoveColumnFilters" class="btn btn-primary btn-xs">removeColumnFilters()</button>
<label for="btnRemoveFilters">B, D Filter 제거</label></li>
<li><button type="button" id="btnClearColumnFilters" class="btn btn-primary btn-xs">clearColumnFilters()</button>
<label for="btnClearFilters">전체 Filter 제거</label></li>
</ol>

<div id="realgrid" style="width: 100%; height: 200px;"></div>

관련 데모 페이지

Column Filtering

API 참조