Colin's Blog
[javascript] SlickGrid의 컬럼 재정렬

SlickGrid에서 컬럼을 재정렬하려면 “slick.headermenu.js” 플러그인을 사용해야 합니다. 이 플러그인은 헤더 영역에서 컬럼 재정렬을 위한 메뉴를 제공합니다.

우선, SlickGrid 및 “slick.headermenu.js” 플러그인을 페이지에 로드해야 합니다. 이를 위해서는 다음과 같이 스크립트 태그를 사용합니다.

<script src="slickgrid.js"></script>
<script src="slick.headermenu.js"></script>

그리고 컬럼을 포함하는 데이터 소스와 컬럼 정의 객체를 생성합니다.

var data = [
  { id: 1, name: "John", age: 25 },
  { id: 2, name: "Jane", age: 30 },
  //...
];

var columns = [
  { id: "id", name: "ID", field: "id" },
  { id: "name", name: "Name", field: "name" },
  { id: "age", name: "Age", field: "age" },
  //...
];

그 다음, SlickGrid 객체를 생성하고 컬럼 재정렬 옵션을 활성화합니다.

var options = {
  enableColumnReorder: true,
  //...
};

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

이제 그리드에 컬럼 재정렬을 위한 메뉴를 설정해야 합니다. 이를 위해서는 다음 코드를 추가합니다.

grid.registerPlugin(new Slick.Plugins.HeaderMenu());

이제 웹 페이지를 열어 헤더 영역의 컬럼에 오른쪽 클릭하면 컬럼 재정렬 메뉴가 나타날 것입니다. 사용자는 이 메뉴를 사용하여 컬럼의 순서를 변경할 수 있습니다.

위의 코드를 사용하여 SlickGrid에서 컬럼 재정렬 기능을 쉽게 구현할 수 있습니다. SlickGrid의 다양한 기능과 설정을 확인하려면 공식 문서를 참조하세요.

참고 문서:

© 2018 Colin. All rights reserved.