jqGrid getGridParam（'colModel'）缺少信息

Question

我想捕獲我的jqGrid的colModel，當頁面卸載並將其存儲在會話中時，下次用戶進入頁面時可以自動加載。但是，（'#contract_grid'）getGridParam（'colModel'）返回的信息缺少網格列的searchoptions中的部分或全部信息。

任何想法爲什麼這是或如何捕獲完整的colModel？網格在初始加載時效果很好，但沒有其他searchoptions參數，當我從存儲在會話中的colModel刷新頁面時，濾鏡欄功能/菜單不起作用。

創建默認colModel網格

var defaultColModel = 
[ 

    {name:'REQUESTID' 
     ,index:'requestID' 
     ,label:'Request ID' 
     ,search:true 
     ,stype:'text' 
     ,width:75 
     ,key:true 
     ,hidden:false 
    }, 
    {name:'REQUESTEDDATE' 
     ,index:'requestedDate' 
     ,label:'Request Date' 
     ,sorttype:"date" 
     ,search:true 
     ,width:50 
     ,searchoptions:{ 
      dataInit:function(el){jQuery(el).daterangepicker(
          { 
          arrows:false 
          , dateFormat:'yy-mm-dd' 
          , onClose: function(dateText, inst){ jQuery("#contract_grid")[0].triggerToolbar();} 
          , onOpen: function() { 
           jQuery('div.ui-daterangepickercontain').css({"top": jQuery('#mouseY').val() + 'px', "left": jQuery('#mouseX').val() + 'px' }); 
          } 

         }); 
       } 
      } 
     ,hidden:false 
    }, 

    {name:'BUSINESSOWNERPERSONID' 
     ,index:'businessOwnerPersonID' 
     ,label:'Business Owner' 
     ,search:true 
     ,stype:'select' 
     ,width:100 
     ,hidden:false 
     ,searchoptions: { 
      dataUrl: 'cfc/com_common.cfc?method=getAjxPeople&role=businessOwnerPersonID', 
      buildSelect: function(resp) { 
       var sel= '<select><option value=""></option><option value="7583,1636">My Reports</option>'; 
       var obj = $.parseJSON(resp); 
       $.each(obj, function() { 
        sel += '<option value="'+this['lk_value']+ '">'+this['lk_option'] + "</option>"; // label and value are returned from Java layer 
       }); 
       sel += '</select>'; 
       return sel; 
      },   
      dataEvents: [{ 
       type: 'change', 
       fn: function(e) { 
        alert(this.value) 
       } 
      }] 
     } 
    } 
]; 

當用戶從頁面導航離開，節約電網會議，以便它加載，當他們回來

$(window).on('beforeunload', function(){ 
    takeSnapshot();  
}); 
function takeSnapshot(){ 
var gridInfo = new Object(); 
    gridInfo.colModel = jQuery('#contract_grid').getGridParam('colModel'); 
    gridInfo.postData = jQuery('#contract_grid').jqGrid('getGridParam', 'postData'); 
    var snapshotData = JSON.stringify(gridInfo); 

$.ajax({ 
    url: "actions/act_filter.cfc?method=takeSnapshot", 
    type: "POST", 
    async: false, 
    data: {gridName:'contract_grid' 
      ,gridParamName:'contractGridParams' 
      ,filterData:snapshotData 

    } 
}); 

}

創建網格變量

