如何过滤jqGrid数据不使用内置的search/filter框
我希望用户能够在不使用固有search框的情况下过滤网格数据。
我已经为date(从和)创build了两个input字段,现在需要告诉网格采用这个作为其filter,然后请求新的数据。
伪造网格数据的服务器请求(绕过网格)并将网格数据设置为响应数据将不起作用 – 因为一旦用户尝试重新sorting结果或更改页面等,网格将请求新的数据从服务器使用空白filter。
我似乎无法find网格API来实现这一点 – 有没有人有任何想法? 谢谢。
你的问题可以很容易地解决postData
参数包括函数和trigger('reloadGrid')
。 我尝试解释更详细的想法。
让我们使用mtype: "GET"
。 标准search/筛选器在显示界面之后做的唯一的事情是附加一些额外的参数给url,发送到服务器并重新加载网格数据。 如果您有自己的search/过滤界面(例如一些select控件或checkbox),您应该自己附加自己的url并重新加载关于trigger('reloadGrid')
的网格trigger('reloadGrid')
。 要重置网格中的信息,您可以select任何您喜欢的方式。 例如,您可以在select控件中包含“不过滤”选项。
更确切地说,你的代码应该看起来像答案中的代码, 当我更改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); });
如果用户在id=StateId
select框中改变了select的选项,或者用id=StateId
另外一个select框(用鼠标或者键盘), myReload
函数将被调用,这只会强制重载jqGrid中的数据。 在jqGrid为我们做的相应的$.ajax
请求期间,来自postData
参数的值将被转发到$.ajax
作为data
参数。 如果某些来自data
属性是函数,这些函数将被$.ajax
。 因此,select框中的实际数据将被加载,并且所有数据将被附加到发送到服务器的数据中。 你只需要在你的服务器部分读取这个参数。
因此, postData
参数中的数据将被附加到url(符号'?'和'&'将被自动添加,像空白那样的所有特殊符号也会像往常一样编码)。 postData
使用的postData
是:
-
postData
参数中的函数的使用允许您加载所有使用的控件的实际值到重新加载的时刻; - 你的代码保持非常清晰的结构。
- 所有的工作正常,不仅与HTTP GET请求,但与HTTP POST也;
如果在select框StateId
使用一些“不过滤”或“全部”条目,则可以修改计算应附加到服务器URL的StateId
参数的值的函数
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');
改变网格标题。 这使得用户可以更清楚地看到网格中的数据是按照一定的标准进行过滤的。
我有同样的要求,(与奥列格的帮助)想出了这个:
基本上,用户开始在“员工姓名”文本框中input内容,并立即将结果显示在jqGrid中。
我如何实现这个细节在这里:
jqGrid – 更改filter/searchpopup窗体 – 在页面上平放 – 不是对话框
请注意,我专门为我的jqGrid加载了所有的JSON数据,而对于大型数据集,在键入每个字符时,在iPhone / Android设备上运行此代码时会有延迟。
但是,对于桌面Web应用程序来说,这是一个很好的解决scheme,并且使得jqGrid对于用户来说非常友善。
通过使用ReloadGrid()
和jquery
函数,你可以使自己的自定义过滤function。