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

Posted 2023-03-10

【中文标题】记住（持久化）jqGrid的过滤器、排序顺序和当前页面

【英文标题】：Remember (persist) the filter, sort order and current page of jqGrid

【发布时间】：2011-03-02 04:59:03

【问题描述】：

我的应用程序用户询问是否可以让包含 jqGrid 的页面记住网格的过滤器、排序顺序和当前页面（因为当他们单击网格项执行任务然后返回时，他们'希望它是“就像他们离开它一样”）

Cookies 似乎是前进的方向，但是如何让页面加载这些并在网格中设置它们 在它发出第一个数据请求之前在这个阶段有点超出我的能力。

有没有人对 jqGrid 这种事情有任何经验？谢谢！

【参考方案1】：

问题已解决

我最终在 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

按大众需求 - 过滤网代码

    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;
    

【讨论】：

我建议你考虑在服务器端更新不同的数据。过滤器会起作用吗？您可以在服务器更新后删除保存的过滤器吗？最简单的例子是页码。如果下一次页面的最大计数将少于保存在 cookie 中的当前页面，那么客户端上的 jqGrid 将如何显示？尽管如此，我发现您的实施很好，并且您肯定朝着正确的方向前进。

嗨，金博。如果你有，我会从你那里得到那个 filterGrid。 +1 问答 - 正是我想要的。

@David - 更新了我上面的答案以包含 filterGrid 代码 - 一切顺利:)

【参考方案2】：

我正在做同样的事情，但还需要获取并保存列排序。这并不简单，因为 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);

【参考方案3】：

我的部分工作是您可以针对jqGridExport 和jqGridImport（请参阅http://www.trirand.com/jqgridwiki/doku.php?id=wiki:import_methods）实施您需要的工作，但在我看来，您需要更多开箱即用的 jqGrid。您必须自己实现一些附加功能。

【讨论】：

谢谢 Oleg，我以前没有见过这个功能。它并不能完全解决我当前的问题（我已经在下面记录了我的解决方案），但我确定将来会有用！

我知道jqGridExport 和jqGridImport 给你的功能太少了，但我不知道 jqGrid 中存在哪些开箱即用的东西来支持你的要求。您必须自己实施。

【参考方案4】：

如果用户登录，当这些参数发生变化时，您可能能够向服务器发出 AJAX 请求。然后，您可以将设置保存到数据库（使它们永久化）、会话（临时保存它们）或两者（出于性能原因）。

无论如何，使用存储在服务器端的参数，您可以在请求时将它们发送到页面。

【讨论】：

考虑过这样做，但问题是：第一次加载页面时，它得到一个空白过滤器和排序顺序和页面。您的服务器端数据提供者如何知道这是否是“重置过滤器和更改排序顺序等”？还是“加载我的默认值”请求？出于这个原因，我认为客户端 cookie 会更好。

这有关系吗？如果这些是默认值，那么您应该能够将它们保存在服务器上并根据需要应用它们而不更改默认行为 - 还是我遗漏了什么？

【参考方案5】：

嗨，你可以在 Pure 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);

PS：所有现代浏览器都支持原生 JSON 编码/解码（Internet Explorer 8+、Firefox 3.1+、Safari 4+ 和 Chrome 3+）。基本上，JSON.parse(str) read more。 PSS：我在那里使用的对象只是优化并删除了 .toJSONstring 的依赖...source

看看这些 jQuery 插件

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

https://github.com/ScottHamper/Cookies