jqgird sort, filter (colmodel name/index, colName)

1. name과 index

jqGrid의 colmodel에서

-name : 서버로 부터 넘어오는 data와 변수명을 맞춰야함. colName을 지정하지 않으면 name으로 생성됨.
-index : jqGrid에서 접근할 이름(sort, filter에 기본적으로 사용). 미지정시 name을 따라간다.

 

var colModel =  [
    {colName : 'col1', name:'col1', index:'col1', align:'center', sortable: true},
    {colName : 'col2', name:'col2',    index:'col2',    align:'left', sortable: true},
];

*colName

눈에 보이는 필드네임으로 지정하지 않으면 name을 따라가는데 colmodel에 임의로 colName같은 값을 추가하여 mapping하여 사용할 수 있다.

var colNames = colModel.map(function(item){return item.colName;}),

 

2. filter sort

filter나 sort에 사용되는 값은 index인데 실제 데이터는 name을 따라가기 때문에 

index와 name이 다를 때는 동작하지 않는다.

 

Sort

OnSortCol 옵션에 사용할 function명을 넣어준다.

  $("#Grid").jqGrid({
    height: 300,
    width: 600,
    colNames: colNames,
    colModel: colModel,
    rowNum : 10,
    OnSortCol: beforeSort,
  });

name으로 sort하는 함수

function beforeSort(colName, conIndex, sortorder) {
  grid = $(this);
  let col = grid.jqGrid("getGridParam", "colModel")[conIndex]
  grid.jqGrid('setGridParam', {sortname: col.name, sortorder: sortorder}).trigger('reloadGrid', [{page: 1}]);
  return false;
}

 

filter

filterToolbar의 beforeSearch 옵션에 사용할 function 명을 넣어준다.

name으로 filter하는 함수

$('#Grid').jqGrid('filterToolbar', { stringResult: true, beforeSearch: searchPreparation });

function searchPreparation(grid) {
  if (grid == undefined)
      grid = $(this);
  else
      grid = $(grid);
  var postData = grid.jqGrid('getGridParam', 'postData');
  var searchData = jQuery.parseJSON(postData.filters);
  var gridCol = grid.getGridParam("colModel");
  for (var i = 0; i < searchData.rules.length; i++) {
      for (var j = 0; j < gridCol.length; j++) {
          if (gridCol[j].index != gridCol[j].name && searchData.rules[i].field == gridCol[j].index) {
              searchData.rules[i].field = gridCol[j].name;
              break;
          }
      }
  }
  grid.jqGrid('setGridParam', { postData: { filters: JSON.stringify(searchData)} });
  return false;
}