如何过滤jqGrid数据不使用内置的搜索/过滤器框 [英] How to filter the jqGrid data NOT using the built in search/filter box

问题描述

我已经为date（from和to）创建了两个输入字段，现在我们创建了两个输入字段需要告诉网格采用这个过滤器，然后请求新的数据。

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

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

解决方案

您的问题可以非常容易的解决 postData 参数，包括函数和 trigger（'reloadGrid'）。我试着解释更详细的想法。

让我们使用 mtype：GET。标准搜索/筛选器在显示界面之后做的唯一的事情是附加一些额外的参数给url，发送到服务器并重新加载网格数据。如果你有你自己的搜索/筛选界面（例如一些选择控件或复选框），你应该自己附加你的url，并重新加载网格的 trigger（'reloadGrid'）。要重置网格中的信息，您可以选择任何您喜欢的方式。例如，您可以在选择的控件中包含没有筛选选项。

更确切地说，您的代码看起来应该类似于答案中的代码如何重新加载jqgrid在asp.net mvc当我改变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 / *向上箭头* / || keyCode === 40 / *向下箭头* /）{
 
 if typeof refreshFunction ===function）{
 refreshFunction（obj）; 
} 
} 
}; 
 $ b $ ... 
 $（＃StateId）。change（myReload）.keyup（function（e）{
 keyupHandler（e，myReload，this）; 
}）; 
 $（＃CityId）。change（myReload）.keyup（function（e）{
 keyupHandler（e，myReload，this）; 
}）; 
  

如果用户在 id = StateId 或另一个带有鼠标或键盘的选择框， id = CityId 所谓的，这只是强制在jqGrid中重新加载数据。在相应的 $。ajax 请求中，jqGrid为我们做的 postData 参数的值将被转发到 $。ajax 作为 data 参数。如果 data 的某些属性是函数，那么这些函数将被 $。ajax 调用。因此，选择框中的实际数据将被加载，并且所有数据将被附加到发送到服务器的数据中。你只需要在你的服务器部分实现这个参数的读取。
$ b $ p因此，来自 postData 参数的数据将是附加到URL（符号'？'和'&'将被自动添加，像空白一样的所有特殊符号也将照常编码）。使用 postData 的优点是：

1. 功能的使用在 postData 参数中 允许您从所有使用的控件的实际值加载到重新加载的时刻;
   
2. 您的代码保持非常清晰的结构。


3. 所有的工作都不仅适用于HTTP GET请求，还适用于HTTP POST

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

  StateId：function（）{return jQuery（＃StateId option：selected）。val（）; } 
  

如下所示：

 StateId：function（）{
 var val = jQuery（＃StateId option：selected）。val（）; 
返回val ===全部？ ：val; 
 
 
 
 $ b $ p 
 $ b 
在服务器端，你不应该过滤你可以使用 myGrid.setCaption（'TextId ，如果你收到一个空值作为参数。 '）; 更改网格标题。这使得用户可以更清楚地看到网格中的数据是按照某些标准进行过滤的。 
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.
解决方案
You problem can be very easy solved with respect of postData parameter including functions and trigger('reloadGrid'). I try explain the idea more detailed.

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".

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);
});
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.

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:

usage of functions inside postData parameter allows you to load actual values 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;
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(); }
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 StateId if you receive an empty value as a parameter.

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数据不使用内置的搜索/过滤器框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！