Translate

2019년 5월 21일 화요일

[jqGrid] Frozen Columns 기본설정 설명







실습 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


댓글 4개 :

  1. 작성자가 댓글을 삭제했습니다.

    답글삭제
    답글
    1. 네~ 괜찮습니다. 질문글 올려주세요.
      되도록 (코드와 같이)상세하게 질문주시면 답변 달기가 좋을것 같네요 ;)

      삭제
    2. 작성자가 댓글을 삭제했습니다.

      삭제
    3. 아니요. 메일로 개인적으로 물어보지 마시고 여기에 올려주세요.
      왜 그랬는지 모르겠지만 원래 댓글을 지운것에 대해서도 기분이 안좋습니다.
      개인적으로 물어보고 싶은거라면 교수/선배/사수에게 질문을 해주시면 좋을것 같고..
      여기에 질문을 올리고 제가 답변을 드리면 모든 분들이 댓글을 같이 볼 수 있으며 좋겠습니다.

      삭제