坚持jqGrid的列preferences [英] Persisting jqGrid column preferences

问题描述

我已经得到了有一些列在我的ASP.NET MVC 3应用程序几jqGrids。我增加了以下到列定义为默认某些列被隐藏：

I've got a few jqGrids on my ASP.NET MVC 3 application that have a number of columns. I added the following to the column definitions to default some columns to be hidden:

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

这很好地工作。这些列是不可见的在我的网格。

and this works nicely. Those columns aren't visible on my grid.

然后我说这个执行列选择：

Then I added this to implement the column chooser:

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

太好了，现在调出列选择。然后，我增加了以下内容我从来没有想在列选择显示列：

Great, brings up the column chooser now. I then added the following to columns I never wanted to show up in the column chooser:

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

所以，我现在可以隐藏/显示列就好了。现在，你将如何坚持这一信息？ DB？作为一个cookie？另一种方式？是否有一个preferred方式来存储这类信息是一个真正的用户preference，而不是关系到数据本身的东西吗？

So I can now hide/show columns just fine. Now, how would you persist this information? DB? As a cookie? Other way? Is there a preferred way to store this sort of information that is really a user preference rather than something related to the data itself?

更多资讯

，我想提供一些更多的信息。

Based on Oleg's comment below, I want to provide a little more information.

这里的关键是，我有网格10-15列其中的可能的是基于用户的preference显示。举个简单的例子，我的网格的人有以下9列：

The point here is that I've got grids with 10-15 columns which could be display based on the user's preference. For a simple example, one of my grid's has the following 9 columns:

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

用户可以隐藏/显示基于个人preferences这些9列。

Users can hide/show any of these 9 columns based on their personal preferences.

我想要做的是提供一种方法来坚持一个特定的用户希望看到这样■哪些列/他没有重新选择这些列，以查看与该网格的页面显示各一次。

What I want to do is provide a way to persist which columns a particular user wants to see so that s/he doesn't have to re-choose those columns to view each time the page with that grid is shown.

推荐答案

我觉得你的问题很有意思。有关保存网格的用户状态的问题很有趣在许多情况下。有它使用的cookie此类问题的一些有趣的答案（见这里为例）。

I found you question very interesting. The question about saving the user state of grid are interesting in many cases. There are some interesting answers on such problems which uses cookie (see here for example).

在我看来在服务器上，或在数据库中的电网状态保存的localStorage 是cookie的使用，更好的办法。最好的方法取决于你使用的项目要求。例如在服务器上的数据库存储的使用允许实现漫游电网的状态。如果您使用的的localStorage 而不是饼干用户preferences将会丢失，如果用户进入到另一台计算机或只是如果用户将使用其他网络浏览器在同一计算机。

In my opinion saving of the grid state in database on the server or in the localStorage is better way as the usage of cookie. The best way depends on the project's requirements in which you use it. For example the usage of the database storage on the server allows you to implement roaming state of the grid. If you use the localStorage instead of cookies the user preferences will be lost if the user goes to another computer or just if the user will use another web browser on the same computer.

与网格状态的另一个问题是维修。关于您通常在JavaScript或HTML文件，而不是保持在数据库中的网格的列的信息。的情况下的两个源可以在网格中的变化不同步。更新问题的不同方案可能你想象的容易。用户的preferences在某些情况下这样大的尽管如此优点与小缺点导致的问题并没有那么重要，可以解决的比较容易的。

Another problem with the grid state is the maintenance. The information about the columns of the grid you hold typically in the JavaScript or HTML files and not in the database. In the case the both sources can be not synchronous on the changes in the grid. Different scenarios of the update problem could you easy imagine. Nevertheless the advantages of user's preferences so large in some scenarios that the problems with small disadvantages are not so important and can be solved relatively easy.

所以我会花一些时间来实现两个演示，显示它是如何实现的。我在由于诸多原因演示使用的localStorage 。我只有两个从那里提及：

So I'll spend some time to implement two demos which shows how it can be implemented. I used localStorage in my demos because of many reasons. I mention only two from there:

1. 缓存是发送永久不同的信息，或从哪个是不是真的来回报服务器的方式。它增加了HTTP报头的大小，并降低了网站的性能（见 为例）。


