[jqGrid] Frozen Columns 기본설정 설명

 [ jqGrid 한글 API 문서 링크 ]

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



Frozen Columns (열 고정)

설정
 - 먼저 고정시킬 컬럼을 설정해야 하며, 아래와 같이 colModel 에서 frozen:true 로 설정을 한다.

...
jQuery("#grid").jqGrid({
...
   colNames: ['Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
   colModel: [
         {name: 'name', index: 'name', width: 70, frozen:true },
         {name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date',
            formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y', frozen:true},
         {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('setFrozenColumns');

* 고정된 설정은 차례대로 설정해야 하며, 고정속성에 순서가 따로 없는경우 마지막 위치가 사용이 된다.
아래 코드는 첫번째 컬럼대신 세번째 컬럼만 고정이 된다.

..
jQuery("#grid").jqGrid({
...
   colNames: ['Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
   colModel: [
         {name: 'name', index: 'name', width: 70, frozen:true },
         {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, frozen:true},
         {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('setFrozenColumns');

Destroy
 - destroyFrozenColumns 메소드를 사용하여 그리드의 frozenColumns를 삭제할 수 있으며, 이 메소드는 setupFrozenColums를 호출하기 전에 그리드 구성을 복원한다.

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

동적 설정
 - 고정 열을 동적으로 변경할 수 있으며, 이 경우 첫 번째 destroyFrozenColumns 메소드를 호출하여 새로운 고정 된 속성을 설정하고 다시 setFrozenColumns를 호출해야 한다.
1004lucifer
아래는 invdate 열을 고정시키는 방법이다.

jQuery("#mybutton").click(function(){
   jQuery("#grid")
   .jqGrid('destroyFrozenColumns');
   .jqGrid('setColProp','invdate', {frozen:true});
   .jqGrid('setFrozenColumns');
   .trigger('reloadGrid', [{current:true}]);
});

* 현재 고정된 열을 새로고침하기 위해 trigger('reloadGrid')를 호출해야 한다.



제한사항
 - 아래와 같은 상황에서는 열고정을 사용할 수 없다.
1004lucifer
1. TreeGrid 활성화
2. SubGrid 활성화
3. cellEdit 활성화
4. 인라인편집을 사용하는경우
5. 정렬가능한 열이 활성화된 경우 - 그리드의 sortable 속성이 설정된경우
6. scroll 이 true or 1로 설정된경우
7. Data Grouping 활성화
8. footer row 활성화





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