[javascript] SlickGrid의 숫자 필터링

01 Dec 2023

javascript

SlickGrid은 JavaScript로 작성된 강력한 그리드 컴포넌트입니다. 다양한 필터링 옵션을 제공하며, 숫자 필터링도 지원합니다. 이번 글에서는 SlickGrid을 사용하여 숫자 필터링을 구현하는 방법을 알아보겠습니다.

필터 함수 작성

SlickGrid에서 숫자 필터링을 하기 위해서는 사전에 필터 함수를 작성해야 합니다. 필터 함수는 Slick.Data.DataView 객체의 setFilter 메소드에 전달되어 사용됩니다.

아래 코드는 숫자 필터링을 하기 위한 간단한 예제입니다. 사용자는 숫자 범위를 입력하고, 해당 범위에 속하는 행만 필터링됩니다.

function numberRangeFilter(item, args) {
  var from = parseFloat(args.from);
  var to = parseFloat(args.to);
  var value = parseFloat(item[args.column.field]);

  if (isNaN(from) && isNaN(to)) {
    return true;
  } else if (isNaN(from) && value <= to) {
    return true;
  } else if (isNaN(to) && value >= from) {
    return true;
  } else if (value >= from && value <= to) {
    return true;
  }

  return false;
}

필터 적용

숫자 필터링을 적용하기 위해서는 먼저 Slick.Data.DataView 객체를 생성하고 원하는 데이터를 이 객체에 할당해야 합니다.

var dataView = new Slick.Data.DataView();
dataView.setItems(data);

그리고 아래와 같이 setFilter 메소드를 사용하여 필터 함수를 적용하면 됩니다.

dataView.setFilter(numberRangeFilter);

필터 값 변경

사용자가 숫자 필터링의 범위를 변경하면, 필터 함수를 다시 호출하여 필터를 업데이트해야 합니다. 아래와 같이 필터 값을 변경하고 필터 함수를 호출하면 필터링이 업데이트됩니다.

dataView.setFilterArgs({from: 10, to: 20});
dataView.refresh();

필터 함수 작성

필터 적용

필터 값 변경

참고 자료