如何使用内置的搜索/过滤器框过滤jqGrid数据

Question

我希望用户能够在不使用内在搜索框的情况下过滤网格数据.

我为date(from和to)创建了两个输入字段,现在需要告诉网格将其作为过滤器,然后请求新数据.

伪造网格数据的服务器请求(绕过网格)并将网格数据设置为响应数据不会起作用 - 因为一旦用户尝试重新排序结果或更改页面等,网格将请求新数据从服务器使用空白过滤器.

我似乎无法找到网格API来实现这一点 - 有没有人有任何想法？谢谢.

Answer 1

关于postData包括函数和参数在内的参数,你可以很容易地解决问题trigger('reloadGrid').我尝试更详细地解释这个想法.

让我们来使用mtype: "GET".标准搜索/过滤器框在显示界面后唯一做的事情是将一些附加参数附加到URL,发送到服务器并重新加载网格数据.如果您有自己的搜索/过滤界面(例如某些选择控件或复选框),您应该自己附加您的网址并重新加载网格trigger('reloadGrid').要重置网格中的信息,您可以选择任何您喜欢的方式.例如,您可以在选择控件中包含哪些选项,例如"无过滤".

更确切地说,当我更改下拉列表时,您的代码应该看起来像答案中的代码如何在asp.net mvc中重新加载jqgrid:

var myGrid = jQuery("#list").jqGrid({
    url: gridDataUrl,
    postData: {
        StateId: function() { return jQuery("#StateId option:selected").val(); },
        CityId: function() { return jQuery("#CityId option:selected").val(); },
        hospname: function() { return jQuery("#HospitalName").val(); }
    }
    // ...
});
//
var myReload = function() {
    myGrid.trigger('reloadGrid');
};
var keyupHandler = function (e,refreshFunction,obj) {
    var keyCode = e.keyCode || e.which;
    if (keyCode === 33 /*page up*/|| keyCode === 34 /*page down*/||
        keyCode === 35 /*end*/|| keyCode === 36 /*home*/||
        keyCode === 38 /*up arrow*/|| keyCode === 40 /*down arrow*/) {

        if (typeof refreshFunction === "function") {
            refreshFunction(obj);
       }
    }
};

// ...
$("#StateId").change(myReload).keyup(function (e) {
    keyupHandler(e,myReload,this);
});
$("#CityId").change(myReload).keyup(function (e) {
    keyupHandler(e,myReload,this);
});

如果用户在选择框中更改选定的选项id=StateId或使用id=CityId(使用鼠标或键盘)选择另一个选择框, myReload则会调用该函数,这只会强制重新加载jqGrid中的数据.在$.ajaxjqGrid为我们做的相应请求期间,postData参数中的值将被转发$.ajax为data参数.如果某些属性data是函数,则会调用这些函数$.ajax.因此,将加载选择框中的实际数据,并将所有数据附加到发送到服务器的数据中.您只需在服务器部件中实现此参数的读取.

因此postData参数中的数据将附加到url(符号'？'和'&'将自动添加,所有特殊符号如空格也将像往常一样编码).使用的优点postData是:

1. 在postData参数内使用函数允许您将所有使用的控件的实际值加载到重新加载的时刻;
2. 您的代码保持结构非常清晰.
3. 所有这些都可以很好地处理HTTP GET请求,但也可以使用HTTP POST;

如果在选择框中使用某些"无过滤"或"全部"条目,则StateId可以修改计算StateId应附加到服务器URL 的参数值的函数.

StateId: function() { return jQuery("#StateId option:selected").val(); }

如下所示:

StateId: function() {
    var val = jQuery("#StateId option:selected").val();
    return val === "all"? "": val;
}

在服务器端,StateId如果您收到一个空值作为参数,则不应进行过滤.

您可以选择使用myGrid.setCaption('A text');更改网格标题.这允许用户更清楚地看到网格中的数据是按照某些标准过滤的.