[javascript] SlickGrid의 데이터 필터링

01 Dec 2023

javascript

SlickGrid은 웹 기반의 JavaScript 그리드 라이브러리로, 데이터의 표시, 정렬, 필터링을 간편하게 처리할 수 있습니다. 이번 글에서는 SlickGrid을 사용하여 데이터 필터링을 구현하는 방법에 대해 알아보겠습니다.

데이터 준비

먼저 SlickGrid을 사용하기 위해 필요한 데이터를 준비해야 합니다. 예를 들어, 다음과 같은 배열 형태의 데이터를 가지고 있다고 가정해보겠습니다.

var data = [
  { id: 1, name: 'John', age: 25 },
  { id: 2, name: 'Jane', age: 32 },
  { id: 3, name: 'Michael', age: 28 },
  { id: 4, name: 'Emily', age: 24 },
  { id: 5, name: 'David', age: 31 }
];

그리드 초기화

SlickGrid을 초기화하기 위해 필요한 작업들을 수행해야 합니다. 우선, 테이블을 만들기 위한 HTML 요소를 선택하고, 새로운 Slick.Grid 인스턴스를 생성해야 합니다.

var container = document.getElementById('myGrid');
var columns = [
  { id: 'id', name: 'ID', field: 'id' },
  { id: 'name', name: 'Name', field: 'name' },
  { id: 'age', name: 'Age', field: 'age' }
];

var options = {
  enableFiltering: true,
  enableCellNavigation: true
};

var grid = new Slick.Grid(container, data, columns, options);

필터링 적용

SlickGrid에서 제공하는 dataView 객체를 사용하여 필터링을 적용할 수 있습니다. dataView.setFilter() 함수를 사용하여 필터링을 수행할 수 있습니다. 이 함수는 데이터를 필터링하는 JavaScript 함수를 인수로 받습니다.

grid.onHeaderRowCellRendered.subscribe(function(e, args) {
  $(args.node).empty();
  $('<input type="text">')
    .data('columnId', args.column.id)
    .val(grid.getColumns()[args.column.id])
    .appendTo(args.node);
});

$('input').on('keyup', function(e) {
  var filterText = $(this).val();
  var columnId = $(this).data('columnId');
  grid.getOptions().dataView.setFilter(function(item) {
    return item[columnId].toLowerCase().indexOf(filterText.toLowerCase()) !== -1;
  });
  grid.invalidate();
});

위의 코드는 각 헤더 셀에 필터 입력란을 추가하고, 사용자의 입력에 따라 필터를 적용하도록 합니다. keyup 이벤트가 발생할 때마다 데이터를 필터링하고, 변경된 데이터를 다시 그리드에 반영합니다.

결과 확인

이제 웹 브라우저에서 페이지를 로드하고 데이터 필터링이 동작하는지 확인해보세요. 각 열의 헤더 셀에 있는 필터 입력란에 원하는 값을 입력하면 해당 값과 일치하는 데이터만 표시될 것입니다.

마무리

SlickGrid을 사용하여 데이터 필터링을 구현하는 방법에 대해 알아보았습니다. SlickGrid은 강력한 그리드 라이브러리로 다양한 기능을 제공합니다. 데이터 필터링 외에도 정렬, 편집, 선택 등 다양한 기능을 사용할 수 있습니다.

더 자세한 내용은 SlickGrid 공식 문서를 참조하세요.