asp.net-mvc – 持久化jqGrid列首选项

在我看来，在服务器或localStorage数据库中保存网格状态是更好的方式作为cookie的使用。最好的方法取决于项目的使用要求。例如，服务器上数据库存储的使用允许您实现网格的漫游状态。如果使用localStorage而不是cookie，则如果用户转到另一台计算机或者用户将在同一台计算机上使用另一个Web浏览器，则用户首选项将丢失。

电网状态的另一个问题是维护。有关通常在JavaScript或HTML文件中而不在数据库中保存的网格列的信息。在这种情况下，两个源可以不对网格中的变化同步。不同的更新问题的场景你可以轻松想象。然而，在一些情况下，用户偏好的优点如此大，以至于具有小缺点的问题不那么重要并且可以相对容易地解决。

所以我将花一些时间来实现两个演示，演示如何实现。我在我的演示中使用localStorage，原因很多。我只提到两个从那里：

> Cookie是永久性地向服务器发送或从服务器发送不真实需要的不同信息的方式。它增加了HTTP头的大小，并降低了网站的性能(例如，参见here)。
> Cookie有非常严格的限制。对应于rfc2109的第6.3或rfc6265的6.1：每个cookie至少4096个字节，每个域至少50个cookie(rfc2109中20个)，至少总共3000个cookie(rfc2109中的300个)。所以饼干不能用来保存太多的信息。例如，如果您要保存每个网页的每个网格的状态，您可以快速实现限制。

另一方面，所有现代浏览器都支持localStorage，IE8开始支持Internet Explorer(见here)。 localStorage将根据源(例如a1.example.com，a2.example.com，a3.example.com等)自动保存，并且每个源的任意限制为5 MB(参见here)。所以，如果你使用空间仔细，你将远离任何限制。

所以我在我的演示中使用了localStorage。我还应该提到，有一些插件像jStorage使用localStorage，如果它是由浏览器支持，并使用另一个存储，但相同的接口为您在旧的浏览器，如IE6 / IE7的情况下。在这种情况下，您只有较小的存储容量：128 kB而不是5 MB，但它是更好的4K，有一个cookie(见here)。

现在关于实现。我创建两个演示：this和它的扩展版本：this。

在the first演示中，网格的以下状态将被保存，并在页面重新加载(大多数网络浏览器中的F5)中自动恢复：

>哪个列被隐藏
>列的顺序
>每列的宽度
>网格将被排序的列的名称和排序方向
>当前页码
>网格的当前过滤器和是否应用过滤器的标志。我在网格中使用multipleSearch：true设置。

以相同的方式，可以扩展(或减少)作为所保存的网格状态的一部分的选项列表。

从演示的代码的最重要的部分，你会发现如下：

var $grid = $("#list"),saveObjectInLocalStorage = function (storageItemName,object) {
        if (typeof window.localStorage !== 'undefined') {
            window.localStorage.setItem(storageItemName,JSON.stringify(object));
        }
    },removeObjectFromLocalStorage = function (storageItemName) {
        if (typeof window.localStorage !== 'undefined') {
            window.localStorage.removeItem(storageItemName);
        }
    },getObjectFromLocalStorage = function (storageItemName) {
        if (typeof window.localStorage !== 'undefined') {
            return $.parseJSON(window.localStorage.getItem(storageItemName));
        }
    },myColumnStateName = 'ColumnChooserAndLocalStorage.colState',saveColumnState = function (perm) {
        var colModel = this.jqGrid('getGridParam','colModel'),i,l = colModel.length,colItem,cmName,postData = this.jqGrid('getGridParam','postData'),columnsState = {
                search: this.jqGrid('getGridParam','search'),page: this.jqGrid('getGridParam','page'),sortname: this.jqGrid('getGridParam','sortname'),sortorder: this.jqGrid('getGridParam','sortorder'),permutation: perm,colStates: {}
            },colStates = columnsState.colStates;

        if (typeof (postData.filters) !== 'undefined') {
            columnsState.filters = postData.filters;
        }

        for (i = 0; i < l; i++) {
            colItem = colModel[i];
            cmName = colItem.name;
            if (cmName !== 'rn' && cmName !== 'cb' && cmName !== 'subgrid') {
                colStates[cmName] = {
                    width: colItem.width,hidden: colItem.hidden
                };
            }
        }
        saveObjectInLocalStorage(myColumnStateName,columnsState);
    },myColumnsState,isColState,restoreColumnState = function (colModel) {
        var colItem,colStates,columnsState = getObjectFromLocalStorage(myColumnStateName);

        if (columnsState) {
            colStates = columnsState.colStates;
            for (i = 0; i < l; i++) {
                colItem = colModel[i];
                cmName = colItem.name;
                if (cmName !== 'rn' && cmName !== 'cb' && cmName !== 'subgrid') {
                    colModel[i] = $.extend(true,{},colModel[i],colStates[cmName]);
                }
            }
        }
        return columnsState;
    },firstLoad = true;

myColumnsState = restoreColumnState(cm);
isColState = typeof (myColumnsState) !== 'undefined' && myColumnsState !== null;

$grid.jqGrid({
    // ... other options
    page: isColState ? myColumnsState.page : 1,search: isColState ? myColumnsState.search : false,postData: isColState ? { filters: myColumnsState.filters } : {},sortname: isColState ? myColumnsState.sortname : 'invdate',sortorder: isColState ? myColumnsState.sortorder : 'desc',loadComplete: function () {
        if (firstLoad) {
            firstLoad = false;
            if (isColState) {
                $(this).jqGrid("remapColumns",myColumnsState.permutation,true);
            }
        }
        saveColumnState.call($(this),this.p.remapColumns);
    }
});
$grid.jqGrid('navButtonAdd','#pager',{
    caption: "",title: "choose columns",onClickButton: function () {
        $(this).jqGrid('columnChooser',{
            done: function (perm) {
                if (perm) {
                    this.jqGrid("remapColumns",perm,true);
                    saveColumnState.call(this,perm);
                }
            }
        });
    }
});
$grid.jqGrid('navButtonAdd',buttonicon: "ui-icon-closethick",title: "clear saved grid's settings",onClickButton: function () {
        removeObjectFromLocalStorage(myColumnStateName);
    }
});

小心地在演示中将myColumnStateName(值“ColumnChooserAndLocalStorage.colState”)定义为不同页面上的不同值。

The second demo是第一个使用技术从我的old answer到你的另一个问题的扩展。演示使用搜索工具栏，并在高级搜索表单和搜索工具栏之间同步附加信息。

UPDATED：next answer包含上面代码的扩展版本。它显示如何附加地持久保存所选行(或行)。 Another answer显示如何持久化树网格的扩展节点的列表，并在页面重新编码时展开节点。