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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4973361/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 15:32:06  来源:igfitidea点击:

How can I preserve the search filters in jqGrid on page reload?

javascriptjqueryjqgrid

提问by Oleg Ivanov

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 的请求中将 postData._search 设置为 true?.

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!

由于我正在为几乎相同的问题而苦苦挣扎,并且无法使其正常工作 - 我想在 jqGrid 的初始加载期间设置“搜索”和“过滤器” - 例如,在页面重新加载时,我有我的存储在会话中的过滤器 - 我尝试了我在 Oleg 示例中找到的所有内容 - 它不起作用!

That's what I'm trying to do -

这就是我正在尝试做的-

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'));
}

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 仍然是假的,即使没有过滤器,实际的 Post 也会被发送:

_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 - into some button's onClickButton function, and later click the button - everything works; but I need to make it work on "page reload"!

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

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

有任何想法吗?这让我疯狂...

回答by Oleg

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 answerincluding the democould probably answer on some your opened questions.

在我看来,你不是第一个问同样问题的人。最近我问了关闭的问题(阅读了许多对答案的评论)。包括演示在内另一个旧答案可能会回答您提出的一些问题。

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

您使用的代码beforeRequest不起作用只是因为该函数beforeRequest将在 ajax 调用之前立即被调用并且search参数的更改为时已晚。此外,filters每次都覆盖可能不是最好的主意。在这种情况下,用户将无法设置任何其他网格过滤器。

So I can repeat, that the imlementation of the solution which you need is very simple. You should just set filtersproperty of the postDataparameter of jqGrid to the filter which you need and set another jqGrid parameter search:trueadditionally. 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 filtersto empty string and search:false.

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

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

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

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);

where

在哪里

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"}

So to set _searchparameter of URL one should set searchparameter of jqGrid.

所以要设置_searchURL 的参数,应该设置searchjqGrid 的参数。

Look at the following demo. You can easy to verify using Fiddlerof Firebugthat the jqGrid from the page send HTTP GET with the following url:

下面的演示。您可以轻松验证使用小提琴手萤火虫的jqGrid的从页面发送HTTP GET与以下网址:

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,
    // ...
});

回答by Pedro Robles

@Oleg Oleg's answer works like a charm but just for the first time.

@Oleg Oleg 的回答很有魅力,但只是第一次。

For me when I reload the grid, filters and search flag are not set up. With the following code each time I reload the grid it also sends the filters and search flag. I use server side sort and pagination.

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

I'm using:

我正在使用:

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

On the grid definition:

关于网格定义:

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,''];
}