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

问题描述

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

I want users to be able to filter grid data without using the intrinsic search box.

我已经为日期(从和到)创建了两个输入字段，现在需要告诉网格将其用作过滤器，然后请求新数据.

I have created two input fields for date (from and to) and now need to tell the grid to adopt this as its filter and then to request new data.

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

Forging a server request for grid data (bypassing the grid) and setting the grid's data to be the response data wont work - because as soon as the user tries to re-order the results or change the page etc. the grid will request new data from the server using a blank filter.

我似乎找不到网格 API 来实现这一点 - 有人有什么想法吗?谢谢.

I cant seem to find grid API to achieve this - does anyone have any ideas? Thanks.

推荐答案

postData 参数包括函数和trigger('reloadGrid').我试着更详细地解释这个想法.

You problem can be very easy solved with respect of postData parameter including functions and trigger('reloadGrid'). I try explain the idea more detailed.

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

Let us use mtype: "GET". The only thing which standard search/filter box do after displaying the interface is appending of some additional parameters to the url, sending to server and reloading the grid data. If you have your own interface for searching/filtering (some select controls or checkboxes, for example) you should just append your url yourself and reload the grid with respect of trigger('reloadGrid'). For resetting of the information in the grid you can choose any way which you prefer. For example, you can include in the select controls which you have an option like "no filtering".

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

To be more exact your code should looks like the code from the answer how to reload jqgrid in asp.net mvc when i change dropdownlist:

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 中的数据.在 jqGrid 为我们执行的相应 $.ajax 请求期间，来自 postData 参数的值将作为 转发到 $.ajax数据 参数.如果 data 的一些属性是函数，这些函数将被 $.ajax 调用.因此，将加载来自选择框的实际数据，并将所有数据附加到发送到服务器的数据中.您只需要在您的服务器部分实现读取此参数.

If user change selected option in select box with id=StateId or another select box with id=CityId (with mouse or keyboard), the function myReload will be called, which just force reloading of data in jqGrid. During corresponding $.ajax request, which jqGrid do for us, the value from postData parameter will be forwarded to $.ajax as data parameter. If some from properties of data are functions, these function will be called by $.ajax. So the actual data from select boxes will be loaded and all the data will be appended to the data sent to the server. You need only implement reading of this parameters in your server part.

所以 postData 参数中的数据将被附加到 url(符号 '?' 和 '&' 将自动添加，所有特殊符号(如空格)也将照常编码).postData 的使用优点是:

So the data from the postData parameter will be appended to the url (symbols '?' and '&' will be added automatically and all special symbols like blanks will be also encoded as usual). The advantages of the usage of postData is:

1. postData 参数中的函数用法允许您从所有使用过的控件加载实际值到重新加载的时刻；
2. 您的代码结构非常清晰.
3. 不仅适用于 HTTP GET 请求，也适用于 HTTP POST；

1. usage of functions inside postData parameter allows you to load actual values from all used controls to the moment of reloading;
2. Your code stay have very clear structure.
3. All works fine not only with HTTP GET requests, but with HTTP POST also;

如果你在选择框StateId中使用了一些不过滤"或全部"的条目，你可以修改计算StateId参数值的函数，它应该从

If you use some "no filtering" or "all" entries in the select box StateId, you can modify the function which calculate the value of StateId parameter which should appended to the server url from

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

类似于以下内容:

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

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

On the server side you should makes no filtering for StateId if you receive an empty value as a parameter.

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

Optionally you can use myGrid.setCaption('A text'); to change a grid title. This allow user to see more clear, that the data in grid are filtered with some criteria.

这篇关于如何不使用内置的搜索/过滤框过滤 jqGrid 数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！