들어가며

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

이론

  1. FilterAction은 기본 설명

    • FilterAction은 Filter와 같이 스스로 동작하는 것이 아니고, FilterAction을 클릭 시 발생하는 GridBase.onFilterActionClicked() 이벤트를 통해서 동작할 내용을 개발자가 구현하는 기능입니다.
    • 기본적인 동작을 하는 Filter와 달리 부가적인 행동(다이얼로그 표시 등)을 통해서 Filtering을 결정할 때 사용할 수 있습니다.
    • 체크박스를 포함하지 않습니다.
    • Filter 목록의 상단에 표시됩니다. 하지만, 표시된(hidden이 false) Filter가 없고, FilterAction이 하나만 존재할 경우 바로 해당 FilterActions의 이벤트가 발생합니다.

  2. FilterAction을 생성하는 방법은 다음과 같습니다.

    • 컬럼 선언 시 filter속성 지정

      gridView.setColumns([{
  fieldName: "textField",
  filterActions : [{   
    ...
  }]      
}]);

    • GridBase.setColumnFilterActions()함수로 FilterAction 정의

      해당 컬럼의 기존 모든 FilterAction이 삭제되고 새롭게 생성됩니다.

      gridView.setColumnFilterActions(column, actions);

  3. FilterAction을 제거하는 방법은 다음과 같습니다.

  4. FilterAction이 클릭될 때 onFilterActionClicked 이벤트가 발생합니다.

    gridView.onFilterActionClicked = function(grid, column, action, x, y) { ... }

실습

  1. Grid, Provider용 전역변수 선언

     var gridView;
 var dataProvider;

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

    TextColumn에 FilterAction을 정의하고, Filter에 A B C D 필터를 모두 hidden속성을 true로 정의합니다. 위에서 설명한 바와 같이 Filter Icon클릭 시 바로 이벤트를 호출하기 위해서입니다.

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

 gridView.setColumns([{
   fieldName: "textField",
   name: "textColumn",
   width: 200,
   header: {text: "Text Column"},
   filterActions : [{
     name: "filterAction1",
     text: "filter 선택" 
   }],
   filters : [{
     name: "A",
     criteria: "value = 'A'",
     hidden: true
   }, {
     name: "B",
     criteria: "value = 'B'",
     hidden: true       
   }, {
     name: "C",
     criteria: "value = 'C'",
     hidden: true      
   }, {
     name: "D",
     criteria: "value = 'D'",
     hidden: true      
   }]
 }, {
   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
 }]);

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

  3. onFilterActionClicked() 콜백 함수 구현

     
 gridView.onFilterActionClicked = function(grid, column, action, x, y) {
   var filterName = prompt("A에서 D사이의 글자를 입력해주세요.", "A");
   if (filterName.length != 1 || filterName < "A" || filterName > "D") {
     alert("A에서 D까지 한글자만 입력바랍니다.")
     return;
   }

   gridView.activateAllColumnFilters(column, false); // 기존 Filter를 모두 비활성화
   gridView.activateColumnFilters(column, filterName, true); // 입력한 filterName을 활성화
 };

실행화면

전체 소스코드

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"},
      filterActions : [{
        name: "filterAction1",
        text: "filter 선택" 
      }],
      filters : [{
        name: "A",
        criteria: "value = 'A'",
        hidden: true
      }, {
        name: "B",
        criteria: "value = 'B'",
        hidden: true       
      }, {
        name: "C",
        criteria: "value = 'C'",
        hidden: true      
      }, {
        name: "D",
        criteria: "value = 'D'",
        hidden: true      
      }]
    }, {
      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
    }]);

    gridView.onFilterActionClicked = function(grid, column, action, x, y) {
      var filterName = prompt("A에서 D사이의 글자를 입력해주세요.", "A");
      if (filterName.length != 1 || filterName < "A" || filterName > "D") {
        alert("A에서 D까지 한글자만 입력바랍니다.")
        return;
      }

      gridView.activateAllColumnFilters(column, false);
      gridView.activateColumnFilters(column, filterName, true);
    };

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

관련 데모 페이지

API 참조