2. 饼干是很艰难的限制。对应于部分 6.3 RFC2109或的6.1 rfc6265的：每个Cookie至少4096字节，每个域的至少50个曲奇饼（20 RFC2109），至少3000饼干总（在RFC2109 300）。所以饼干人们不能用它来保存过多的信息。例如，如果你将节省您的每一个网页的每一个网格，您可以快速达到极限状态。

1. Cookies is the way which send permanently different information to or from the server which is not really requited. It increases the size of HTTP header and decreases the performance of the web site (see here for example).
2. Cookies have very hard restrictions. Corresponds to the section 6.3 of rfc2109 or 6.1 of rfc6265: At least 4096 bytes per cookie, at least 50 cookies per domain (20 in rfc2109), at least 3000 cookies total (300 in rfc2109). So the cookies one can't use to save too many information. For example if you would save state of every grid of every your web page you can quickly achieve the limits.

在对方的localStorage 是由所有现代浏览器的支持，并会在Internet Explorer中IE8开始（见的here ）。在的localStorage 将自动按起源保存（如a1.example.com，a2.example.com，a3.example.com等），并具有5​​ MB任何限制每原点（这里见）。所以，如果你小心使用你的空间会远离任何限制。

On the other side localStorage are supported by all modern browsers and will be supported in Internet Explorer starting with IE8 (see here). The localStorage will be automatically saved per origins (like a1.example.com, a2.example.com, a3.example.com, etc) and has arbitrary limit of 5 MB per origin (see here). So if you use the space carefully you will far from the any limits.

所以我在演示的的localStorage 使用。我还提到，有像 jStorage 使用的localStorage 如果它是其中的​​一些插件浏览器支持，并在老浏览器，如IE6 / IE7的情况下使用其他存储，但相同的接口为您服务。在这种情况下，你有存储的大小只有不足128 KB，而不是5 MB，但它是为4K哪一个具有饼干（见的这里）。

So I used in my demos the localStorage. I should additionally mention that there are some plugins like jStorage which use localStorage if it's supported by the browser and use another storage, but the same interface for you in case of old browsers like IE6/IE7. In the case you has only less size of storage: 128 kB instead of 5 MB, but it's better as 4K which one has for cookies (see here).

现在关于落实。我创建了两个演示：这和它的加长版：的this 。

Now about the implementation. I creates two demos: this and it's extended version: this.

在第一试玩网的以下状态将被保存并自动恢复的页面重载（<大骨节病> F5 在大多数Web浏览器）：

In the first demo the following states of grid will be saved and automatically restored on the page reload (F5 in the most web browsers):

• 这列被隐藏


• 列的顺序


• 每一列的宽度


• 通过该格将被排序的列的名称和排序方向


• 当前页码


• 网格的当前过滤器和过滤器是否被施加的标记。我用 multipleSearch：真正的网​​格设置

• which column are hidden
• the order of columns
• the width of every column
• the name of the column by which the grid will be sorted and the sort direction
• the current page number
• the current filter of the grid and the flag whether the filter are applied. I used multipleSearch: true setting in the grid.

在相同的方法可以扩展（或减少）的哪些是保存的网格状态的部分选项列表

In the same way one can extend (or reduce) the list of options which are the part of the saved grid state.

从演示的code的最重要的部分，你会发现下面：

The most important parts of the code from the demo you will find below:

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'``）），以不同的价值观。

Be carefully to define myColumnStateName (the value `'ColumnChooserAndLocalStorage.colState'``) in the demo) to different values on the different pages.

第二演示是使用来自我<一个该技术的第一个的延伸HREF =htt​​p://stackoverflow.com/a/6884755/315935>旧的答案您的另一个问题。该演示使用搜索工具栏和同步高级搜索形式和搜索栏之间的额外信息。

The second demo is the extension of the first one using the technique from my old answer to your another question. The demo use the searching toolbar and synchronize additionally information between the advanced searching form and the searching toolbar.

更新时间：：借助下一个答案包含code的扩展版本包含以上。它显示了如何坚持选定行（或行）还。 另一个答案展示如何坚持树网格的扩展节点的名单和扩大页面​​relaoding的节点。

UPDATED: The next answer contains extended version of the code included above. It shows how to persist the selected rows (or row) additionally. Another answer shows how to persist the list of expanded nodes of the tree grid and expand the nodes on the relaoding of the page.

这篇关于坚持jqGrid的列preferences的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！