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

问题描述

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

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 中的数据.在相应的 $.ajax 请求期间，jqGrid 为我们做的，来自 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 数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！