var myGrid = jQuery("#contract_grid").jqGrid({ 
    url:   'cfc/com_ajxRequestNew.cfc?method=getReqJSON&returnformat=json', 
    datatype:  'json', 
    postData:  {filters: myFilters}, 
    mtype:   'POST', 
    search:   true, 
    colModel:  defaultColModel, 
    altRows:  true, 
    emptyrecords: 'NO CONTRACTS FOUND', 
    height:   400, 
    width:   1200, 
    sortname:  lastSortName, 
    sortorder:  lastSortOrder, 
    page:   lastPage, 
    pager:   jQuery('#report_pager'), 
    rowNum:   lastRowNum, 
    rowList:  [10,20,50,100], 
    viewrecords: true, 
    clearSearch: false, 
    caption:  "Contracts Dashboard", 
    sortable:  true, 
    shrinkToFit: false, 
    ajaxSelectOptions: {type: "GET"}, 
    gridComplete: function() { 
     //set the selected toolbar filter values 
     var myFields = JSON.parse(myFilters); 
     //set fields in form at top. filter contains index value so get corresponding name value because its used in the column label #gs 
     if (myFields['rules'].length > 0) { 
      for (var i=0; i < myFields['rules'].length; i++) { 
       $.each(defaultColModel, function(j) { 
        if(this.index == myFields['rules'][i]['field']) { 
         thisFieldName = this.name; 
         jQuery('#gs_' + thisFieldName).val(myFields['rules'][i]['data']); 
        } 
       }) 
      } 
     } 
    } 
}); 
jQuery("#contract_grid").navGrid('#report_pager',{ 
    edit:false, 
    add:false, 
    del:false, 
    search:false, 
    refresh:false 
}).navButtonAdd("#report_pager",{ caption:"Clear",title:"Clear Filters", buttonicon :'ui-icon-trash', 
    onClickButton: function() { 
     jQuery.ajax({ 
      url: "/assets/js/ajx_clearFilter.cfm?showHeader=0", 
      async: false, 
      type: "POST", 
      data: ({variableName:'session.contractGridParams'}) 
     }); 
     myGrid[0].clearToolbar(); 
    } 
}).navButtonAdd("#report_pager",{ caption:"Restore",title:"Restore Default Grid Columns and Filters", buttonicon :'ui-icon-refresh', 
    onClickButton: function() { 
     window.location = '?page=dsp_requestListingNew&clearSession=1'; 
    } 
}).navButtonAdd("#report_pager",{ 
     caption: "Export", 
     title:  "Export to Excel", 
     buttonicon :'ui-icon-document', 
     onClickButton: function(e){ 
      jQuery("#contract_grid").jqGrid('excelExport',{url:'includes/act_requestListingExport.cfm'}); 
     } 
}).navButtonAdd("#report_pager",{ 
    caption: "Columns", 
    buttonicon: "ui-icon-calculator", 
    title: "Select and Reorder Columns", 
    jqModal: true, 
    onClickButton: function(e){ 

     $('#contract_grid').jqGrid('columnChooser', { 
      dialog_opts: { 
       modal: true, 
       minWidth: 470, 
       show: 'blind', 
       hide: 'explode' 
      } 
     }); 
    } 

}).navButtonAdd("#report_pager",{ 
    caption: "Save", 
    title:  "Save Snapshot", 
    buttonicon :'ui-icon-disk', 
    onClickButton: function(e){ 
     takeSnapshot(0); 
     $('#fltrFrmLink').click(); 
    } 
}); 
jQuery("#contract_grid").jqGrid('filterToolbar', { 
    stringResult : true 
    , searchOnEnter : true 
    , autoSearch : true 
    , beforeClear : function() { 
     //set sortnames 
     var sn = jQuery("#contract_grid").jqGrid('getGridParam','sortname'); 
     //set sort orders 
     var so = jQuery("#contract_grid").jqGrid('getGridParam','sortorder'); 
     so = "desc"; 
     //set grid params 
     jQuery("#contract_grid").jqGrid('setGridParam',{ sortorder:so, sortname:sn }); 

    } 
}); 

colModel由（'#contract_grid'）。getGridParam（'colModel'）在卸載時返回。 searchoptions缺少REQUESTEDDATE的所有內容。 BUSINESSOWNERPERSONID缺少部分dataEvents和所有buildSelect。

[{"name":"REQUESTID", 
"index":"requestID", 
"label":"Request ID", 
"search":true, 
"stype":"text", 
"width":75, 
"key":true, 
"hidden":false, 
"title":true,"lso":"", 
"widthOrg":75,"resizable":true,"sortable":true}, 
{"name":"REQUESTEDDATE", 
"index":"requestedDate", 
"label":"Request Date", 
"sorttype":"date", 
"search":true, 
"width":50, 
"searchoptions:{}, 
"hidden":false, 
"title":true, 
"lso":"", 
"widthOrg":50, 
"resizable":true, 
"sortable":true,"stype":"text"}, 
{"name":"BUSINESSOWNERPERSONID", 
"index":"businessOwnerPersonID", 
"label":"Business Owner", 
"search":true, 
"stype":"select", 
"width":100,"hidden":false, 
"searchoptions":{"dataUrl":"cfc/com_common.cfc?method=getAjxPeople&role=businessOwnerPersonID", 
    "dataEvents":[{"type":"change"}]}, 
"title":true, 
"lso":"", 
"widthOrg":100, 
"resizable":true, 
"sortable":true}] 

Answer 1

JSON不支持的功能系列化。因此searchoptions.dataInit,searchoptions.buildSelect以及colModel中使用的所有其他功能在使用JSON.stringify後將被丟棄。

重要的是要知道您使用的是哪個版本的jqGrid /免費jqGrid或Guriddo jqGrid JS。從jqGrid 4.7開始，可以在colModel中定義template，其值爲string（請參閱the pull request）。通過這種方式，您將獲得colModel中的主要信息，這些信息可以使用JSON.stringify進行序列化。