logo标签列表

记住（持久化）jqGrid的过滤器、排序和当前页码

jquerycookiespersistencejqgridfiltering
28

我的应用程序用户询问是否可能使包含jqGrid的页面记住网格的筛选、排序和当前页（因为当他们单击网格项执行任务，然后返回时，他们希望它“与他们离开时相同”）。

Cookies 似乎是前进的方式，但如何在页面发出第一个数据请求之前让页面加载这些并设置它们到网格中还在我能力范围之外。

有没有人在使用 jqGrid 进行此类操作方面有经验？谢谢！

5个回答
28

问题已解决

最终我使用javascript中的cookie来存储表格的排序列、排序顺序、页码、网格行和筛选条件（使用 JSON/Javascript cookies - 使用prefs对象）

保存偏好设置 - 从$(window).unload(function(){ ... });调用

var filters = {
    fromDate: $('#fromDateFilter').val(),
    toDate: $('#toDateFilter').val(),
    customer: $('#customerFilter').val()
};

prefs.data = {
    filter: filters,
    scol: $('#list').jqGrid('getGridParam', 'sortname'),
    sord: $('#list').jqGrid('getGridParam', 'sortorder'),
    page: $('#list').jqGrid('getGridParam', 'page'),
    rows: $('#list').jqGrid('getGridParam', 'rowNum')
};

prefs.save();

加载偏好设置 - 从 $(document).ready(function(){ ... }); 调用

var gridprefs = prefs.load();

$('#fromDateFilter').val(gridprefs.filter.fromDate);
$('#toDateFilter').val(gridprefs.filter.toDate);
$('#customerFilter').val(gridprefs.filter.customer);

$('#list').jqGrid('setGridParam', {
    sortname: gridprefs.scol,
    sortorder: gridprefs.sord,
    page: gridprefs.page,
    rowNum: gridprefs.rows
});

// filterGrid method loads the jqGrid postdata with search criteria and re-requests its data
filterGrid();

jqGrid参考文档：http://www.secondpersonplural.ca/jqgriddocs/_2eb0fi5wo.htm

按众所要求 - FILTERGRID代码

    function filterGrid() {
        var fields = "";
        var dateFrom = $('#dateFrom').val();
        var dateTo = $('#dateTo').val();

        if (dateFrom != "") fields += (fields.length == 0 ? "" : ",") + createField("shipmentDate", "ge", dateFrom);
        if (dateTo != "") fields += (fields.length == 0 ? "" : ",") + createField("shipmentDate", "le", dateTo);

        var filters = '"{\"groupOp\":\"AND\",\"rules\":[' + fields + ']}"';

        if (fields.length == 0) {
            $("#list").jqGrid('setGridParam', { search: false, postData: { "filters": ""} }).trigger("reloadGrid");
        } else {
            $("#list").jqGrid('setGridParam', { search: true, postData: { "filters": filters} }).trigger("reloadGrid");
        }

    }

    function createField(name, op, data) {
        var field = '{\"field\":\"' + name + '\",\"op\":\"' + op + '\",\"data\":\"' + data + '\"}';
        return field;
    }
