jQuery 如何不使用内置搜索/过滤框过滤 jqGrid 数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2928371/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to filter the jqGrid data NOT using the built in search/filter box
提问by Jimbo
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.
伪造网格数据的服务器请求（绕过网格）并将网格的数据设置为响应数据将不起作用 - 因为一旦用户尝试重新排序结果或更改页面等，网格将请求新数据从服务器使用空白过滤器。
I cant seem to find grid API to achieve this - does anyone have any ideas? Thanks.
我似乎无法找到网格 API 来实现这一点 - 有没有人有任何想法？谢谢。
回答by Oleg
You problem can be very easy solved with respect of postDataparameter including functions and trigger('reloadGrid'). I try explain the idea more detailed.
关于postData参数（包括函数和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".
让我们使用mtype: "GET". 标准搜索/过滤框在显示界面后所做的唯一一件事就是向 url 附加一些附加参数，发送到服务器并重新加载网格数据。如果您有自己的搜索/过滤界面（例如某些选择控件或复选框），您应该自己附加您的 url 并重新加载关于trigger('reloadGrid'). 要重置网格中的信息，您可以选择任何您喜欢的方式。例如，您可以在选择控件中包含诸如“无过滤”之类的选项。
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:
更准确地说，您的代码应该类似于如何在更改下拉列表时在 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);
});
If user change selected option in select box with id=StateIdor another select box with id=CityId(with mouse or keyboard), the function myReloadwill be called, which just force reloading of data in jqGrid. During corresponding $.ajaxrequest, which jqGrid do for us, the value from postDataparameter will be forwarded to $.ajaxas dataparameter. If some from properties of dataare 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.
如果用户id=StateId使用id=CityId（使用鼠标或键盘）更改选择框中的选定选项或另一个选择框， myReload则将调用该函数，这只会强制重新加载 jqGrid 中的数据。在相应的$.ajax请求中，jqGrid 为我们做的，来自postData参数的值将$.ajax作为data参数转发。如果某些来自属性的data函数是函数，则这些函数将被调用$.ajax。所以来自选择框的实际数据将被加载，所有数据将被附加到发送到服务器的数据中。您只需要在服务器部分实现对这些参数的读取。
So the data from the postDataparameter 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 postDatais:
因此，来自postData参数的数据将附加到 url（符号 '?' 和 '&' 将自动添加，并且所有特殊符号（如空格）也将照常编码）。使用的优点postData是：
- usage of functionsinside
postDataparameter allows you to load actualvalues from all used controls to the moment of reloading; - Your code stay have very clear structure.
- All works fine not only with HTTP GET requests, but with HTTP POST also;
postData参数内部函数的使用允许您从所有使用的控件加载实际值到重新加载的时刻；- 您的代码具有非常清晰的结构。
- 不仅适用于 HTTP GET 请求，还适用于 HTTP POST；
If you use some "no filtering" or "all" entries in the select box StateId, you can modify the function which calculate the value of StateIdparameter which should appended to the server url from
如果您在选择框中使用一些“无过滤”或“全部”条目StateId，您可以修改计算StateId应附加到服务器 url的参数值的函数
StateId: function() { return jQuery("#StateId option:selected").val(); }
to something like following:
类似于以下内容：
StateId: function() {
var val = jQuery("#StateId option:selected").val();
return val === "all"? "": val;
}
On the server side you should makes no filtering for StateIdif you receive an empty value as a parameter.
在服务器端，StateId如果您收到一个空值作为参数，则不应进行过滤。
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.
您可以选择使用myGrid.setCaption('A text');更改网格标题。这让用户可以更清楚地看到，网格中的数据是用一些标准过滤的。
回答by Mike Gledhill
I had the same requirements, and (with Oleg's help) came up with this:
我有同样的要求，并且（在 Oleg 的帮助下）想出了这个：
Basically, the user starts typing in the "Employee name" textbox, and immediately the results get shown in the jqGrid.
基本上，用户开始在“员工姓名”文本框中输入，结果立即显示在 jqGrid 中。
Details of how I implemented this are here:
我如何实现这一点的详细信息在这里：
jqGrid - Change filter/search pop up form - to be flat on page - not a dialog
jqGrid - 更改过滤器/搜索弹出表单 - 在页面上平坦 - 不是对话框
Note that I specifically load allof the JSON data for my jqGrid in advance, and that for large data sets, there is a delay when running this code on an iPhone/Android device as you type each character.
请注意，我预先为我的 jqGrid专门加载了所有JSON 数据，对于大型数据集，在 iPhone/Android 设备上运行此代码时，在您键入每个字符时会出现延迟。
But, for desktop web apps, it's a great solution, and makes jqGrid much friendler for the user.
但是，对于桌面 Web 应用程序，这是一个很好的解决方案，并且使 jqGrid 对用户更加友好。
回答by ???
By using ReloadGrid()and jqueryfunctions you can make your own custom filtering functions.
通过使用ReloadGrid()和jquery功能，您可以制作自己的自定义过滤功能。
