jqGrid getGridParam('colModel') 缺少信息

Question

我想在页面卸载时为我的 jqGrid 捕获 colModel 并将其存储在会话中，以便下次用户访问该页面时可以自动加载它。但是，('#contract_grid').getGridParam('colModel') 返回的信息缺少网格列搜索选项中的部分或全部信息。

知道为什么会这样或如何捕获完整的 colModel 吗？网格在初始加载时运行良好，但没有其他搜索选项参数，当我从存储在会话中的 colModel 刷新页面时，过滤器栏 features/menus 不起作用。

为网格创建默认的 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') 返回。搜索选项缺少 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/free jqGrid 或 Guriddo jqGrid JS 的哪个版本很重要。从 jqGrid 4.7 开始，可以用 string 值在 colModel 中定义 template（参见 the pull request）。在这种情况下，您将在 colModel 中获得主要信息，可以使用 JSON.stringify.

对其进行序列化

jqGrid getGridParam('colModel') 缺少信息

jqGrid getGridParam('colModel') missing information

jqgrid