[JqGrid] Frozen Columns (열 고정)

1. colModel에 frozen: true 옵션 추가

가장 왼쪽 컬럼부터 이어서 설정해야함.

띄워서 설정할 경우 마지막 컬럼(가장 오른쪽)과 이어진 컬럼만 고정된다.

jQuery("#grid").jqGrid({
   datatype: "local", 
   colNames: ['Col1', 'Col2', 'Col3'],
   colModel: [
         {name: 'Col1', index: 'Col1', width: 70, frozen:true },
         {name: 'Col2', index: 'Col2', width: 70, frozen:true},
         {name: 'Col3', index: 'Col3', width: 70 }
    ],
    rowNum: 10,
    rowList: [5, 10, 20],
// ...
});

 

2. setFrozenColumns 함수 호출

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

 

3. destroyFrozenColumns

frozen된 컬럼을 제거

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

 

4. 동적 설정

1~3번을 이용해 Frozen속성을 제거하고 다시 설정 할 수 있다.

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

 

* frozen 속성을 사용할 수 없는 경우

• TreeGrid 활성화
• SubGrid 활성화
• cellEdit 활성화
• 인라인편집을 사용
• sortable 활성화
• scroll 이 true or 1로 설정
• Data Grouping 활성화
• footer row 활성화