개요
SlickGrid는 JavaScript 기반의 강력한 그리드 컴포넌트입니다. SlickGrid를 사용하면 대량의 데이터를 효율적으로 표시하고 상호작용할 수 있습니다. 하지만 기본적으로 모든 행이 펼쳐져 있는 상태로 표시되기 때문에, 긴 리스트의 경우 화면에 많은 양의 데이터가 표시되어 사용성이 저하될 수 있습니다. 이를 개선하기 위해 행을 펼치거나 접을 수 있는 기능을 구현해보겠습니다.
필수 요소
- SlickGrid: SlickGrid 컴포넌트가 필요합니다. SlickGrid는 jQuery에 의존하므로 jQuery도 함께 로드되어야 합니다.
구현
행 데이터 구조 변경
먼저, SlickGrid의 행 데이터를 펼치기/접기를 구현하기 용이하도록 구조를 변경해야 합니다. 각 행은 자식 행 데이터를 가질 수 있는 구조여야 합니다. 예를 들어, 다음과 같은 구조의 배열로 행 데이터를 정의할 수 있습니다.
var gridData = [
{ id: 1, name: 'John Doe', age: 30, children: [
{ id: 11, name: 'Jane Doe', age: 5 },
{ id: 12, name: 'Bob Doe', age: 3 }
]},
{ id: 2, name: 'Alice Smith', age: 25 }
// ...
];
행 펼치기/접기 아이콘 추가
SlickGrid에 행 펼치기/접기 아이콘을 추가해야 합니다. 이 아이콘은 기본적으로 행이 펼쳐진 상태인지 아니면 접혀진 상태인지 표시해야 합니다. 예를 들어, 펼침 상태인 행은 더하기(+) 모양의 아이콘을 가지며, 접힘 상태인 행은 마이너스(-) 모양의 아이콘을 가질 수 있습니다.
행 펼치기/접기 이벤트 처리
행 펼치기/접기 아이콘을 클릭했을 때 해당 행의 상태를 토글하고 자식 행들을 표시하거나 숨김 처리해야 합니다. 이를 위해 SlickGrid의 onClick 이벤트를 활용합니다.
grid.onClick.subscribe(function(e, args) {
var target = $(e.target);
// 아이콘 클릭 시 처리
if (target.hasClass('expand-icon')) {
var item = grid.getDataItem(args.row);
// 행의 펼침 상태 토글
item.expanded = !item.expanded;
// 자식 행 숨김/표시 처리
if (item.expanded) {
grid.getData().splice(args.row + 1, 0, ...item.children);
} else {
grid.getData().splice(args.row + 1, item.children.length);
}
// 그리드 업데이트
grid.invalidate();
grid.render();
}
});
결론
SlickGrid를 사용하여 행 펼치기/접기 설정을 구현하는 방법에 대해 알아보았습니다. 이를 통해 더 큰 데이터셋을 표시하고 사용자에게 편리한 인터페이스를 제공할 수 있습니다. SlickGrid의 다양한 기능을 활용하여 웹 애플리케이션의 그리드 부분을 강화시킬 수 있습니다.