[javascript] SlickGrid의 툴바 커스터마이징

01 Dec 2023

javascript

SlickGrid은 JavaScript로 구현된 강력한 그리드 컴포넌트입니다. 통합된 툴바는 사용자가 그리드를 조작하고 필터를 적용하는 등의 작업을 수행할 수 있도록 도와줍니다. 이 기능을 보다 더 향상시키기 위해 SlickGrid의 툴바를 커스터마이징하는 방법에 대해 알아보겠습니다.

1. 툴바 추가

SlickGrid의 툴바를 커스터마이징하기 위해 먼저 그리드에 툴바를 추가해야 합니다. 다음은 SlickGrid 인스턴스를 생성하고 기본적인 설정을 하는 예제입니다:

var options = {
  enableCellNavigation: true,
  enableColumnReorder: false,
  headerRowHeight: 30,
  rowHeight: 30
};

var columns = [
  { id: "id", name: "ID", field: "id" },
  { id: "name", name: "이름", field: "name" },
  { id: "age", name: "나이", field: "age" },
];

var data = [
  { id: 1, name: "홍길동", age: 25 },
  { id: 2, name: "김철수", age: 30 },
  { id: 3, name: "이영희", age: 28 },
];

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

위 예제에서는 #myGrid 요소에 그리드를 렌더링하고, 데이터와 컬럼 정의를 설정하였습니다.

2. 툴바 커스터마이징

SlickGrid의 툴바를 커스터마이징하기 위해서는 slick.core.js 파일에 정의된 Slick.Controls.Toolbar 클래스의 인스턴스를 생성하고 원하는 커스텀 버튼을 추가해야 합니다.

var toolbar = new Slick.Controls.Toolbar(grid, document.querySelector('.slick-header-right'));
toolbar.addButton("btn-id", "버튼", function(e) {
  // 버튼 클릭 시 동작할 코드 작성
});

위 예제에서는 Slick.Controls.Toolbar 클래스의 인스턴스를 생성하고, .slick-header-right 클래스를 가진 요소에 툴바를 추가하였습니다. addButton() 메서드를 사용하여 버튼을 추가하고, 클릭 이벤트에 대한 동작을 정의할 수 있습니다.

3. 커스텀 버튼에 대한 동작 정의

추가한 커스텀 버튼에 대한 동작을 정의하기 위해서는 addButton() 메서드의 콜백 함수를 구현해야 합니다. 예를 들어, 버튼을 클릭할 때 선택된 행의 데이터를 삭제하는 코드를 작성해보겠습니다.

toolbar.addButton("delete-btn", "삭제", function(e) {
  var selectedRows = grid.getSelectedRows();
  for (var i = 0; i < selectedRows.length; i++) {
    // 선택된 행의 데이터 삭제
    var dataItem = grid.getDataItem(selectedRows[i]);
    data.splice(data.indexOf(dataItem), 1);
    grid.invalidateRow(selectedRows[i]);
  }
  grid.updateRowCount();
  grid.render();
});

위 예제에서는 getSelectedRows() 메서드를 사용하여 선택된 행의 인덱스를 가져온 다음, 해당 인덱스의 데이터를 삭제합니다. 그리드를 업데이트하고 재렌더링하여 변경된 데이터가 반영되도록 합니다.

4. 결론

SlickGrid의 툴바 커스터마이징을 통해 그리드를 보다 유연하게 조작할 수 있습니다. 커스텀 버튼을 추가하고 해당 버튼에 대한 동작을 정의하여 사용자 요구에 맞는 그리드 기능을 만들 수 있습니다.