Slickgrid 멀티헤더(slickgrid-colgroup-plugin)

Slickgrid에서 기본적으로 멀티헤더를 지원하지 않습니다.

그래서 멀티헤더를 지원하는 플러그인(slickgrid-colgroup-plugin)을 이용해야 합니다.

Slickgrid의 멀티헤더 플러그인은 slickgrid-colgroup-plugin으로 아래의 URL을 참고하세요.

https://github.com/keik/slickgrid-colgroup-plugin

keik/slickgrid-colgroup-plugin

 

1. 아래의 URL에서 slick.colgroup.js 소스를 Slickgrid 폴더의 plugins에 생성합니다.

https://github.com/keik/slickgrid-colgroup-plugin/blob/master/dist/slick.colgroup.js

keik/slickgrid-colgroup-plugin

 

 

2. 아래와 같이 플러그인 소스를 웹페이지에 추가하세요.

<script src="js/slickgrid/plugins/slick.colgroup.js"></script>

 

3. 컬럼 JSon에 children을 추가하여 멀티헤더를 만듭니다.

var columns = [
    {id: "no", name: "No", field: "no",},
    {id: "title", name: "Title", field: "title",  
        children: [
            {id: 'col1', name: 'col 1', field: 'col1', width:100},
            {id: 'col2', name: 'col 2', field: 'col2', width:100}
          ]
    },
    {id: "creator", name: "Creator", field: "creator", width:150, sortable: false}
];

 

4. SlickGrid에 플러그인을 추가합니다.

// SlickGrid 생성
var grid = new Slick.Grid("#myGrid", data, columns, options);
grid.registerPlugin(new Slick.Plugins.ColGroup())

 

5. Slickgrid에 멀티헤더 작용 예입니다.