jqGrid 4.2.0 Header Grouping 지원

이전 포스트 에서는 직접 만들어 썼던 것이

jqGrid가 4.2.0으로 업데이트 되면서 공식적으로 Header Grouping을 지원한다.

최신버전을 사용하지 못 하는 분들만 이전 포스트를 참고해 주세요.

사용법은 간단하다.

...
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 API를 호출해서 groupHeaders 배열을 생성해 주면 끝.
위의 groupHeaders 값을 설명하면
   startColumnName : 묶기 시작할 colModel 에서 정한 name
   numberOfColumns : 묶을 칸 수
   titleText : 그룹핑한 헤더에 출력할 이름