jqGrid - 그리드 헤더 병합(groupHeader)

1. 그룹 해더 정의

그룹 헤더는 아래의 그림과 같이 colHeader 위에 컬럼 헤더 위에 row를 추가해 복수의 colHeader를 그룹해서 명명하는 방식이다.

출처: http://1004lucifer.blogspot.com/2019/05/jqgrid-header-grouping.html 일부 발췌

 

2. 제한 사항

 - 정렬 가능한 컬럼은 그룹화와 호환되지 않으며, 둘개의 기능을 동시에 사용할 수 없다.
 - 컬럼 선택자는 헤더그룹과 호환되지 않는다.

 - addRowData나 delRowData와 같은 grid에 row를 추가하거나 삭제하는 경우, 헤더그룹과 호환이 어렵다.

 - 그리드를 그린 이후에 헤더그룹을 추가할 경우, 헤더 그룹에는 css가 적용되지 않을 수가 있다.

 - 그리드를 그린 이후에 그리드 너비(resize)를 조정할 경우 헤더 그룹의 너비가 올바르게 적용되지 않는다.

 

 

3. 그룹 해더 사용

jQuery("#grid").jqGrid('setGroupHeaders', {

  useColSpanStyle: false,

  groupHeaders:[

    {startColumnName: 'col1', numberOfColumns: 3, titleText: '<span>그룹헤더1</span>'},

    {startColumnName: 'col4', numberOfColumns: 2, titleText: '그룹헤더2'}

  ]

});

 

※ useColSpanStyle : 디폴트가 false, 그룹화 되지 않은 셀이 그위에 셀을 가져야 하는지 정의한다. true인 경우 컬럼이 하나로 합쳐진 것으로 간주 한다.   

※ startColumnName : 그룹화 헤더가 시작되는 필드(colModel과 같은 name)

※ numberOfColumns : startColumnName부터 시작하는 이 그룹에 포함된 컬럼의 갯수

 

 

4. 그룹 해더 삭제

jQuery("#grid").jqGrid("destroyGroupHeader");

 

 

 

 

 

 

참조 사이트

1004lucifer.blogspot.com/2019/05/jqgrid-header-grouping.html

[jqGrid] Header grouping 옵션/설정 설명

1004lucifer.blogspot.com/2019/04/jqgrid_65.html

[jqGrid] 기본 옵션 설명