SlickGrid는 JavaScript로 작성된 강력한 그리드 컨트롤입니다. 이 그리드는 다양한 기능을 제공하며, 그 중 하나가 컬럼 헤더 필터링입니다. 이 기능을 사용하면 사용자는 그리드에 표시된 데이터를 특정 조건에 맞게 필터링할 수 있습니다.

필터링을 원하는 컬럼 설정

먼저, SlickGrid에서 필터링을 원하는 컬럼에 대해 설정해야 합니다. 이를 위해 columns 배열에서 각 컬럼에 filterable: true 속성을 추가하면 됩니다. 예를 들어서, 다음과 같이 설정할 수 있습니다:

var columns = [
  { id: "name", name: "이름", field: "name", filterable: true },
  { id: "age", name: "나이", field: "age", filterable: true },
  // 추가적인 컬럼들...
];

필터링 이벤트 핸들링

필터링을 시작하기 위해 그리드 컨트롤에는 onHeaderCellRendered 이벤트 핸들러를 등록해야 합니다. 이 이벤트 핸들러는 컬럼 헤더가 그려질 때마다 호출됩니다. 이 핸들러를 통해 필터 UI 컨트롤을 생성하고 필터링 작업을 수행할 수 있습니다.

다음은 간단한 예시입니다:

grid.onHeaderCellRendered.subscribe(function(e, args) {
  var column = args.column;
  var $headerCell = args.node;

  if (column.filterable) {
    var $filterInput = $('<input type="text" />')
      .appendTo($headerCell)
      .on('input', function() {
        // 필터링 작업 수행
        var filterValue = $(this).val();
        grid.setFilter(column.field, filterValue);
        grid.getData().refresh();
      });
  }
});

위의 예시 코드에서는 헤더 셀을 렌더링할 때 컬럼이 filterable: true로 설정되어 있으면 텍스트 입력 필드를 생성하고, 입력값이 변경될 때마다 필터링 작업을 수행합니다. grid.setFilter 메소드를 사용하여 필터 값을 설정하고, grid.getData().refresh()를 호출하여 그리드의 데이터를 업데이트합니다.

필터링 결과 확인

필터링을 적용한 결과를 확인하려면 데이터를 다시 그리드에 바인딩해야 합니다. 이를 위해 grid.getData().refresh() 메소드를 호출하여 그리드의 데이터를 다시 로드합니다.

위에서 예시로 들었던 코드에서는 grid.getData().refresh()를 필터링 작업 수행 이후에 호출하도록 되어 있습니다.

참고 자료

• SlickGrid 공식 문서: https://github.com/6pac/SlickGrid

이 문서에서는 SlickGrid의 컬럼 헤더 필터링 기능에 대해 알아보았습니다. 이 기능을 사용하면 사용자는 그리드에 표시된 데이터를 쉽게 필터링할 수 있습니다.