如何在jqGrid页面重新加载时保留搜索过滤器？

Question

如何在jqGrid页面重新加载时保留搜索过滤器？

6

我找到了很多与我需要的内容相似的讨论，而这个问题是最接近的 - 如何在jqGrid请求中将postData._search设置为true？。

由于我遇到了几乎相同的问题，但无法解决 - 我想在jqGrid的初始加载期间设置“搜索”和“筛选”，例如在页面重新加载时，我已经将我的筛选器存储在会话中 - 我尝试了Oleg示例中的所有方法 - 但它就是不起作用！

这就是我想做的事情 -

loadBeforeSend: function (xhr) {
    var grid = jQuery('#' + block_id);
    var postData = grid.jqGrid('getGridParam','postData');
    jQuery.extend(postData,{filters:MyFilters});
    grid.jqGrid('setGridParam', {search: true, postData: postData});
    console.log(grid.jqGrid('getGridParam','postData'));
}

控制台输出显示过滤器已经就位，但_search仍然为false，且即使没有过滤器，实际的Post也会被发送。

_search   false
block_id  report_block_1table
nd        1297451574526
page      1
rows      25
sidx      id
sord      desc

然而，如果我使用完全相同的代码 - 加上

grid.trigger("reloadGrid");

将代码放入某个按钮的onClickButton函数中，然后点击该按钮，一切都能正常工作；但是我需要在“页面重新加载”时使其工作！

有什么想法吗？这让我发疯了...

- Oleg Ivanov

2个回答

0

@Oleg Oleg的答案非常好用，但只适用于第一次使用。

对我来说，当我重新加载网格时，过滤器和搜索标志未设置。使用以下代码，每次重新加载网格时它也会发送过滤器和搜索标志。我使用服务器端排序和分页。

我正在使用：

jQuery("#myGrid").navGrid("#myPager", {search: true, refresh: true, edit: false, 
    add:false, del:false}, {}, {}, {}, {});

关于网格定义：

beforeRequest: function() {
    // filter to be added on each request
    var filterObj1 = {"field":"myField","op":"eq","data":"myValue"}; 
    var grid = jQuery("#myGrid");
    var postdata = grid.jqGrid('getGridParam', 'postData');             
    if(postdata != undefined && postdata.filters != undefined ) {
        postdata.filters = jQuery.jgrid.parse(postdata.filters);
        //Remove if current field exists
        postdata.filters.rules = jQuery.grep(postdata.filters.rules, function(value) {
            if(value.field != 'myField')
                return value;
        });
        // Add new filters
        postdata.filters.rules.push(filterObj1);
    } else {
        jQuery.extend(postdata, {
            filters:  { 
                "groupOp":"AND",
                "rules":[filterObj1] 
            }
        });
        // more filters in the way: postdata.filters.rules.push(filterObj1);
    }
    postdata.filters = JSON.stringify(postdata.filters);
    postdata._search = true;
    return [true,''];
}

- Pedro Robles

正如Oleg所指出的那样，如果你用自定义值覆盖了prNames，你必须相应地修改上面的代码。 - Pedro Robles

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oleg · Accepted Answer

我觉得你不是第一个问同样问题的人。最近我在这个关闭的问题上提出了问题（阅读了对答案的许多评论）。另一个旧答案包括演示，可能可以回答你一些问题。

使用beforeRequest的代码不起作用，因为函数beforeRequest将在ajax调用之前立即调用，而更改search参数太晚了。此外，每次覆盖filters可能不是最好的选择。在这种情况下，用户将无法设置任何其他网格过滤器。

所以我可以重申，您需要实现的解决方案非常简单。你只需要将jqGrid的postData参数的filters属性设置为你需要的过滤器，并另外设置jqGrid参数search:true。就这样！稍后，用户将能够打开高级搜索对话框并覆盖过滤器。用户还可以单击高级搜索对话框上的“重置”按钮，将filters设置为空字符串并设置search:false。

为了更好地理解，我必须清楚search参数或其他jqGrid将如何在URL中使用。 jqGrid的prmNames参数定义了作为URL一部分或作为POST到服务器的数据的一部分发送的参数的名称。 prmNames的默认值包含search：“_search”，jqGrid使用的内部populate函数的代码片段如下所示：

var prm = {}, pN=ts.p.prmNames;
if(pN.search !== null) {prm[pN.search] = ts.p.search;}
if(pN.nd !== null) {prm[pN.nd] = new Date().getTime();}
if(pN.rows !== null) {prm[pN.rows]= ts.p.rowNum;}
if(pN.page !== null) {prm[pN.page]= ts.p.page;}
if(pN.sort !== null) {prm[pN.sort]= ts.p.sortname;}
if(pN.order !== null) {prm[pN.order]= ts.p.sortorder;}
...
$.extend(ts.p.postData,prm);

在哪里

prmNames: {page:"page",rows:"rows", sort: "sidx",order: "sord", search:"_search",
           nd:"nd", id:"id",oper:"oper",editoper:"edit",addoper:"add",
           deloper:"del", subgridid:"id", npage: null, totalrows:"totalrows"}

所以要设置URL的_search参数，应该设置jqGrid的search参数。

查看以下演示。您可以使用Fiddler或Firebug轻松验证来自页面的jqGrid发送HTTP GET请求的以下URL：

http://www.ok-soft-gmbh.com/jqGrid/MultisearchFilterAtStart1.json?filters=%7B%22groupOp%22%3A%22AND%22%2C%22rules%22%3A%5B%7B%22field%22%3A%22invdate%22%2C%22op%22%3A%22gt%22%2C%22data%22%3A%222007-09-06%22%7D%2C%7B%22field%22%3A%22invdate%22%2C%22op%22%3A%22lt%22%2C%22data%22%3A%222007-10-04%22%7D%2C%7B%22field%22%3A%22name%22%2C%22op%22%3A%22bw%22%2C%22data%22%3A%22test%22%7D%5D%7D&_search=true&nd=1297508504770&rows=10&page=1&sidx=id&sord=asc

因此，它会完全满足您的需求。演示代码包含以下代码片段：

$("#list").jqGrid({
    url: 'MultisearchFilterAtStart1.json',
    datatype: "json",
    postData: {
        filters:'{"groupOp":"AND","rules":['+
                '{"field":"invdate","op":"gt","data":"2007-09-06"}'+
                ',{"field":"invdate","op":"lt","data":"2007-10-04"}'+
                ',{"field":"name","op":"bw","data":"test"}]}'
    },
    search:true,
    // ...
});