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

时间:2012-11-01 10:41:13

标签: jquery jqgrid

在这里,我正在努力解决一个问题,即我必须对当前在网格中加载的数据进行工具栏过滤(客户端过滤),同时,我应该能够做多个在服务器端搜索。 这有可能吗?这有什么解决方案吗? 这是我的网格定义。

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

3 个答案:

答案 0 :(得分:1)

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

您可以提供客户端过滤并为谷歌图片搜索提供按钮,其中“onmouseover”您可以加载更多结果。

但为了简单起见,我甚至可能会寻找一个按钮/链接,要求用户点击是否需要更多结果。

答案 1 :(得分:1)

要实现这一目标,首先我们必须在client side sorting and server side paging

中实施Oleg给出的解决方案

检查完成后,请继续使用以下代码

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

并使用事件定义在naviagation栏中启用多个搜索,如

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

}

答案 2 :(得分:0)

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

所以我的建议是更改行

grid_on_facilities.jqGrid('filterToolbar');

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

我所包含的最后一个选项defaultSearch: 'cn'并非真正需要。我个人使用该设置使默认搜索操作像“包含”一样工作,而不是默认的“开始”操作。