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

Question

我的 ASP.NET MVC 3 应用程序中有一些 jqGrids，它们有很多列。我在列定义中添加了以下内容以默认隐藏一些列:

colModel: [
   { name: 'IceCreamID', hidden: true},
   { name: 'RecipeID', hidden: true }

这很好用。这些列在我的网格上不可见。

然后我添加了这个来实现列选择器:

var grid = $('#icecreamGrid');
grid.jqGrid('navButtonAdd', '#icecreamPager',
{ caption: "Columns", buttonicon: "ui-icon-calculator",
  title: "Choose Columns",
  onClickButton: function() {
     grid.jqGrid('columnChooser');
  }
});

太好了，现在调出列选择器。然后，我将以下内容添加到我不想在列选择器中显示的列中:

colModel: [
   { name: 'IceCreamID', hidden: true, hidedlg: true},

所以我现在可以很好地隐藏/显示列。现在，您将如何保留这些信息？ D B？作为 cookies ？另一种方式？有没有一种首选的方式来存储这种真正属于用户偏好的信息，而不是与数据本身相关的信息？

更多信息

根据下面 Oleg 的评论，我想提供更多信息。

这里的重点是我有 10-15 列的网格，可以根据用户的喜好显示。举一个简单的例子，我的网格之一有以下 9 列:

IceCream|ShortName|HasNuts|SugarAdded|LimitedRun|PromoItem|Facility|FirstRun|LastRun

用户可以根据个人喜好隐藏/显示这 9 个列中的任何一个。

我想要做的是提供一种方法来保留特定用户想要查看的列，这样他/她就不必在每次显示带有该网格的页面时重新选择要查看的列。

Answer 1

我发现你的问题很有趣。关于保存网格的用户状态的问题在很多情况下都很有趣。对于使用 cookie 的此类问题，有一些有趣的答案(例如，参见 here)。

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

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

因此，我将花一些时间来实现两个演示，以展示如何实现它。我用过 localStorage由于许多原因，在我的演示中。我只提到那里的两个:

Cookies 是一种向服务器发送永久不同信息或从服务器发送不同信息的方式，但实际上并不需要。它增加了 HTTP header 的大小并降低了网站的性能(例如参见 here)。

Cookie 有非常严格的限制。对应栏目6.3 rfc2109 或 6.1 rfc6265 的:每个 cookie 至少 4096 个字节，每个域至少 50 个 cookie(rfc2109 中的 20 个)，总共至少 3000 个 cookie(rfc2109 中的 300 个)。所以cookies不能用来保存太多信息。例如，如果您要保存每个网页的每个网格的状态，您可以快速达到限制。

另一边 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, i, l = colModel.length, colStates, cmName,
            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: "",
    buttonicon: "ui-icon-calculator",
    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', '#pager', {
    caption: "",
    buttonicon: "ui-icon-closethick",
    title: "clear saved grid's settings",
    onClickButton: function () {
        removeObjectFromLocalStorage(myColumnStateName);
    }
});

仔细定义 myColumnStateName (演示中的值 `'ColumnChooserAndLocalStorage.colState'``))到不同页面上的不同值。

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

更新 : next answer包含上述代码的扩展版本。它显示了如何另外持久化选定的行(或行)。 Another answer展示了如何持久化树形网格的扩展节点列表，并在页面重新加载时扩展节点。