记住(持久化)jqGrid的过滤器,排序顺序和当前页面

Jim*_*mbo 28 cookies jquery persistence filtering jqgrid

我的应用程序用户询问包含jqGrid的页面是否可以记住网格的过滤器,排序顺序和当前页面(因为当他们单击网格项来执行任务然后返回到它时他们会喜欢它是"因为他们离开了它")

Cookie似乎是前进的方向,但如何让页面加载这些它发出第一个数据请求之前将它们设置在网格中在这个阶段有点超出我的意义.

有没有人对jqGrid有这种经历?谢谢!

Jim*_*mbo 27

问题解决了

我最终最终在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();
Run Code Online (Sandbox Code Playgroud)

加载首选项 - 从中调用$(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();
Run Code Online (Sandbox Code Playgroud)

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;
    }
Run Code Online (Sandbox Code Playgroud)