본문 바로가기
Javascript

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

by Dokon Jang 2021. 7. 10.
반응형

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

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

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

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

 

keik/slickgrid-colgroup-plugin

SlickGrid plugin to create column group in a header. - keik/slickgrid-colgroup-plugin

github.com

 

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

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

 

keik/slickgrid-colgroup-plugin

SlickGrid plugin to create column group in a header. - keik/slickgrid-colgroup-plugin

github.com

 

 

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

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

 

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

1
2
3
4
5
6
7
8
9
10
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}
];
cs

 

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

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

 

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

반응형

댓글