На каком событии jQgrid я могу применить изменения к jQgrid

Question

Я хочу загрузить данные jQgrid (т. Е. Отсортированный столбец, порядок сортировки, страница) из файла cookie, чтобы jQgrid мог принимать изменения из файла cookie , когда пользователь снова открывает страницу, код должен принимают изменения от cokkie являются следующие:

function loadGridFromCookie(name) 
    { 
     var c = $.cookie(name /*+ window.location.pathname*/); 
     if (c == null) 
      return; 
     gridInfo = $.parseJSON(c); 
     var grid = $("#" + name); 
     grid.jqGrid('setGridParam', { sortname: gridInfo.sortname }); 
     grid.jqGrid('setGridParam', { sortorder: gridInfo.sortorder }); 
     grid.jqGrid('setGridParam', { page: gridInfo.page }); 
     grid.trigger("reloadGrid"); 
    } 

весь мой код:

<script type="text/javascript"> 
    function getData(jqGridParams) 
    { 
     var params = new Object(); 
     params.pageIndex = jqGridParams.page; 
     params.pageSize = jqGridParams.rows; 
     params.sortIndex = jqGridParams.sidx; 
     params.sortDirection = jqGridParams.sord; 
     params._search = jqGridParams._search; 
     if (jqGridParams.filters === undefined) 
      params.filters = null; 
     else 
      params.filters = jqGridParams.filters; 

     // AJAX call 
     $.ajax({ 
      url: 'WSAjax.asmx/GetDataForGrid', 
      type: "POST", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      data: JSON.stringify(params), 
      success: function (data, textStatus) 
      { 
       if (textStatus == "success") 
       { 
        var grid = $("#ItemGrid")[0]; 
        grid.addJSONData(data.d); 
       } 
      }, 
      error: function (jqXHR, textStatus, errorThrown) 
      { 
       alert(textStatus, errorThrown); 
      } 
     }); 
    } 

    function saveGridToCookie(name, grid)  // save data into cookie 
    { 
     var gridInfo = new Object(); 
     //name += window.location.pathname; 
     gridInfo.sortname = grid.jqGrid('getGridParam', 'sortname'); 
     gridInfo.sortorder = grid.jqGrid('getGridParam', 'sortorder'); 
     gridInfo.page = grid.jqGrid('getGridParam', 'page'); 
     //$('#Hidden').val(JSON.stringify(gridInfo)); 
     //alert($('#Hidden').val()); 
     $.cookie(name, JSON.stringify(gridInfo), {expires: 3}); 
    } 

    function loadGridFromCookie(name) // load data from cookie 
    { 
     var c = $.cookie(name /*+ window.location.pathname*/); 
     if (c == null) 
      return; 
     var gridInfo = $.parseJSON(c); 
     var grid = $("#" + name); 
     grid.jqGrid('setGridParam', { sortname: gridInfo.sortname }); 
     grid.jqGrid('setGridParam', { sortorder: gridInfo.sortorder }); 
     grid.jqGrid('setGridParam', { page: gridInfo.page }); 
     grid.trigger("reloadGrid"); 
    } 

    // Jquery code 
    $(document).ready(function() { 
     var oItemGrid = $("#ItemGrid"); 
     oItemGrid.jqGrid({ 
      datatype: 
       function (jqGridParams) { 
       getData(jqGridParams); 
       }, 
      colNames: ['Type', 'Name', 'Desc'], 
      colModel: [ 
       { name: 'Type', index: 'Type', width: 40 }, 
       { name: 'Name', index: 'Name', width: 40 }, 
       { name: 'Desc', index: 'Desc', width: 40, sortable: false}], 
      autowidth: true, 
      height: 'auto', 
      rowNum: 10, 
      rowList: [10, 20, 30, 40], 
      viewrecords: true, 
      gridview: true, 
      autoencode: true, 
      ignoreCase: true, 
      caption: 'Remember Sorting and Filtering Functionality', 
      pager: '#IGPager', 
      loadComplete: function(data) 
      { 
       var cookieval = $.cookie("ItemGrid"); 
       if (cookieval != null) 
       { 
        alert("From loadComplete: " + cookieval); 
        loadGridFromCookie("ItemGrid"); 
       } 
      }, 
      gridComplete: function() { 
       var prvData = $.cookie("ItemGrid"); 
       alert("stored Data from cookie : " + prvData); 
       loadGridFromCookie("ItemGrid", gridInfo); 
       saveGridToCookie("ItemGrid", $("#ItemGrid")); 
       var storeval = $.cookie("ItemGrid"); 
       alert("From gridComplete: " + storeval); 
      } 
      //loadonce: true 
     }).jqGrid('navGrid', '#IGPager', { edit: false, add: false, del: false }, {}, {}, {}, {}, {}); 
    }); 
</script> 

Answer 1

Вы должны быть в состоянии получить эти параметры до первоначального объявления сетки и установить эти параметры во время объявления сетки, а не пытаясь сделать это во время события сетки.

На основе исходной информации в вопросе я бы рекомендовал рефакторинга loadGridFromCookie к:

function loadGridFromCookie(name) 
{ 
    var c = $.cookie(name /*+ window.location.pathname*/); 
    if (c == null) 
     return null; 
    return $.parseJSON(c); 
} 

Затем используйте результат для инициализации сетки в документе готовый обработчик:

var oItemGrid = $("#ItemGrid"); 
var gridSettings = loadGridFromCookie("ItemGrid"); 
oItemGrid.jqGrid({ 
    sortname: gridInfo ? gridInfo.sortname : "Type", 
    sortorder: gridInfo ? gridInfo.sortorder : "ASC", 
    page: gridInfo ? gridInfo.page : 1, 
    ... 
}); 

Если это не возможно, jqGrid поддерживает событие beforeRequest, которое должно выполнять эту работу, но вам может потребоваться удалить вызов reloadGrid, так как это может привести к тому, что сетка будет загружена дважды.

Кроме того, если вы хотите запрограммировать повторную сортировку сетки, лучше использовать метод sortGrid, так как это правильно установит сортировку для заголовка столбца, а также перезагрузит сетку, если для конечного параметра установлено значение true.

например.

grid.jqGrid('setGridParam', { sortorder: gridInfo.sortorder, page: gridInfo.page }) 
    .jqGrid('sortGrid', gridInfo.sortname, true);