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

 [ jqGrid 한글 API 문서 링크 ]

실습 jqGrid 버전: CDN 제공하는 v4.6 버전으로 테스트



Header grouping (헤더 그룹화)


공통규칙

 - 헤더 그룹화는 그리드 헤더 row위에 사용자가 필요한 방식으로 그룹화된 컬럼을 추가하는 방식이며, 일반적인 구현은 아래 그림과 같다.
1004lucifer

colSpan 활성/비활성 방식으로 2가지 방법의 그룹화를 지원한다.
colSpan 비활성 - (기본값) 그룹을 가지지 않은 헤더는 그 위에 추가의 셀을 가진다.
solSpan 활성 - 그룹화되지 않은 컬럼 위에 추가 셀이 없고 하나의 컬럼으로 간주된다.





제한사항

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





헤더 그룹화 사용

 - 그룹화는 grid가 생성된 후에 사용해야 하며, setGroupHeaders 라는 메소드를 다음과 같이 사용한다.

...
jQuery("#grid").jqGrid({
...
   colNames: ['Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
   colModel: [
         {name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date',
            formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y'},
         {name: 'name', index: 'name', width: 70 },
         {name: 'amount', index: 'amount', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'tax', index: 'tax', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'total', index: 'total', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'closed', index: 'closed', width: 75, align: 'center', formatter: 'checkbox',
            edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}},
         {name: 'ship_via', index: 'ship_via', width: 100, align: 'center', formatter: 'select',
            edittype: 'select', editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime'}},
         {name: 'note', index: 'note', width: 70, sortable: false}
    ],
    rowNum: 10,
    rowList: [5, 10, 20],
 ...
});
jQuery("#grid").jqGrid('setGroupHeaders', {
  useColSpanStyle: false, 
  groupHeaders:[
 {startColumnName: 'amount', numberOfColumns: 3, titleText: '<em>Price</em>'},
 {startColumnName: 'closed', numberOfColumns: 2, titleText: 'Shiping'}
  ]
});
...

setGroupHeaders 옵션
 - 이 메소드는 grid에 헤더그룹을 생성한다. 메소드가 호출되면 그룹화 헤더가 생성된 이후에 그룹헤더 옵션을 grid 파라메터로 저장한다. 이 grid 파라메터를 groupHeader라고 하며 이후에 getGridParam 으로 요청할 수 있고, destroyGroupHeader 메소드는 호출하지 않는다. (해석이 어려움.. 아는분은 댓글로좀..ㅠ)

setGroupHeader 메소드는 다음과 같은 옵션이 있다.
1004lucifer

Property	Type	Description	Default
useColSpanStyle	boolean	그룹화 되지 않은 셀이 그위에 셀을 가져야 하는지 정의한다. (true 인경우 컬럼이 컬럼이 하나로 합쳐진 것으로 간주)	false
groupHeaders	array	헤더 그룹화 텍스트 및 규칙을 설명하는 객체. 아래 모든요소에 대한 배열리스트가 있다..	empty

groupHeaders 요소 옵션
1004lucifer

Property	Type	Description
startColumnName	string	그룹화 헤더가 시작되는 필드(colModel과 같은 name)
numberOfColumns	integer	startColumnName 부터 시작하는 이 그룹에 포함된 컬럼의 갯수. 숨겨진 컬럼이 있는경우 스킵을 하며, 그룹에는 필드가 포함되지 않지만 메소드는 해당필드를 카운트한다.
titleText	string	이 그룹의 텍스트이며, HTML 태그가 포함될 수 있다.

이전 예제를 사용하여 useColSpanStyle 을 true로 변경하면 아래와 같이 보여진다.

...
jQuery("#grid").jqGrid('setGroupHeaders', {
  useColSpanStyle: true, 
  groupHeaders:[
 {startColumnName: 'amount', numberOfColumns: 3, titleText: '<em>Price</em>'},
 {startColumnName: 'closed', numberOfColumns: 2, titleText: 'Shiping'}
  ]
});
...

그룹 헤더 삭제

 - 그룹헤더를 삭제하려면 destroyGroupHeader 메소드를 호출하면 되며, 헤더를 초기상태로 되돌린다.

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

이 메소드는 선택적 옵션이 하나가 있는데 boolean 상태이며 기본값 true 이다.

...
jQuery("#grid").jqGrid('destroyGroupHeader', false);
...

위와같이 false로 설정된경우 초기 grid 헤더를 복원하지만 그룹헤더가 생성될 때의 그룹화 헤더 옵션은 삭제하지 않는다.
그룹헤더 파라메터의 다른 단어를 삭제된 그룹헤더 대신에 사용할 수 있다. (뭔말인지 모르겠네..ㅠ)


참고
 - http://www.trirand.com/jqgridwiki/doku.php?id=wiki:groupingheadar