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

Question

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

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

Answer 1

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

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

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

Answer 2

要实现这一点，首先我们必须实现奥列格在client side sorting and server side paging中给出的解决方案

检查成功后，继续下面的代码，

启用过滤器工具栏为

grid.jqGrid('filterToolbar',{searchOnEnter:false,beforeClear:function(){return true;}});

并使用

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

onSearch:function(){$(this).setGridParam({datatype: 'json'}); return true; } onReset:function(){$(this).setGridParam({datatype: 'json'}); return 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");

}

Answer 3

我不确定你为什么需要这样的行为，因为如果你在服务器服务器端实现了高级搜索，那么你可以使用stringResult: true 选项来使网格过滤（filterToolbar）产生对服务器的兼容请求。如果服务器只是“不知道”它是否为高级搜索对话框或搜索过滤器生成过滤数据。

所以我的建议是换行

grid_on_facilities.jqGrid('filterToolbar');

到

grid_on_facilities.jqGrid('filterToolbar', {stringResult: true, defaultSearch: 'cn'});

我包含的最后一个选项defaultSearch: 'cn' 并不是必需的。我个人使用该设置使默认搜索操作像“包含”而不是默认的“开始于”操作。