[jqGrid] colNames 손쉽게 설정하기

- colNames 손쉽게 설정하기 -

---

jqGrid를 설정할때 colNames와 colModel 옵션을 넣어주는 부분이 있는데,

보통 아래와 같이 따로 변수로 관리를 해두고 옵션에 넣어두는 식으로 사용하고는 한다.

var colNames =  ['게시글관리번호', '번호', '제목', '작성자', '날짜', '조회수'];
var colModel =         
  [{name:'bbsMgtNo', index:'bbsMgtNo',  align:'center', hidden:true},
  {name:'bbsNum',    index:'bbsNum',    align:'left',   width:'12%'},
  {name:'bbsTitle',  index:'bbsTitle',  align:'center', width:'50%'},
  {name:'bbsWriter', index:'bbsWriter', align:'center', width:'14%'},
  {name:'bbsDate',   index:'bbsDate',   align:'center', width:'12%'},
  {name:'bbsHit',    index:'bbsHit',    align:'center', width:'12%'}];
 
$(function() {
  $("#mainGrid").jqGrid({
    height: 261,
    width: 1019,
    colNames: colNames,
    colModel: colModel,
    rowNum : 10,
    pager: "pager" 
  });
});

 

하지만 구조가 바뀔때마다 colName과 colModel을 두곳을 계속해서 바꾸는게 귀찮기도 하고 실수가 발생할 여지가 있기때문에 그냥 쉽게 아래와 같이 array.map 메서드를 활용해주면 간편하다.

 

var colOptions =  [
    {colName : '게시글관리번호', name:'bbsMgtNo', index:'bbsMgtNo', align:'center', hidden:true},
    {colName : '번호', name:'bbsNum',    index:'bbsNum',    align:'left',   width:'12%'},
    {colName : '제목', name:'bbsTitle',   index:'bbsTitle',  align:'center', width:'50%'},
    {colName : '작성자', name:'bbsWriter',   index:'bbsWriter',  align:'center', width:'14%'},
    {colName : '날짜', name:'bbsDate',     index:'bbsDate',    align:'center', width:'12%'},
    {colName : '조회수', name:'bbsHit',    index:'bbsHit',   align:'center', width:'12%'}
];
 
$(function() {
  $("#mainGrid").jqGrid({
    height: 261,
    width: 1019,
    colNames: colOptions.map(function(item){return item.colName;}),
    colModel: colOptions,
    rowNum : 10,
    pager: "pager" 
  });
});

 

근데 이 방법 외에도 colmodel option 에는 label 옵션이 존재하는데,

어쩌면 label 옵션을 사용하는게 더 나을수도 있다.

 

https://mine-it-record.tistory.com/290

[JavaScript] jqGrid 다양한 옵션 모음 (colmodel, option, event)