Làm cách nào để bảo vệ bộ lọc tìm kiếm trong jqGrid khi tải lại trang?

Question

Tôi đã tìm thấy nhiều cuộc thảo luận gần với những gì tôi cần và câu hỏi này là gần nhất - How can I set postData._search to true in the request in jqGrid?.

Khi tôi đang vật lộn với hầu như cùng một vấn đề, và không thể làm cho nó hoạt động - Tôi muốn thiết lập "tìm kiếm" và "bộ lọc" trong quá trình tải ban đầu của jqGrid - giả sử, khi tải lại trang, và tôi có bộ lọc được lưu trữ trong phiên - và tôi đã thử mọi thứ tôi tìm thấy trong các ví dụ của Oleg - nó không hoạt động!

Đó là những gì tôi đang cố gắng để làm -

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

Giao diện điều khiển bản in cho thấy rằng các bộ lọc được đưa ra, nhưng _search vẫn còn sai, và thực tế bài viết được gửi ngay cả với không có bộ lọc:

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

Tuy nhiên, nếu tôi đặt một cách chính xác cùng mã - với việc bổ sung

grid.trigger("reloadGrid"); 

dòng - vào một số chức năng onClickButton của nút, và sau đó nhấp vào nút - mọi thứ hoạt động; nhưng tôi cần phải làm cho nó hoạt động trên "tải lại trang"!

Bất kỳ ý tưởng nào? Điều đó khiến tôi phát điên ...

Answer 1

Dường như với tôi rằng bạn không phải là người đầu tiên hỏi cùng một câu hỏi. Gần đây tôi hỏi trên the close question (đọc nhiều bình luận cho câu trả lời). Một số khác old answer bao gồm the demo có thể trả lời một số câu hỏi mở của bạn.

Mã của bạn sử dụng beforeRequest không làm việc chỉ vì chức năng beforeRequest sẽ được caled ngay trước khi cuộc gọi ajax và sự thay đổi của tham số search là quá muộn. Hơn nữa overwiting của filters mọi lúc có lẽ không phải là ý tưởng tốt nhất. Trong trường hợp người dùng sẽ không thể đặt bất kỳ bộ lọc lưới nào khác.

Vì vậy, tôi có thể lặp lại, rằng việc giải quyết các giải pháp mà bạn cần là rất đơn giản. Bạn chỉ nên đặt thuộc tính filters của tham số postData của jqGrid vào bộ lọc mà bạn cần và đặt một tham số jqGrid khác search:true bổ sung. Đó là tất cả! Sau đó, người dùng sẽ có thể mở hộp thoại tìm kiếm nâng cao và ghi đè lên các bộ lọc. Người dùng cũng có thể nhấp vào nút "Đặt lại" của hộp thoại tìm kiếm trước và đặt filters thành chuỗi trống và search:false.

Để hiểu rõ hơn, tôi phải xóa thông số search hoặc một số jqGrid khác sẽ được sử dụng trong URL như thế nào. Có tham số prmNames của jqGrid xác định tên của tham số gửi dưới dạng một phần của URL hoặc như một phần của dữ liệu Được đăng lên máy chủ. Giá trị mặc định của prmNames chứa search:"_search" và mã của nội populate chức năng được sử dụng bởi jqGrid có đoạn mã đơn giản sau đây:

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

nơi

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

Vì vậy, để thiết lập _search tham số của một URL nên đặt search tham số của jqGrid.

Nhìn vào the following demo. Bạn có thể dễ dàng để xác minh bằng Fiddler của Firebug rằng jqGrid khỏi trang gửi HTTP GET với url sau:

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 

Vì vậy, nó thực hiện chính xác những gì bạn cần. Mã của bản trình diễn chứa đoạn mã sau:

$("#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 Câu trả lời của Oleg hoạt động như một sự quyến rũ nhưng chỉ là lần đầu tiên.

Đối với tôi khi tôi tải lại lưới, bộ lọc và cờ tìm kiếm không được thiết lập. Với mã sau mỗi khi tôi tải lại lưới, nó cũng sẽ gửi các bộ lọc và cờ tìm kiếm. Tôi sử dụng sắp xếp và phân trang theo phía máy chủ.

Tôi đang sử dụng:

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

Trên nét lưới:

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