[javascript] SlickGrid의 헤더 그룹화

01 Dec 2023

javascript

SlickGrid은 JavaScript로 구현된 강력한 그리드 컴포넌트입니다. 그러나 원본 버전에서는 헤더 그룹화 기능이 기본적으로 제공되지 않습니다. 이 기능을 추가하려면 몇 가지 작업을 해야합니다.

1. 헤더 그룹화 옵션 활성화

SlickGrid에서 헤더 그룹화 옵션을 활성화하려면 다음과 같이 options 객체에 enableGrouping 속성을 추가합니다.

var options = {
  enableGrouping: true,
  // 다른 옵션들...
};

var grid = new Slick.Grid("#myGrid", data, columns, options);

2. 헤더 그룹화 대상 지정

헤더 그룹화를 적용할 컬럼을 지정해야합니다. 이를 위해 각 컬럼의 header 속성에 group 객체를 추가합니다. group 객체는 title 속성을 통해 생성될 그룹의 제목을 지정합니다.

var columns = [
  {
    id: "column1",
    name: "Column 1",
    field: "column1",
    header: {
      group: {
        title: "Group 1"
      }
    }
  },
  // 다른 컬럼들...
];

3. 그룹 헤더 렌더링

마지막으로 그룹 헤더를 렌더링하는 함수를 작성해야합니다. 이 함수는 grid 객체의 onGroupedColumnsRendered 이벤트 핸들러로 등록합니다.

grid.onGroupedColumnsRendered.subscribe(function () {
  var headerRows = $(".slick-header-column-row");

  headerRows.each(function (index, row) {
    var rowElement = $(row);
    var groupHeaders = rowElement.find(".slick-header-group");

    var firstGroupHeader = groupHeaders.first();
    var headerText = firstGroupHeader.text();
    var colspan = groupHeaders.length;

    var groupHeaderHtml = "<div class='slick-group-header'>" + headerText + "</div>";
    rowElement.prepend($(groupHeaderHtml).attr("colspan", colspan));
  });
});

위의 코드는 각 헤더 그룹의 첫 번째 헤더를 선택하여 그룹 헤더를 생성하고, 해당 행 앞쪽에 삽입하는 기능을 수행합니다.

요약

SlickGrid의 헤더 그룹화를 위해 위와 같은 단계를 수행해야 합니다. 이를 통해 데이터를 더욱 효과적으로 그룹화하고 사용자 친화적인 그리드를 구현할 수 있습니다.

참고 자료: