Jquery 如何在网格中进行客户端过滤和服务器端搜索？

在这里，我遇到了这样一种情况，在这种情况下，我必须有一个工具栏对当前加载到网格中的数据进行过滤（客户端过滤），同时，我应该能够在服务器端进行多次搜索。 这可能吗？有什么解决办法吗？ 这是我的网格定义。

grid_on_facilities.jqGrid({
    url: 'OffOnFacilitiesDataJson',
    datatype: "json",
    colNames: ["id", "Orig Loc-CLLIA", "Term Loc-CLLIZ", "Fac,Equip or Cbl Name",
        "Fac or Cbl Type\/Relay Rack", "Unit/Pair", "SUBD or Cbl BP", "Frame/MDF"],
    colModel: [
        {name: 'id', index: 'id', width: 1, hidden: true, hidedlg: true, key: true,
            searchoptions: {sopt: ['eq', 'ne']}},
        {name: 'orig_loc_cllia', index: 'orig_loc_cllia', width: 350,
            hidedlg: true, editable: true, fixed: true},
        {name: 'term_loc_clliz', index: 'term_loc_clliz', align: "right",
            editable: true, width: 180, fixed: true},
        {name: 'fac_equip_or_cbl_name', index: 'fac_equip_or_cbl_name',
            align: "right", editable: true, width: 100, fixed: true}
    ],
    sortable: true,
    rowNum: 10,
    rowList: [2, 5, 10, 20],
    pager: '#pager_on_facilities',
    gridview: true,
    sortname: 'orig_loc_cllia',
    viewrecords: true,
    sortorder: 'desc',
    caption: 'OffOn facilities',
    autowidth: true,
    editurl: 'OffOnFacilitiesDataJson',
    jsonReader: {
        repeatitems: false,
        root: function (obj) { return obj; },
        page: function (obj) { return 1; },
        total: function (obj) { return 1; },
        records: function (obj) { return obj.length; }
    }
}).jqGrid('navGrid', '#pager',
    {edit: true, add: true, del: true, refresh: true, view: false},
    editSettings, addSettings, delSettings,
    {multipleSearch: true, jqModal: false, //overlay: false,
        onClose: function (/*$form*/) {
            // if we close the search dialog during the datapicker are opened
            // the datepicker will stay opened. To fix this we have to hide
            // the div used by datepicker
            $("div#ui-datepicker-div.ui-datepicker").hide();
        }}, {closeOnEscape: true});
grid_on_facilities.jqGrid('filterToolbar');

---

我对此有点困惑：是否有特定的需要在单个输入上同时过滤服务器端和客户端的数据？老实说，一个好的解决方案意味着设计可以帮助对一个请求执行一系列操作。客户端和服务器端筛选/搜索对我来说似乎有点迷失方向

您可以提供客户端过滤，并提供类似谷歌图像搜索的按钮，在“onmouseover”中加载更多结果

---

但为了简单起见，我甚至可能会放置一个按钮/链接，要求用户在需要更多结果时单击。

我不确定您为什么需要这种行为，因为如果您在服务器端实现了高级搜索，那么您可以使用

stringResult:true

选项进行网格过滤（

filterToolbar

）生成对服务器的兼容请求。在这种情况下，服务器将“不知道”是为高级搜索对话框还是为搜索筛选器生成过滤数据

所以我的建议是改变路线

grid_on_facilities.jqGrid('filterToolbar');

到

---

最后一个选项

defaultSearch:“cn”

（我包含的）并不是必需的。我个人使用该设置使默认搜索操作像“contain”一样工作，而不是默认的“begin with”操作。

要实现这一点，首先我们必须实现Oleg在中给出的解决方案

在检查它是否成功工作后，继续执行以下代码

启用filterToolbar作为grid.jqGrid（'filterToolbar'，{SearchOneNet:false，beforeClear:function（）{return true；}}）；

并使用

中的事件定义在导航栏中启用多重搜索

onSearch:function（）{$（this）.setGridParam（{datatype:'json'}）；
返回true；
}
onReset:function（）{$（this）.setGridParam（{datatype:'json'}）；
返回true；
}

将

onPaging

事件替换为以下代码

onPaging:function(){

/*this code  is to fix the issue when we click on next page with some data in filter tool bar
 * along with this in grid definition( in filterToolbar ) we have to return true in "beforeClear "event 
 * */
var data = $(this).jqGrid("getGridParam", "postData");
data._search = false;
data.filters=null;
data.page=$(this).jqGrid("getGridParam","page");
$(this)[0].clearToolbar();
//Here making _search alone false will not solve problem, we have to make search also false. like in below.
$(this).jqGrid('setGridParam', { search: false, postData:data });
var data = $(this).jqGrid("getGridParam", "postData");


/*this is to fix the issue when we go to last page(say there are only 3 records and page size is 5) and click 
 * on sorting the grid fetches previously loaded data (may be from its buffer) and displays 5 records  
 * where in i am expecting only 3 records to be sorted out.along with this in source code comment the line $t.p.records = 0;$t.p.page=1;$t.p.lastpage=0;
 */ 

$(this).jqGrid("clearGridData");

/* this is to make the grid to fetch data from server on page click*/

$(this).setGridParam({datatype: 'json'}).triggerHandler("reloadGrid");

---

}

@Oleg，你能复习一下吗，这样我就可以把它作为答案了

onPaging:function(){

/*this code  is to fix the issue when we click on next page with some data in filter tool bar
 * along with this in grid definition( in filterToolbar ) we have to return true in "beforeClear "event 
 * */
var data = $(this).jqGrid("getGridParam", "postData");
data._search = false;
data.filters=null;
data.page=$(this).jqGrid("getGridParam","page");
$(this)[0].clearToolbar();
//Here making _search alone false will not solve problem, we have to make search also false. like in below.
$(this).jqGrid('setGridParam', { search: false, postData:data });
var data = $(this).jqGrid("getGridParam", "postData");


/*this is to fix the issue when we go to last page(say there are only 3 records and page size is 5) and click 
 * on sorting the grid fetches previously loaded data (may be from its buffer) and displays 5 records  
 * where in i am expecting only 3 records to be sorted out.along with this in source code comment the line $t.p.records = 0;$t.p.page=1;$t.p.lastpage=0;
 */ 

$(this).jqGrid("clearGridData");

/* this is to make the grid to fetch data from server on page click*/

$(this).setGridParam({datatype: 'json'}).triggerHandler("reloadGrid");