离开站点后将jqGrid的状态保存在localStorage中 [英] Save state of jqGrid in localStorage after leaving the site

问题描述

我想在用户离开站点时保存jqGrid的状态(排序列，排序顺序，列宽，工具栏搜索字段)，并在他返回站点时恢复网格.

I want to save the state of a jqGrid (sortingcolumn, sortingorder, width of columns, toolbar searchfields), when the user leave the site and restore the grid when he comes back to the site.

我的第一个尝试是使用getGridParam方法加载数据，然后使用JSON序列化并将其另存为JSON-String在cookie中.但是cookie没有足够的空间来保存gridParam. 因此，我决定使用localstorage来保存Grid的状态.我的代码如下:

My first try was to load the data with the getGridParam method then serialize it with JSON and save it as JSON-String in a cookie. But a cookie have not enough space to save the gridParam. So I decided to use localstorage to save the state of the Grid. My code looks like this:

$(window).unload(function () {
    // Load GridParam
    var gridData = $('#Grid').jqGrid('getGridParam')};
    // Serialize it to as JSON-String
    var gridDataAsString = $.toJSON(gridData);
    // Save the serialized Griddata in the localStorage
    localStorage.setItem("GridParam", gridDataAsString);
});

这很好.但是在下一步中，我从localStroage加载GridParam并尝试还原网格.加载数据也没有问题.在调试模式下，我可以看到所有数据均已从localStorage正确加载.但是，如果要使用setGridParam方法还原网格，则网格具有所有默认值.我的代码如下所示:

This works fine. But in the next step I load the GridParam from the localStroage and try to restore the grid.Loading the data is also no problem. In debugging mode I can see that all data are correctly loaded from the localStorage. But if I want to restore the Grid with the setGridParam method the grid have all default values. My code looks like the following:

$(document).ready(function () {
    $("#Grid").jqGrid({ /* Initialize the grid with default values */ });

    var loadedGridDataAsString = localStorage.getItem("GridParam");
    // Use the default value if no data exists in localStorage
    if (loadedGridDataAsString != null) {
        // Deserialize the JSON-String to an object
        var loadedGridData = $.evalJSON(loadedGridDataAsString);
        $("#Grid").jqGrid('setGridParam', loadedGridData);
        $("#Grid").trigger('reloadGrid');
    }
}

推荐答案

这是我保存网格状态的方式(虽然将json数据保存在隐藏字段中，而不是localstorage，但思路应该相同).

This is how I saved the state of my Grid (as json data in a hidden field though instead of localstorage, but the idea should be the same).

在隐藏字段中将Grid参数保存为JSON:

Saving the Grid Parameters as JSON in the hidden field:

 function saveGridParameters(grid) {       
            var gridInfo = new Object();

            gridInfo.url = grid.jqGrid('getGridParam', 'url');
            gridInfo.sortname = grid.jqGrid('getGridParam', 'sortname');
            gridInfo.sortorder = grid.jqGrid('getGridParam', 'sortorder');
            gridInfo.selrow = grid.jqGrid('getGridParam', 'selrow');
            gridInfo.page = grid.jqGrid('getGridParam', 'page');
            gridInfo.rowNum = grid.jqGrid('getGridParam', 'rowNum');
            gridInfo.postData = grid.jqGrid('getGridParam', 'postData');
            gridInfo.search = grid.jqGrid('getGridParam', 'search');

            $('#gridParams').val(JSON.stringify(gridInfo));
        }

加载保存的数据:(我将保存的数据加载到网格的beforeRequest事件中):

Loading the saved data: (I load the saved data in the beforeRequest event of the grid):

                beforeRequest: function() //loads the jqgrids state from before save
                {
                    if(gridParams !=null && gridParams!="")
                    {                            
                        var gridInfo = $.parseJSON(gridParams);                                    
                        var grid = $('#ReportPartsGrid');                           

                        grid.jqGrid('setGridParam', { url: gridInfo.url });
                        grid.jqGrid('setGridParam', { sortname: gridInfo.sortname });
                        grid.jqGrid('setGridParam', { sortorder: gridInfo.sortorder });
                        grid.jqGrid('setGridParam', { selrow: gridInfo.selrow });
                        grid.jqGrid('setGridParam', { page: gridInfo.page });
                        grid.jqGrid('setGridParam', { rowNum: gridInfo.rowNum });
                        grid.jqGrid('setGridParam', { postData: gridInfo.postData });
                        grid.jqGrid('setGridParam', { search: gridInfo.search });

                        gridParams = '';
                        $('#ReportPartsGrid').trigger('reloadGrid');                           
                    }                                               
                },

这篇关于离开站点后将jqGrid的状态保存在localStorage中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！