1
我建议您考虑服务器端不同数据的更新。过滤器会起作用吗？在服务器更新后，您能否删除保存的过滤器？最简单的例子是页面编号。如果下一次最大页面数小于保存在cookie中的当前页面，那么jqGrid在客户端将会是什么样子？尽管如此，我认为您的实现很好，而且您肯定朝着正确的方向前进。 - Oleg
1
嘿，吉姆博。如果你有的话，我会拿走那个filterGrid。对于问题和答案+1——正是我在寻找的。 - David M
1
@David - 我更新了我的答案，包括filterGrid代码 - 祝一切顺利 :) - Jimbo
3
我正在做同样的事情，但也需要获取并保存列顺序。这并不简单，因为jqGrid.remapColumns是相对于当前网格状态的任何内容...
以防有人发现这有用（我很想知道是否已经有东西可以做到这一点，我可能错过了）：
(function($){

$.jgrid.extend({

    getColumnOrder : function ()
    {
        var $grid = $(this);

        var colModel = $grid[0].p.colModel;

        var names = [];
        $.each(colModel, function(i,n){
            var name = this.name;
            if (name != "" && name != 'subgrid')
                names[names.length] = name;
        });

        return names;
        //return JSON.stringify(names);
        //$('#dbgout').val(j);

    },


    setColumnOrder : function (new_order)
    {
        var $grid = $(this);

        //var new_order = JSON.parse($('#dbgout').val());
        //new_order = ['a', 'c', 'd', 'b', 'e'];
        //              0    1    2    3    4

        var new_order_index = {};

        $.each(new_order, function(i,n){
            new_order_index[n] = i;
        });

        //new_order = ['a', 'c', 'd', 'b', 'e'];
        //              0    1    2    3    4
        // new_order_index a=>0 c=>1 d=>2 b=>3 e=>4

        var colModel = $grid[0].p.colModel;

        cur = [];
        $.each(colModel, function(i,n){
            var name = this.name;
            if (name != "" && name != 'subgrid')
                cur[cur.length] = name;
        });
        //cur = ['a', 'b', 'c', 'd', 'e'];
        //        0    1    2    3    4

        cur_index = {};
        $.each(cur, function(i,n){
            cur_index[n] = i;
        });


        // remapColumns: The indexes of the permutation array are the current order, the values are the new order.

        // new_order       0=>a 1=>c 2=>d 3=>b 4=>e
        // new_order_index a=>0 c=>1 d=>2 b=>3 e=>4

        // cur             0=>a 1=>b 2=>c 3=>d 4=>e
        // cur_index       a=>0 b=>1 c=>2 d=>3 e=>4

        // permutati       0    2    3    1    4
        //                 a    c    d    b    e
        var perm = [];
        $.each(cur, function(i, name){   // 2=>b

            new_item = new_order[i];     // c goes here
            new_item_index = cur_index[new_item];

            perm[i] = new_item_index;
        });

        if (colModel[0].name == 'subgrid' || colModel[0].name == '')
        {
            perm.splice(0, 0, 0);
            $.each(perm, function(i,n){
                ++perm[i]
            });
            perm[0] = 0;
        }

        $grid.jqGrid("remapColumns", perm, true, false);

    },



});
})(jQuery);
2
谢谢Oleg，我之前没有看到过这个功能。虽然它不能完全解决我的当前问题（我已经记录了我的解决方案），但将来肯定会有用！ - Jimbo
我知道jqGridExport和jqGridImport提供的功能太少了，但是我不知道在jqGrid中还有什么内置的支持你的需求。你必须自己实现它。 - Oleg
1
如果用户登录，则当这些参数更改时，您可能能够向服务器发回AJAX请求。然后，您可以将设置保存到数据库（使其永久），保存到会话中（临时持久），或者两者兼备（出于性能原因）。
无论如何，由于参数存储在服务器端，因此在请求页面时只需将它们发送到页面即可。
考虑过这种方法，但问题在于： 当页面第一次加载时，它会得到一个空的筛选器、排序顺序和页码。你的服务器端数据提供程序怎么知道这是一个“重置筛选器并更改排序等”还是一个“加载我的默认值”的请求呢？因此，我认为客户端的cookie会更好。 - Jimbo
这有关系吗？如果这些是默认值，那么您应该能够将它们保存在服务器上并根据需要应用它们，而不更改默认行为 - 我错过了什么吗？ - Justin Ethier
0

你可以用纯JS而不是jQuery插件来使这更简单（无需其他依赖）

var prefs = {

    data: {},

    load: function () {
        var the_cookie = document.cookie.split(';');
        if (the_cookie[0]) {
            this.data = JSON.parse(unescape(the_cookie[0]));
        }
        return this.data;
    },

    save: function (expires, path) {
        var d = expires || new Date(2020, 02, 02);
        var p = path || '/';
        document.cookie = escape( JSON.stringify(this.data) )
                          + ';path=' + p
                          + ';expires=' + d.toUTCString();
    }

}

如何使用？

to_save = { "size": 40, "color": "green", "products":"jeans"};//and any other data/filters you wanna store here

prefs.data = to_save;
prefs.save();//now our json object is saved on the client document cookie


// delete
var date_in_the_past = new Date(2000,02,02);
prefs.save(date_in_the_past);


// read
var what = prefs.load();
// load populates prefs.data and also returns
alert(what.color);
// or ...
alert(prefs.data.color);

提示：所有现代浏览器都支持本地JSON编码/解码（Internet Explorer 8+，Firefox 3.1+，Safari 4+和Chrome 3+）。基本上，JSON.parse（str）阅读更多。 附注：我在那里使用的对象只是优化并删除了对.toJSONstring的依赖... 源代码

看看这些jQuery插件

使用这个，不要使用上面的自定义函数 https://github.com/carhartl/jquery-cookie

https://github.com/ScottHamper/Cookies

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接