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

2022-01-19 00:00:00 jquery javascript jqgrid

我发现许多讨论与我需要的很接近,而这个问题是最接近 - 如何在 jqGrid 的请求中将 postData._search 设置为 true?.

I found many discussions that were close to what I need, and this question is the closest - How can I set postData._search to true in the request in jqGrid?.

因为我正在努力解决几乎相同的问题,但无法让它工作 - 我想在 jqGrid 的初始加载期间设置搜索"和过滤器" - 例如,在页面重新加载时,以及我将过滤器存储在会话中 - 我尝试了我在 Oleg 的示例中找到的所有内容 - 它只是不起作用!

As I'm struggling with almost the same problem, and just can't get it working - I want to setup "search" and "filters" during the initial loading of the jqGrid - say, on the page reload, and I have my filters stored in the session - and I tried everything I found in Oleg's examples - it just doesn't work!

这就是我想要做的-

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:

The console printout shows that the filters are in place, but the _search is still false, and the actual Post gets sent even with no filters:

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

但是,如果我输入完全相同的代码 - 加上

However, if I put exactly the same code - with the addition of

grid.trigger("reloadGrid");

line - 进入某个按钮的 onClickButton 函数,然后单击该按钮 - 一切正常;但我需要让它在页面重新加载"上工作!

line - into some button's onClickButton function, and later click the button - everything works; but I need to make it work on "page reload"!

有什么想法吗?快把我逼疯了……

Any ideas? It's driving me crazy...

推荐答案

在我看来,你不是第一个问同样问题的人.最近我问 结束问题(阅读许多对答案的评论).另一个旧答案,包括演示可能会回答您的一些未解决的问题.

It seems to me that you are not the first person who ask the same question. Recently I asked on the close question (read many comments to the answer). Another old answer including the demo could probably answer on some your opened questions.

您使用 beforeRequest 的代码不起作用,因为函数 beforeRequest 将在 ajax 调用和 search 参数为时已晚.此外,每次都覆盖 filters 可能不是最好的主意.如果用户无法设置任何其他网格过滤器.

Your code using beforeRequest don't work just because the function beforeRequest will be caled immediately before the ajax call and the changing of the search parameter is too late. Moreover overwiting of filters everytime is probably not the best idea. In the case the user will not able to set any other grid filter.

所以我可以重复一遍,您需要的解决方案的实施非常简单.您只需将 jqGrid 的 postData 参数的 filters 属性设置为您需要的过滤器,并另外设置另一个 jqGrid 参数 search:true.就是这样!稍后,用户将能够打开高级搜索对话框并覆盖过滤器.用户也可以点击高级搜索对话框的重置"按钮,将filters设置为空字符串和search:false.

So I can repeat, that the imlementation of the solution which you need is very simple. You should just set filters property of the postData parameter of jqGrid to the filter which you need and set another jqGrid parameter search:true additionally. It's all! Later the user will be able to open advance searching dialog and overwrite the filters. The user can also click on "Reset" button of the advance searching dialog and set filters to empty string and search:false.

为了更好地理解,我必须清楚 search 参数或其他一些 jqGrid 将如何在 URL 中使用.jqGrid 的参数 prmNames 定义了参数名称作为 URL 的一部分或作为 POST 到服务器的数据的一部分发送.prmNames 的默认值包含 search:"_search" 和内部 填充的代码 jqGrid 使用的函数有以下简化代码片段:

For better understanding I have to clear how search parameter or some other jqGrid will be used in the URL. There are parameter prmNames of jqGrid which defines the names of parameters send as a part of URL or as a part of data POSTed to the server. The default value of prmNames contain search:"_search" and the code of internal populate function used by jqGrid has the following simplified code fragment:

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参数.

So to set _search parameter of URL one should set search parameter of jqGrid.

查看以下演示.您可以使用 Fiddler 轻松验证" rel="nofollow noreferrer">Firebug 页面中的 jqGrid 使用以下 url 发送 HTTP GET:

Look at the following demo. You can easy to verify using Fiddler of Firebug that the jqGrid from the page send HTTP GET with the following 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

所以它完全满足您的需求.演示代码包含以下代码片段:

So it do exactly what you need. The code of the demo contain the following code fragment:

$("#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,
    // ...
});

相关文章