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

Question

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? .

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!

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

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

Answer 1

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.

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.

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 .

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

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 _search parameter of URL one should set search parameter of jqGrid.

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

Answer 2

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

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