jqGrid与Struts2的结合应用（十） —— 真正的自定义表单查询

于 2012-04-15 15:14:00 发布
阅读量96 收藏
点赞数
文章标签： java xhtml json
本文详细探讨了如何实现自定义查询，并通过分析jqGrid源码，揭示了其实现方法。主要内容包括单条件与多条件查询的实现、查询参数的控制以及对官方文档中“自定义查询”功能的对比分析。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

关于这个问题，我在网上搜了一下，大多都是引用jqGrid的文档中的filterGrid方法。但这个方法不是真正意义的自定义查询。

这篇文章主要讲述一下真正意义的自定义查询，顺便简单聊聊jqGrid源码中查询的实现方法。

在这个系列的第五篇中（http://blog.youkuaiyun.com/gengv/archive/2010/07/10/5725172.aspx ）曾经讲到了如何进行数据查询。其中提到了一种“自定义查询”，这是jqGrid的文档中给出的一种所谓的自定义查询。其实就是把工具条查询，从Grid表格中移出来，然后可以控制输入框的横向或纵向排列，构成一种看似表单查询的查询方式。但是这种方式也有一定的局限性，比如不能以colModel中不存在的列作为查询字段进行查询，不能做到真正意义上的自定义表单布局等等。

昨天，优快云的一位网友gaile给我的博客留言：

searchGrid的弹出的对话框的find按钮点击的时候是调用的triggerSearch()方法吗？那么重置按钮点击的时候都做了哪些操作啊？？我只知道它也发送了请求到server,但是如果我想点击重置的时候只是清除查询条件，而不让它发送请求到server端 该怎么做呢？？请问这些按钮的具体操作我能在哪个文件里找到？？谢谢了！

还有，假如我想自定义serach弹出框的格式该怎么做呢?


他的问题实际上就是：如何实现自定义的表单查询。正好最近我也在考虑这个问题，昨晚特意查看了一下jqGrid的源码，顺便总结出这篇文章。

我们需要的是对查询的控制权，也就是最终发送给Server端的请求，而不只是通过jqGrid选项支配的那些自动生成的查询请求参数。


1. 查询的实现思路：


通过前面文章的介绍，可以知道jqGrid在查询中主要的任务是向Server发送有关于查询的参数，主要的参数包括search、searchField、searchOper、searchString、filters等（这些参数名可以通过选项进行更改，可以参考之前的文章）；Server得到参数后，进行后台数据查询，然后将结果发回客户端；jqGrid根据jsonReader的设置，解析返回的结果并显示到Grid表格中。


大体思路就是这样。既然如此，我们要想实现真正的自定义查询，要解决的无非就是如何把有关查询的参数“塞进”请求里。需要用到两个jqGrid选项：

  • postData ：可以参考本系列第九篇（http://blog.youkuaiyun.com/gengv/archive/2010/07/14/5735654.aspx）；当jqGrid向Server发送请求的时候，总是会将postData中的{name:value,...}对，作为参数一同传递到服务器端。因此我们只需要在发送查询请求的时候，将关于查询的参数放进postData就可以了。
  • search ：这个jqGrid选项，在jqGrid的官方文档中并没有列出来，但确实存在；它的值可以为true或false，用来控制是否为查询请求，如果为true，则在请求中加入search=true参数；可以使用jqGrid的setGridParam方法修改它。


注1 ：search选项传入的这个search=true参数，其参数名称“search”是由jqGrid的prmNames选项中设置的，默认为“_search”，此处是为了Server端java程序中成员变量命名方便，而设置为“search”了（具体细节可以参看本系列第一篇http://blog.youkuaiyun.com/gengv/archive/2010/07/05/5714834.aspx ）。


注2 ：search选项传入请求的search参数值，优先于postData中的同名参数值。即如果serach选型值为flase，而postData中有个名值对为{search:true}，则请求为http://...action?search=false&...&search=true。此时第一个search参数（由search选项控制）将使第二个search参数（postData提供）被忽略。



2. 自定义单条件查询的实现

根据之前文章的介绍，当单条件查询发送请求时，参数应为如下形式：

[javascript] view plain copy print ?
  1. nd：1278688214496
  2. page：1
  3. rows：15
  4. search：true//(1)
  5. searchField：id//(2)
  6. searchOper：ge//(3)
  7. searchString：9000//(4)
  8. sidx：
  9. sord：asc
nd： 1278688214496 page： 1 rows： 15 search： true // (1) searchField： id // (2) searchOper： ge // (3) searchString： 9000 // (4) sidx： sord： asc

其中(1)(2)(3)(4)是我们最关注的。

下面看看如何来实现单条件自定义查询：
HTML部分：

[xhtml] view plain copy print ?
  1. ...
  3. <body>
  4. <h3>
  5. jqGrid测试09
  6. </h3>
  7. <divid="mysearch"></div>
  8. <br/>
  9. <div>
  10. <tableid="gridTable"></table>
  11. <divid="gridPager"></div>
  12. </div>
  14. <br/>
  16. <div>
  17. <buttononclick="openSingleSearchDialog()">自定义单条件查询</button>
  18. <buttononclick="clearSearch()">重置</button>
  19. </div>
  21. <divid="singleSearchDialog">
  22. <tableclass="formTable">
  23. <thead>
  24. <tr>
  25. <th>查询条件</th>
  26. <th>查询方式</th>
  27. <th>查询值</th>
  28. </tr>
  29. </thead>
  30. <tbody>
  31. <tr>
  32. <td>
  33. <inputtype="radio"name="searchField"value="id">编码</input><br/>
  34. <inputtype="radio"name="searchField"value="lastName">姓</input><br/>
  35. <inputtype="radio"name="searchField"value="firstName">名</input>
  36. </td>
  37. <td>
  38. <selectid="searchOper">
  39. <optionvalue="eq">等于</option>
  40. <optionvalue="gt">大于</option>
  41. <optionvalue="lt">小于</option>
  42. </select>
  43. </td>
  44. <td>
  45. <inputtype="text"id="searchString"></input>
  46. </td>
  47. </tr>
  48. </tbody>
  49. </table>
  50. </div>
  52. </body>
  54. ...
... <body> <h3> jqGrid测试 09 </h3> <div id="mysearch"></div> <br /> <div> <table id="gridTable"></table> <div id="gridPager"></div> </div> <br /> <div> <button onclick="openSingleSearchDialog()">自定义单条件查询</button> <button onclick="clearSearch()">重置</button> </div> <div id="singleSearchDialog"> <table class="formTable"> <thead> <tr> <th>查询条件</th> <th>查询方式</th> <th>查询值</th> </tr> </thead> <tbody> <tr> <td> <input type="radio" name="searchField" value="id">编码</input><br /> <input type="radio" name="searchField" value="lastName">姓</input><br /> <input type="radio" name="searchField" value="firstName">名</input> </td> <td> <select id="searchOper"> <option value="eq">等于</option> <option value="gt">大于</option> <option value="lt">小于</option> </select> </td> <td> <input type="text" id="searchString"></input> </td> </tr> </tbody> </table> </div> </body> ...

HTML中增加了一个自定义的<div>，singleSearchDialog；而且使用radio组来选择查询字段。


再看看javascript部分：

[javascript] view plain copy print ?
  1. $(function(){
  2. $("#gridTable").jqGrid({
  3. ...
  5. prmNames:{search:"search"},
  7. ...
  9. });
  11. $("#singleSearchDialog").dialog({//(1)创建自定义查询对话框
  12. autoOpen:false,
  13. modal:true,
  14. resizable:true,
  15. width:350,
  16. title:"自定义单条件查询",
  17. buttons:{
  18. "查询":singleSearch//(2)在对话框中添加查询按钮
  19. }
  20. });
  23. });
  24. varopenSingleSearchDialog=function(){
  25. $("#singleSearchDialog").dialog("open");
  26. };
  27. varresetSingleSearchDialog=function(){
  28. $("radio","#singleSearchDialog").attr("checked",false);
  29. $(":text","#singleSearchDialog").val("");
  30. };
  31. varsingleSearch=function(){
  32. varsdata={//(3)构建查询需要的参数
  33. searchField:$(":radio:checked","#singleSearchDialog").val(),
  34. searchString:$("#searchString","#singleSearchDialog").val(),
  35. searchOper:$("#searchOper","#singleSearchDialog").val()
  36. };
  38. //(4)获得当前postData选项的值
  39. varpostData=$("#gridTable").jqGrid("getGridParam","postData");
  41. //(5)将查询参数融入postData选项对象
  42. $.extend(postData,sdata);
  44. $("#gridTable").jqGrid("setGridParam",{
  45. search:true//(6)将jqGrid的search选项设为true
  46. }).trigger("reloadGrid",[{page:1}]);//(7)重新载入Grid表格，以使上述设置生效
  48. $("#singleSearchDialog").dialog("close");
  49. };
  50. varclearSearch=function(){
  51. varsdata={//(8)构建一套空的查询参数
  52. searchField:"",
  53. searchString:"",
  54. searchOper:""
  55. };
  57. varpostData=$("#gridTable").jqGrid("getGridParam","postData");
  59. $.extend(postData,sdata);//(9)将postData中的查询参数覆盖为空值
  61. $("#gridTable").jqGrid("setGridParam",{
  62. search:false//(10)将jqGrid的search选项设为false
  63. }).trigger("reloadGrid",[{page:1}]);
  65. resetSingleSearchDialog();
  66. };
$(function(){ $("#gridTable").jqGrid({ ... prmNames: {search: "search"}, ... }); $("#singleSearchDialog").dialog({ // (1)创建自定义查询对话框 autoOpen: false, modal: true, resizable: true, width: 350, title: "自定义单条件查询", buttons: { "查询": singleSearch // (2)在对话框中添加查询按钮 } }); }); var openSingleSearchDialog = function() { $("#singleSearchDialog").dialog("open"); }; var resetSingleSearchDialog = function() { $("radio","#singleSearchDialog").attr("checked", false); $(":text","#singleSearchDialog").val(""); }; var singleSearch = function() { var sdata = { // (3)构建查询需要的参数 searchField: $(":radio:checked", "#singleSearchDialog").val(), searchString: $("#searchString", "#singleSearchDialog").val(), searchOper: $("#searchOper", "#singleSearchDialog").val() }; // (4)获得当前postData选项的值 var postData = $("#gridTable").jqGrid("getGridParam", "postData"); // (5)将查询参数融入postData选项对象 $.extend(postData, sdata); $("#gridTable").jqGrid("setGridParam", { search: true // (6)将jqGrid的search选项设为true }).trigger("reloadGrid", [{page:1}]); // (7)重新载入Grid表格，以使上述设置生效 $("#singleSearchDialog").dialog("close"); }; var clearSearch = function() { var sdata = { // (8)构建一套空的查询参数 searchField: "", searchString: "", searchOper: "" }; var postData = $("#gridTable").jqGrid("getGridParam", "postData"); $.extend(postData, sdata); //(9)将postData中的查询参数覆盖为空值 $("#gridTable").jqGrid("setGridParam", { search: false // (10)将jqGrid的search选项设为false }).trigger("reloadGrid", [{page:1}]); resetSingleSearchDialog(); };

说明：

  • (7)处设置完jqGrid参数后，重新载入表格时，jqGrid将会将postData中的参数加进请求参数中，因此将提交查询请求；在显式清除postData中的参数之前，每次查询都会带着这些查询参数。
  • (9)处将postData中的关于查询的参数全都覆盖为空值，重新载入表格后，请求中将不再传入“有效”的查询参数，即有查询参数名，但无查询参数值。例如： http://localhost:8085/JqGridTest/jqGridTest/jqGrid05.action?search=false &nd=1279865475529&rows=15&page=2&sidx=&sord=asc&searchField=&searchString=&searchOper=

注意：
不论在查询或者清除查询之后条用trigger("reloadGrid")，都应该带上“[{page:1}]”，以设置page选项为1，即：

$("#gridTable").jqGrid(...).trigger("reloadGrid", [{page:1}]);


如果不加上这个参数的话，那么后续的查询中，page都始终保持之前操作时保存的值，对于后面再进行的查询很能产生副作用。举个例子来说，第一次查询使用查询条件A，如果满足条件的数据有110行，Grid中每页显示20行（即每次从Server最多返回20行），则总共有6页数据；这时翻页，一直翻到第4页；然后使用查询条件B再次进行查询，假设这次查询满足条件的数据总共只有35行，每页显示20行，也即只有2页数据，那么如果page的值还是4的话，则后台就找不到数据了。因此，应该使用trigger("reloadGrid", [{page:1}]);，这样总能保证，即使查询结果只有1页数据，也能被显示出来。


3. 自定义多条件查询的实现
多条件查询与但条件查询的不同之处即在于使用filters参数，代替了searchField，searchOper，searchString参数。其参数形式为：

[javascript] view plain copy print ?
  1. filters:{
  2. "groupOp":"AND",
  3. "rules":[
  4. {"field":"id","op":"le","data":"1500"},
  5. {"field":"lastName","op":"bw","data":"LN-3"},
  6. {"field":"email","op":"cn","data":"sy"}
  7. ]
  8. }
  9. nd:1278688110637
  10. page:1
  11. rows:15
  12. search:true
  13. sidx:
  14. sord:asc
filters: { "groupOp": "AND", "rules": [ {"field":"id","op":"le","data":"1500"}, {"field":"lastName","op":"bw","data":"LN-3"}, {"field":"email","op":"cn","data":"sy"} ] } nd: 1278688110637 page: 1 rows: 15 search: true sidx: sord: asc

因此具体实现也与上述大同小异，只要加入正确的filters参数就行了。

首先看HTML部分，加入了multipleSearchDialog。

[xhtml] view plain copy print ?
  1. ...
  3. <div>
  4. ...
  5. <buttononclick="openMultipleSearchDialog()">自定义复杂条件查询</button>
  6. </div>
  8. ...
  10. <divid="multipleSearchDialog">
  11. <tableclass="formTable">
  12. <thead>
  13. <tr>
  14. <th>查询条件</th>
  15. <th>查询方式</th>
  16. <th>查询值</th>
  17. </tr>
  18. </thead>
  19. <tbody>
  20. <tr>
  21. <td>
  22. <selectclass="searchField">
  23. <optionvalue="id">编码</option>
  24. <optionvalue="lastName">姓</option>
  25. <optionvalue="firstName">名</option>
  26. </select>
  27. </td>
  28. <td>
  29. <selectclass="searchOper">
  30. <optionvalue="eq">等于</option>
  31. <optionvalue="gt">大于</option>
  32. <optionvalue="lt">小于</option>
  33. </select>
  34. </td>
  35. <td>
  36. <inputtype="text"class="searchString"></input>
  37. </td>
  38. </tr>
  39. <tr>
  40. <td>
  41. <selectclass="searchField">
  42. <optionvalue="id">编码</option>
  43. <optionvalue="lastName">姓</option>
  44. <optionvalue="firstName">名</option>
  45. </select>
  46. </td>
  47. <td>
  48. <selectclass="searchOper">
  49. <optionvalue="eq">等于</option>
  50. <optionvalue="gt">大于</option>
  51. <optionvalue="lt">小于</option>
  52. </select>
  53. </td>
  54. <td>
  55. <inputtype="text"class="searchString"></input>
  56. </td>
  57. </tr>
  58. <tr>
  59. <td>
  60. <selectclass="searchField">
  61. <optionvalue="id">编码</option>
  62. <optionvalue="lastName">姓</option>
  63. <optionvalue="firstName">名</option>
  64. </select>
  65. </td>
  66. <td>
  67. <selectclass="searchOper">
  68. <optionvalue="eq">等于</option>
  69. <optionvalue="gt">大于</option>
  70. <optionvalue="lt">小于</option>
  71. </select>
  72. </td>
  73. <td>
  74. <inputtype="text"class="searchString"></input>
  75. </td>
  76. </tr>
  77. </tbody>
  78. </table>
  79. </div>
  81. ...
... <div> ... <button onclick="openMultipleSearchDialog()">自定义复杂条件查询</button> </div> ... <div id="multipleSearchDialog"> <table class="formTable"> <thead> <tr> <th>查询条件</th> <th>查询方式</th> <th>查询值</th> </tr> </thead> <tbody> <tr> <td> <select class="searchField"> <option value="id">编码</option> <option value="lastName">姓</option> <option value="firstName">名</option> </select> </td> <td> <select class="searchOper"> <option value="eq">等于</option> <option value="gt">大于</option> <option value="lt">小于</option> </select> </td> <td> <input type="text" class="searchString"></input> </td> </tr> <tr> <td> <select class="searchField"> <option value="id">编码</option> <option value="lastName">姓</option> <option value="firstName">名</option> </select> </td> <td> <select class="searchOper"> <option value="eq">等于</option> <option value="gt">大于</option> <option value="lt">小于</option> </select> </td> <td> <input type="text" class="searchString"></input> </td> </tr> <tr> <td> <select class="searchField"> <option value="id">编码</option> <option value="lastName">姓</option> <option value="firstName">名</option> </select> </td> <td> <select class="searchOper"> <option value="eq">等于</option> <option value="gt">大于</option> <option value="lt">小于</option> </select> </td> <td> <input type="text" class="searchString"></input> </td> </tr> </tbody> </table> </div> ...


再来看javascript部分：

[javascript] view plain copy print ?
  1. $(function(){
  2. $("#gridTable").jqGrid({
  3. ...
  4. });
  6. ...
  8. $("#multipleSearchDialog").dialog({
  9. autoOpen:false,
  10. modal:true,
  11. resizable:true,
  12. width:350,
  13. title:"自定义多条件查询",
  14. buttons:{
  15. "查询":multipleSearch
  16. }
  17. });
  20. });
  21. ...
  22. varopenMultipleSearchDialog=function(){
  23. $("#multipleSearchDialog").dialog("open");
  24. };
  25. varmultipleSearch=function(){
  26. varrules="";
  28. $("tbodytr","#multipleSearchDialog").each(function(i){//(1)从multipleSearchDialog对话框中找到各个查询条件行
  29. varsearchField=$(".searchField",this).val();//(2)获得查询字段
  30. varsearchOper=$(".searchOper",this).val();//(3)获得查询方式
  31. varsearchString=$(".searchString",this).val();//(4)获得查询值
  33. if(searchField&&searchOper&&searchString){//(5)如果三者皆有值且长度大于0，则将查询条件加入rules字符串
  34. rules+=',{"field":"'+searchField+'","op":"'+searchOper+'","data":"'+searchString+'"}';
  35. }
  36. });
  38. if(rules){//(6)如果rules不为空，且长度大于0，则去掉开头的逗号
  39. rules=rules.substring(1);
  40. }
  42. //(7)串联好filtersStr字符串
  43. varfiltersStr='{"groupOp":"AND","rules":['+rules+']}';
  45. varpostData=$("#gridTable").jqGrid("getGridParam","postData");
  47. //(8)将filters参数串加入postData选项
  48. $.extend(postData,{filters:filtersStr});
  50. $("#gridTable").jqGrid("setGridParam",{
  51. search:true//(9)将jqGrid的search选项设为true
  52. }).trigger("reloadGrid",[{page:1}]);//(10)重新载入Grid表格
  54. $("#multipleSearchDialog").dialog("close");
  55. };
$(function(){ $("#gridTable").jqGrid({ ... }); ... $("#multipleSearchDialog").dialog({ autoOpen: false, modal: true, resizable: true, width: 350, title: "自定义多条件查询", buttons: { "查询": multipleSearch } }); }); ... var openMultipleSearchDialog = function() { $("#multipleSearchDialog").dialog("open"); }; var multipleSearch = function() { var rules = ""; $("tbody tr", "#multipleSearchDialog").each(function(i){ //(1)从multipleSearchDialog对话框中找到各个查询条件行 var searchField = $(".searchField", this).val(); //(2)获得查询字段 var searchOper = $(".searchOper", this).val(); //(3)获得查询方式 var searchString = $(".searchString", this).val(); //(4)获得查询值 if(searchField && searchOper && searchString) { //(5)如果三者皆有值且长度大于0，则将查询条件加入rules字符串 rules += ',{"field":"' + searchField + '","op":"' + searchOper + '","data":"' + searchString + '"}'; } }); if(rules) { //(6)如果rules不为空，且长度大于0，则去掉开头的逗号 rules = rules.substring(1); } //(7)串联好filtersStr字符串 var filtersStr = '{"groupOp":"AND","rules":[' + rules + ']}'; var postData = $("#gridTable").jqGrid("getGridParam", "postData"); //(8)将filters参数串加入postData选项 $.extend(postData, {filters: filtersStr}); $("#gridTable").jqGrid("setGridParam", { search: true //(9)将jqGrid的search选项设为true }).trigger("reloadGrid", [{page:1}]); //(10)重新载入Grid表格 $("#multipleSearchDialog").dialog("close"); };

OK，这样就实现了自定义多条件查询。同时可以看到，colModel中根本不存在身份证号（idCardNo）这一列，但是在查询中依然可以使用这个字段进行查询。

另一方面，由于自己把握了查询参数的控制权，jqGrid的multipleSearch选项将变得无足轻重了。上面的两个例子，仅作说明之用，从外观上来看，还比较粗糙。但已经从根本上控制住了查询的实现。即使在复杂的页面设计，也不会影响查询的实现了。这与jqGrid官方文档中提供的“自定义查询”，是有本质区别的。

对于页面布局的美化，以及动态添加查询条件行等等，只要基本的CSS+JavaScript知识就能实现，因此不再本文的讨论内容中了。


4. jqGrid源码
jqGrid的源码可以从以下链接得到：
http://github.com/tonytomov/jqGrid

关于查询这部分的代码，可以查看：
http://github.com/tonytomov/jqGrid/blob/master/js/grid.formedit.js

片段1：

[javascript] view plain copy print ?
  1. $t.SearchFilter=$("#"+fid).searchFilter(fields,{groupOps:p.groupOps,operators:oprtr,onClose:hideFilter,resetText:p.Reset,searchText:p.Find,windowTitle:p.caption,rulesText:p.rulesText,matchText:p.matchText,onSearch:searchFilters,onReset:resetFilters,stringResult:p.stringResult,ajaxSelectOptions:$.extend({},$.jgrid.ajaxOptions,$t.p.ajaxSelectOptions||{}),clone:p.cloneSearchRowOnAdd});
$t.SearchFilter = $("#"+fid).searchFilter(fields, { groupOps: p.groupOps, operators: oprtr, onClose:hideFilter, resetText: p.Reset, searchText: p.Find, windowTitle: p.caption, rulesText:p.rulesText, matchText:p.matchText, onSearch: searchFilters, onReset: resetFilters,stringResult:p.stringResult, ajaxSelectOptions: $.extend({},$.jgrid.ajaxOptions,$t.p.ajaxSelectOptions ||{}), clone: p.cloneSearchRowOnAdd });

片段2：

[javascript] view plain copy print ?
  1. functionsearchFilters(filters){
  2. varhasFilters=(filters!==undefined),//(1)
  3. grid=$("#"+$t.p.id),sdata={};
  4. if(p.multipleSearch===false){//(2)
  5. sdata[p.sField]=filters.rules[0].field;
  6. sdata[p.sValue]=filters.rules[0].data;
  7. sdata[p.sOper]=filters.rules[0].op;
  8. }else{
  9. sdata[p.sFilter]=filters;//(3)
  10. }
  11. grid[0].p.search=hasFilters;//(4)
  12. $.extend(grid[0].p.postData,sdata);//(5)
  13. grid.trigger("reloadGrid",[{page:1}]);//(6)
  14. if(p.closeAfterSearch){hideFilter($("#"+fid));}//(7)
  15. }
  16. functionresetFilters(op){
  17. varreload=op&&op.hasOwnProperty("reload")?op.reload:true;
  18. grid=$("#"+$t.p.id),sdata=[];
  19. grid[0].p.search=false;
  20. if(p.multipleSearch===false){
  21. sdata[p.sField]=sdata[p.sValue]=sdata[p.sOper]="";
  22. }else{
  23. sdata[p.sFilter]="";
  24. }
  25. $.extend(grid[0].p.postData,sdata);
  26. if(reload){
  27. grid.trigger("reloadGrid",[{page:1}]);
  28. }
  29. if(p.closeAfterReset){hideFilter($("#"+fid));}
  30. }
function searchFilters(filters) { var hasFilters = (filters !== undefined), //(1) grid = $("#"+$t.p.id), sdata={}; if(p.multipleSearch===false) { //(2) sdata[p.sField] = filters.rules[0].field; sdata[p.sValue] = filters.rules[0].data; sdata[p.sOper] = filters.rules[0].op; } else { sdata[p.sFilter] = filters; //(3) } grid[0].p.search = hasFilters; //(4) $.extend(grid[0].p.postData,sdata); //(5) grid.trigger("reloadGrid",[{page:1}]); //(6) if(p.closeAfterSearch) { hideFilter($("#"+fid)); } //(7) } function resetFilters(op) { var reload = op && op.hasOwnProperty("reload") ? op.reload : true; grid = $("#"+$t.p.id), sdata=[]; grid[0].p.search = false; if(p.multipleSearch===false) { sdata[p.sField] = sdata[p.sValue] = sdata[p.sOper] = ""; } else { sdata[p.sFilter] = ""; } $.extend(grid[0].p.postData,sdata); if(reload) { grid.trigger("reloadGrid",[{page:1}]); } if(p.closeAfterReset) { hideFilter($("#"+fid)); } }

我没有从头到尾通读所有代码，没有时间，也没有那么高水平，呵呵~

但从上面片段1中可以看出来：
在查询对话框中点击“查询”按钮，则执行searchFilters方法；而点击“重置”按钮，则执行resetFilters方法。

再看看searchFilters方法：

  • (1)首先判断是否存在filters；
  • (2)如果multipleSearch选项为false，则构建以sField、sOper、sValue所对应的参数名为内容的参数（默认的参数名为：searchField、searchOper、searchString）；
  • (3)如果multipleSearch选项为true，则构建sFilter对应的参数名的参数（默认为filters）；
  • (4)然后将查询参数置入postData选项；
  • (5)如果存在filters，则将jqGrid的search选项设为true；这与$("#gridTable").jqGrid("setGridParam", { search: true });是一样的。
  • (6)重新载入表格数据（发送包含查询参数的请求）；
  • (7)如果closeAfterSearch为true，则查询完毕后，关闭查询对话框。


总体看来，与之前自定义的条件查询实现基本一样，所不同的是，这里把单条件和多条件查询和在一起了。

而resetFilters方法，与之前自定义的实现，思路也基本一样，不再赘述。由于searchFilters和resetFilters是定义在searchGird方法中的函数，因此在外部调用时，还是有点困难的。



附上本文完整前端代码（后台代码可以参考之前的文章）：
HTML部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"> <head> <title>jqGrid09</title> <link rel="stylesheet" type="text/css" media="screen" href="../css/themes/aero/jquery-ui-1.8.1.custom.css" mce_href="css/themes/aero/jquery-ui-1.8.1.custom.css" /> <link rel="stylesheet" type="text/css" media="screen" href="../css/themes/aero/ui.jqgrid.custom.css" mce_href="css/themes/aero/ui.jqgrid.custom.css" /> <link href="../css/genericFormTable.css" mce_href="css/genericFormTable.css" rel="stylesheet" type="text/css" /> <mce:script type="text/javascript" src="../js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js"></mce:script> <mce:script src="../js/jquery-ui-1.8.1.custom.min.js" mce_src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></mce:script> <mce:script src="../js/i18n/grid.locale-zh-CN.js" mce_src="js/i18n/grid.locale-zh-CN.js" type="text/javascript"></mce:script> <mce:script src="../js/jquery.jqGrid.min.js" mce_src="js/jquery.jqGrid.min.js" type="text/javascript"></mce:script> <mce:script src="js/jqGrid09.js" mce_src="js/jqGrid09.js" type="text/javascript"></mce:script> </head> <body> <h3> jqGrid测试 09 </h3> <div id="mysearch"></div> <br /> <div> <table id="gridTable"></table> <div id="gridPager"></div> </div> <br /> <div> <button onclick="openSingleSearchDialog()">自定义单条件查询</button> <button onclick="clearSearch()">重置</button> <button onclick="openMultipleSearchDialog()">自定义复杂条件查询</button> </div> <div id="singleSearchDialog"> <table class="formTable"> <thead> <tr> <th>查询条件</th> <th>查询方式</th> <th>查询值</th> </tr> </thead> <tbody> <tr> <td> <input type="radio" name="searchField" value="id">编码</input><br/> <input type="radio" name="searchField" value="lastName">姓</input><br/> <input type="radio" name="searchField" value="firstName">名</input> </td> <td> <select id="searchOper"> <option value="eq">等于</option> <option value="gt">大于</option> <option value="lt">小于</option> </select> </td> <td> <input type="text" id="searchString"></input> </td> </tr> </tbody> </table> </div> <div id="multipleSearchDialog"> <table class="formTable"> <thead> <tr> <th>查询条件</th> <th>查询方式</th> <th>查询值</th> </tr> </thead> <tbody> <tr> <td> <select class="searchField"> <option value="id">编码</option> <option value="lastName">姓</option> <option value="firstName">名</option> <option value="idCardNo">身份证</option> </select> </td> <td> <select class="searchOper"> <option value="eq">等于</option> <option value="gt">大于</option> <option value="lt">小于</option> <option value="cn">包含</option> <option value="bw">开头</option> </select> </td> <td> <input type="text" class="searchString"></input> </td> </tr> <tr> <td> <select class="searchField"> <option value="id">编码</option> <option value="lastName">姓</option> <option value="firstName">名</option> <option value="idCardNo">身份证</option> </select> </td> <td> <select class="searchOper"> <option value="eq">等于</option> <option value="gt">大于</option> <option value="lt">小于</option> <option value="cn">包含</option> <option value="bw">开头</option> </select> </td> <td> <input type="text" class="searchString"></input> </td> </tr> <tr> <td> <select class="searchField"> <option value="id">编码</option> <option value="lastName">姓</option> <option value="firstName">名</option> <option value="idCardNo">身份证</option> </select> </td> <td> <select class="searchOper"> <option value="eq">等于</option> <option value="gt">大于</option> <option value="lt">小于</option> <option value="cn">包含</option> <option value="bw">开头</option> </select> </td> <td> <input type="text" class="searchString"></input> </td> </tr> </tbody> </table> </div> </body> </html>

JavaScript部分：

$(function(){ $("#gridTable").jqGrid({ url: "listContacts.action", datatype: "json", mtype: "GET", height: 350, width: 600, colModel: [ {name:"id",index:"id",label:"编码",width:40,sortable:false}, {name:"lastName",index:"lastName",label:"姓",width:80,sortable:false}, {name:"firstName",index:"firstName",label:"名",width:80,sortable:false}, {name:"email",index:"email",label:"电子邮箱",width:160,sortable:false}, {name:"telNo",index:"telNo",label:"电话",width:120,sortable:false} ], viewrecords: true, rowNum: 15, rowList: [15,50,100], prmNames: {search: "search"}, jsonReader: { root:"gridModel", records: "record", repeatitems : false }, pager: "#gridPager", caption: "联系人列表", hidegrid: false, shrikToFit: true }); $("#singleSearchDialog").dialog({ autoOpen: false, modal: true, resizable: true, width: 350, title: "自定义单条件查询", buttons: { "查询": singleSearch } }); $("#multipleSearchDialog").dialog({ autoOpen: false, modal: true, resizable: true, width: 350, title: "自定义多条件查询", buttons: { "查询": multipleSearch } }); }); var openSingleSearchDialog = function() { $("#singleSearchDialog").dialog("open"); }; var resetSingleSearchDialog = function() { $("radio","#singleSearchDialog").attr("checked", false); $(":text","#singleSearchDialog").val(""); }; var singleSearch = function() { var sdata = { searchField: $(":radio:checked", "#singleSearchDialog").val(), searchString: $("#searchString", "#singleSearchDialog").val(), searchOper: $("#searchOper", "#singleSearchDialog").val() }; var postData = $("#gridTable").jqGrid("getGridParam", "postData"); $.extend(postData, sdata); $("#gridTable").jqGrid("setGridParam", { search: true }).trigger("reloadGrid", [{page:1}]); $("#singleSearchDialog").dialog("close"); }; var clearSearch = function() { var sdata = { searchField: "", searchString: "", searchOper: "" }; var postData = $("#gridTable").jqGrid("getGridParam", "postData"); $.extend(postData, sdata); $("#gridTable").jqGrid("setGridParam", { search: false }).trigger("reloadGrid", [{page:1}]); resetSingleSearchDialog(); }; var openMultipleSearchDialog = function() { $("#multipleSearchDialog").dialog("open"); }; var multipleSearch = function() { var rules = ""; $("tbody tr", "#multipleSearchDialog").each(function(i){ var searchField = $(".searchField", this).val(); var searchOper = $(".searchOper", this).val(); var searchString = $(".searchString", this).val(); if(searchField && searchOper && searchString) { rules += ',{"field":"' + searchField + '","op":"' + searchOper + '","data":"' + searchString + '"}'; } }); if(rules) { rules = rules.substring(1); } var filtersStr = '{"groupOp":"AND","rules":[' + rules + ']}'; var postData = $("#gridTable").jqGrid("getGridParam", "postData"); $.extend(postData, {filters: filtersStr}); $("#gridTable").jqGrid("setGridParam", { search: true }).trigger("reloadGrid", [{page:1}]); $("#multipleSearchDialog").dialog("close"); };

关于这个问题，我在网上搜了一下，大多都是引用jqGrid的文档中的filterGrid方法。但这个方法不是真正意义的自定义查询。

这篇文章主要讲述一下真正意义的自定义查询，顺便简单聊聊jqGrid源码中查询的实现方法。

在这个系列的第五篇中（http://blog.youkuaiyun.com/gengv/archive/2010/07/10/5725172.aspx ）曾经讲到了如何进行数据查询。其中提到了一种“自定义查询”，这是jqGrid的文档中给出的一种所谓的自定义查询。其实就是把工具条查询，从Grid表格中移出来，然后可以控制输入框的横向或纵向排列，构成一种看似表单查询的查询方式。但是这种方式也有一定的局限性，比如不能以colModel中不存在的列作为查询字段进行查询，不能做到真正意义上的自定义表单布局等等。

昨天，优快云的一位网友gaile给我的博客留言：

searchGrid的弹出的对话框的find按钮点击的时候是调用的triggerSearch()方法吗？那么重置按钮点击的时候都做了哪些操作啊？？我只知道它也发送了请求到server,但是如果我想点击重置的时候只是清除查询条件，而不让它发送请求到server端 该怎么做呢？？请问这些按钮的具体操作我能在哪个文件里找到？？谢谢了！

还有，假如我想自定义serach弹出框的格式该怎么做呢?


他的问题实际上就是：如何实现自定义的表单查询。正好最近我也在考虑这个问题，昨晚特意查看了一下jqGrid的源码，顺便总结出这篇文章。

我们需要的是对查询的控制权，也就是最终发送给Server端的请求，而不只是通过jqGrid选项支配的那些自动生成的查询请求参数。


1. 查询的实现思路：


通过前面文章的介绍，可以知道jqGrid在查询中主要的任务是向Server发送有关于查询的参数，主要的参数包括search、searchField、searchOper、searchString、filters等（这些参数名可以通过选项进行更改，可以参考之前的文章）；Server得到参数后，进行后台数据查询，然后将结果发回客户端；jqGrid根据jsonReader的设置，解析返回的结果并显示到Grid表格中。


大体思路就是这样。既然如此，我们要想实现真正的自定义查询，要解决的无非就是如何把有关查询的参数“塞进”请求里。需要用到两个jqGrid选项：

  • postData ：可以参考本系列第九篇（http://blog.youkuaiyun.com/gengv/archive/2010/07/14/5735654.aspx）；当jqGrid向Server发送请求的时候，总是会将postData中的{name:value,...}对，作为参数一同传递到服务器端。因此我们只需要在发送查询请求的时候，将关于查询的参数放进postData就可以了。
  • search ：这个jqGrid选项，在jqGrid的官方文档中并没有列出来，但确实存在；它的值可以为true或false，用来控制是否为查询请求，如果为true，则在请求中加入search=true参数；可以使用jqGrid的setGridParam方法修改它。


注1 ：search选项传入的这个search=true参数，其参数名称“search”是由jqGrid的prmNames选项中设置的，默认为“_search”，此处是为了Server端java程序中成员变量命名方便，而设置为“search”了（具体细节可以参看本系列第一篇http://blog.youkuaiyun.com/gengv/archive/2010/07/05/5714834.aspx ）。


注2 ：search选项传入请求的search参数值，优先于postData中的同名参数值。即如果serach选型值为flase，而postData中有个名值对为{search:true}，则请求为http://...action?search=false&...&search=true。此时第一个search参数（由search选项控制）将使第二个search参数（postData提供）被忽略。



2. 自定义单条件查询的实现

根据之前文章的介绍，当单条件查询发送请求时，参数应为如下形式：

[javascript] view plain copy print ?
  1. nd：1278688214496
  2. page：1
  3. rows：15
  4. search：true//(1)
  5. searchField：id//(2)
  6. searchOper：ge//(3)
  7. searchString：9000//(4)
  8. sidx：
  9. sord：asc
nd： 1278688214496 page： 1 rows： 15 search： true // (1) searchField： id // (2) searchOper： ge // (3) searchString： 9000 // (4) sidx： sord： asc

其中(1)(2)(3)(4)是我们最关注的。

下面看看如何来实现单条件自定义查询：
HTML部分：

[xhtml] view plain copy print ?
  1. ...
  3. <body>
  4. <h3>
  5. jqGrid测试09
  6. </h3>
  7. <divid="mysearch"></div>
  8. <br/>
  9. <div>
  10. <tableid="gridTable"></table>
  11. <divid="gridPager"></div>
  12. </div>
  14. <br/>
  16. <div>
  17. <buttononclick="openSingleSearchDialog()">自定义单条件查询</button>
  18. <buttononclick="clearSearch()">重置</button>
  19. </div>
  21. <divid="singleSearchDialog">
  22. <tableclass="formTable">
  23. <thead>
  24. <tr>
  25. <th>查询条件</th>
  26. <th>查询方式</th>
  27. <th>查询值</th>
  28. </tr>
  29. </thead>
  30. <tbody>
  31. <tr>
  32. <td>
  33. <inputtype="radio"name="searchField"value="id">编码</input><br/>
  34. <inputtype="radio"name="searchField"value="lastName">姓</input><br/>
  35. <inputtype="radio"name="searchField"value="firstName">名</input>
  36. </td>
  37. <td>
  38. <selectid="searchOper">
  39. <optionvalue="eq">等于</option>
  40. <optionvalue="gt">大于</option>
  41. <optionvalue="lt">小于</option>
  42. </select>
  43. </td>
  44. <td>
  45. <inputtype="text"id="searchString"></input>
  46. </td>
  47. </tr>
  48. </tbody>
  49. </table>
  50. </div>
  52. </body>
  54. ...
... <body> <h3> jqGrid测试 09 </h3> <div id="mysearch"></div> <br /> <div> <table id="gridTable"></table> <div id="gridPager"></div> </div> <br /> <div> <button onclick="openSingleSearchDialog()">自定义单条件查询</button> <button onclick="clearSearch()">重置</button> </div> <div id="singleSearchDialog"> <table class="formTable"> <thead> <tr> <th>查询条件</th> <th>查询方式</th> <th>查询值</th> </tr> </thead> <tbody> <tr> <td> <input type="radio" name="searchField" value="id">编码</input><br /> <input type="radio" name="searchField" value="lastName">姓</input><br /> <input type="radio" name="searchField" value="firstName">名</input> </td> <td> <select id="searchOper"> <option value="eq">等于</option> <option value="gt">大于</option> <option value="lt">小于</option> </select> </td> <td> <input type="text" id="searchString"></input> </td> </tr> </tbody> </table> </div> </body> ...

HTML中增加了一个自定义的<div>，singleSearchDialog；而且使用radio组来选择查询字段。


再看看javascript部分：

[javascript] view plain copy print ?
  1. $(function(){
  2. $("#gridTable").jqGrid({
  3. ...
  5. prmNames:{search:"search"},
  7. ...
  9. });
  11. $("#singleSearchDialog").dialog({//(1)创建自定义查询对话框
  12. autoOpen:false,
  13. modal:true,
  14. resizable:true,
  15. width:350,
  16. title:"自定义单条件查询",
  17. buttons:{
  18. "查询":singleSearch//(2)在对话框中添加查询按钮
  19. }
  20. });
  23. });
  24. varopenSingleSearchDialog=function(){
  25. $("#singleSearchDialog").dialog("open");
  26. };
  27. varresetSingleSearchDialog=function(){
  28. $("radio","#singleSearchDialog").attr("checked",false);
  29. $(":text","#singleSearchDialog").val("");
  30. };
  31. varsingleSearch=function(){
  32. varsdata={//(3)构建查询需要的参数
  33. searchField:$(":radio:checked","#singleSearchDialog").val(),
  34. searchString:$("#searchString","#singleSearchDialog").val(),
  35. searchOper:$("#searchOper","#singleSearchDialog").val()
  36. };
  38. //(4)获得当前postData选项的值
  39. varpostData=$("#gridTable").jqGrid("getGridParam","postData");
  41. //(5)将查询参数融入postData选项对象
  42. $.extend(postData,sdata);
  44. $("#gridTable").jqGrid("setGridParam",{
  45. search:true//(6)将jqGrid的search选项设为true
  46. }).trigger("reloadGrid",[{page:1}]);//(7)重新载入Grid表格，以使上述设置生效
  48. $("#singleSearchDialog").dialog("close");
  49. };
  50. varclearSearch=function(){
  51. varsdata={//(8)构建一套空的查询参数
  52. searchField:"",
  53. searchString:"",
  54. searchOper:""
  55. };
  57. varpostData=$("#gridTable").jqGrid("getGridParam","postData");
  59. $.extend(postData,sdata);//(9)将postData中的查询参数覆盖为空值
  61. $("#gridTable").jqGrid("setGridParam",{
  62. search:false//(10)将jqGrid的search选项设为false
  63. }).trigger("reloadGrid",[{page:1}]);
  65. resetSingleSearchDialog();
  66. };
$(function(){ $("#gridTable").jqGrid({ ... prmNames: {search: "search"}, ... }); $("#singleSearchDialog").dialog({ // (1)创建自定义查询对话框 autoOpen: false, modal: true, resizable: true, width: 350, title: "自定义单条件查询", buttons: { "查询": singleSearch // (2)在对话框中添加查询按钮 } }); }); var openSingleSearchDialog = function() { $("#singleSearchDialog").dialog("open"); }; var resetSingleSearchDialog = function() { $("radio","#singleSearchDialog").attr("checked", false); $(":text","#singleSearchDialog").val(""); }; var singleSearch = function() { var sdata = { // (3)构建查询需要的参数 searchField: $(":radio:checked", "#singleSearchDialog").val(), searchString: $("#searchString", "#singleSearchDialog").val(), searchOper: $("#searchOper", "#singleSearchDialog").val() }; // (4)获得当前postData选项的值 var postData = $("#gridTable").jqGrid("getGridParam", "postData"); // (5)将查询参数融入postData选项对象 $.extend(postData, sdata); $("#gridTable").jqGrid("setGridParam", { search: true // (6)将jqGrid的search选项设为true }).trigger("reloadGrid", [{page:1}]); // (7)重新载入Grid表格，以使上述设置生效 $("#singleSearchDialog").dialog("close"); }; var clearSearch = function() { var sdata = { // (8)构建一套空的查询参数 searchField: "", searchString: "", searchOper: "" }; var postData = $("#gridTable").jqGrid("getGridParam", "postData"); $.extend(postData, sdata); //(9)将postData中的查询参数覆盖为空值 $("#gridTable").jqGrid("setGridParam", { search: false // (10)将jqGrid的search选项设为false }).trigger("reloadGrid", [{page:1}]); resetSingleSearchDialog(); };

说明：

  • (7)处设置完jqGrid参数后，重新载入表格时，jqGrid将会将postData中的参数加进请求参数中，因此将提交查询请求；在显式清除postData中的参数之前，每次查询都会带着这些查询参数。
  • (9)处将postData中的关于查询的参数全都覆盖为空值，重新载入表格后，请求中将不再传入“有效”的查询参数，即有查询参数名，但无查询参数值。例如： http://localhost:8085/JqGridTest/jqGridTest/jqGrid05.action?search=false &nd=1279865475529&rows=15&page=2&sidx=&sord=asc&searchField=&searchString=&searchOper=

注意：
不论在查询或者清除查询之后条用trigger("reloadGrid")，都应该带上“[{page:1}]”，以设置page选项为1，即：

$("#gridTable").jqGrid(...).trigger("reloadGrid", [{page:1}]);


如果不加上这个参数的话，那么后续的查询中，page都始终保持之前操作时保存的值，对于后面再进行的查询很能产生副作用。举个例子来说，第一次查询使用查询条件A，如果满足条件的数据有110行，Grid中每页显示20行（即每次从Server最多返回20行），则总共有6页数据；这时翻页，一直翻到第4页；然后使用查询条件B再次进行查询，假设这次查询满足条件的数据总共只有35行，每页显示20行，也即只有2页数据，那么如果page的值还是4的话，则后台就找不到数据了。因此，应该使用trigger("reloadGrid", [{page:1}]);，这样总能保证，即使查询结果只有1页数据，也能被显示出来。


3. 自定义多条件查询的实现
多条件查询与但条件查询的不同之处即在于使用filters参数，代替了searchField，searchOper，searchString参数。其参数形式为：

[javascript] view plain copy print ?
  1. filters:{
  2. "groupOp":"AND",
  3. "rules":[
  4. {"field":"id","op":"le","data":"1500"},
  5. {"field":"lastName","op":"bw","data":"LN-3"},
  6. {"field":"email","op":"cn","data":"sy"}
  7. ]
  8. }
  9. nd:1278688110637
  10. page:1
  11. rows:15
  12. search:true
  13. sidx:
  14. sord:asc
filters: { "groupOp": "AND", "rules": [ {"field":"id","op":"le","data":"1500"}, {"field":"lastName","op":"bw","data":"LN-3"}, {"field":"email","op":"cn","data":"sy"} ] } nd: 1278688110637 page: 1 rows: 15 search: true sidx: sord: asc

因此具体实现也与上述大同小异，只要加入正确的filters参数就行了。

首先看HTML部分，加入了multipleSearchDialog。

[xhtml] view plain copy print ?
  1. ...
  3. <div>
  4. ...
  5. <buttononclick="openMultipleSearchDialog()">自定义复杂条件查询</button>
  6. </div>
  8. ...
  10. <divid="multipleSearchDialog">
  11. <tableclass="formTable">
  12. <thead>
  13. <tr>
  14. <th>查询条件</th>
  15. <th>查询方式</th>
  16. <th>查询值</th>
  17. </tr>
  18. </thead>
  19. <tbody>
  20. <tr>
  21. <td>
  22. <selectclass="searchField">
  23. <optionvalue="id">编码</option>
  24. <optionvalue="lastName">姓</option>
  25. <optionvalue="firstName">名</option>
  26. </select>
  27. </td>
  28. <td>
  29. <selectclass="searchOper">
  30. <optionvalue="eq">等于</option>
  31. <optionvalue="gt">大于</option>
  32. <optionvalue="lt">小于</option>
  33. </select>
  34. </td>
  35. <td>
  36. <inputtype="text"class="searchString"></input>
  37. </td>
  38. </tr>
  39. <tr>
  40. <td>
  41. <selectclass="searchField">
  42. <optionvalue="id">编码</option>
  43. <optionvalue="lastName">姓</option>
  44. <optionvalue="firstName">名</option>
  45. </select>
  46. </td>
  47. <td>
  48. <selectclass="searchOper">
  49. <optionvalue="eq">等于</option>
  50. <optionvalue="gt">大于</option>
  51. <optionvalue="lt">小于</option>
  52. </select>
  53. </td>
  54. <td>
  55. <inputtype="text"class="searchString"></input>
  56. </td>
  57. </tr>
  58. <tr>
  59. <td>
  60. <selectclass="searchField">
  61. <optionvalue="id">编码</option>
  62. <optionvalue="lastName">姓</option>
  63. <optionvalue="firstName">名</option>
  64. </select>
  65. </td>
  66. <td>
  67. <selectclass="searchOper">
  68. <optionvalue="eq">等于</option>
  69. <optionvalue="gt">大于</option>
  70. <optionvalue="lt">小于</option>
  71. </select>
  72. </td>
  73. <td>
  74. <inputtype="text"class="searchString"></input>
  75. </td>
  76. </tr>
  77. </tbody>
  78. </table>
  79. </div>
  81. ...
... <div> ... <button onclick="openMultipleSearchDialog()">自定义复杂条件查询</button> </div> ... <div id="multipleSearchDialog"> <table class="formTable"> <thead> <tr> <th>查询条件</th> <th>查询方式</th> <th>查询值</th> </tr> </thead> <tbody> <tr> <td> <select class="searchField"> <option value="id">编码</option> <option value="lastName">姓</option> <option value="firstName">名</option> </select> </td> <td> <select class="searchOper"> <option value="eq">等于</option> <option value="gt">大于</option> <option value="lt">小于</option> </select> </td> <td> <input type="text" class="searchString"></input> </td> </tr> <tr> <td> <select class="searchField"> <option value="id">编码</option> <option value="lastName">姓</option> <option value="firstName">名</option> </select> </td> <td> <select class="searchOper"> <option value="eq">等于</option> <option value="gt">大于</option> <option value="lt">小于</option> </select> </td> <td> <input type="text" class="searchString"></input> </td> </tr> <tr> <td> <select class="searchField"> <option value="id">编码</option> <option value="lastName">姓</option> <option value="firstName">名</option> </select> </td> <td> <select class="searchOper"> <option value="eq">等于</option> <option value="gt">大于</option> <option value="lt">小于</option> </select> </td> <td> <input type="text" class="searchString"></input> </td> </tr> </tbody> </table> </div> ...


再来看javascript部分：

[javascript] view plain copy print ?
  1. $(function(){
  2. $("#gridTable").jqGrid({
  3. ...
  4. });
  6. ...
  8. $("#multipleSearchDialog").dialog({
  9. autoOpen:false,
  10. modal:true,
  11. resizable:true,
  12. width:350,
  13. title:"自定义多条件查询",
  14. buttons:{
  15. "查询":multipleSearch
  16. }
  17. });
  20. });
  21. ...
  22. varopenMultipleSearchDialog=function(){
  23. $("#multipleSearchDialog").dialog("open");
  24. };
  25. varmultipleSearch=function(){
  26. varrules="";
  28. $("tbodytr","#multipleSearchDialog").each(function(i){//(1)从multipleSearchDialog对话框中找到各个查询条件行
  29. varsearchField=$(".searchField",this).val();//(2)获得查询字段
  30. varsearchOper=$(".searchOper",this).val();//(3)获得查询方式
  31. varsearchString=$(".searchString",this).val();//(4)获得查询值
  33. if(searchField&&searchOper&&searchString){//(5)如果三者皆有值且长度大于0，则将查询条件加入rules字符串
  34. rules+=',{"field":"'+searchField+'","op":"'+searchOper+'","data":"'+searchString+'"}';
  35. }
  36. });
  38. if(rules){//(6)如果rules不为空，且长度大于0，则去掉开头的逗号
  39. rules=rules.substring(1);
  40. }
  42. //(7)串联好filtersStr字符串
  43. varfiltersStr='{"groupOp":"AND","rules":['+rules+']}';
  45. varpostData=$("#gridTable").jqGrid("getGridParam","postData");
  47. //(8)将filters参数串加入postData选项
  48. $.extend(postData,{filters:filtersStr});
  50. $("#gridTable").jqGrid("setGridParam",{
  51. search:true//(9)将jqGrid的search选项设为true
  52. }).trigger("reloadGrid",[{page:1}]);//(10)重新载入Grid表格
  54. $("#multipleSearchDialog").dialog("close");
  55. };
$(function(){ $("#gridTable").jqGrid({ ... }); ... $("#multipleSearchDialog").dialog({ autoOpen: false, modal: true, resizable: true, width: 350, title: "自定义多条件查询", buttons: { "查询": multipleSearch } }); }); ... var openMultipleSearchDialog = function() { $("#multipleSearchDialog").dialog("open"); }; var multipleSearch = function() { var rules = ""; $("tbody tr", "#multipleSearchDialog").each(function(i){ //(1)从multipleSearchDialog对话框中找到各个查询条件行 var searchField = $(".searchField", this).val(); //(2)获得查询字段 var searchOper = $(".searchOper", this).val(); //(3)获得查询方式 var searchString = $(".searchString", this).val(); //(4)获得查询值 if(searchField && searchOper && searchString) { //(5)如果三者皆有值且长度大于0，则将查询条件加入rules字符串 rules += ',{"field":"' + searchField + '","op":"' + searchOper + '","data":"' + searchString + '"}'; } }); if(rules) { //(6)如果rules不为空，且长度大于0，则去掉开头的逗号 rules = rules.substring(1); } //(7)串联好filtersStr字符串 var filtersStr = '{"groupOp":"AND","rules":[' + rules + ']}'; var postData = $("#gridTable").jqGrid("getGridParam", "postData"); //(8)将filters参数串加入postData选项 $.extend(postData, {filters: filtersStr}); $("#gridTable").jqGrid("setGridParam", { search: true //(9)将jqGrid的search选项设为true }).trigger("reloadGrid", [{page:1}]); //(10)重新载入Grid表格 $("#multipleSearchDialog").dialog("close"); };

OK，这样就实现了自定义多条件查询。同时可以看到，colModel中根本不存在身份证号（idCardNo）这一列，但是在查询中依然可以使用这个字段进行查询。

另一方面，由于自己把握了查询参数的控制权，jqGrid的multipleSearch选项将变得无足轻重了。上面的两个例子，仅作说明之用，从外观上来看，还比较粗糙。但已经从根本上控制住了查询的实现。即使在复杂的页面设计，也不会影响查询的实现了。这与jqGrid官方文档中提供的“自定义查询”，是有本质区别的。

对于页面布局的美化，以及动态添加查询条件行等等，只要基本的CSS+JavaScript知识就能实现，因此不再本文的讨论内容中了。


4. jqGrid源码
jqGrid的源码可以从以下链接得到：
http://github.com/tonytomov/jqGrid

关于查询这部分的代码，可以查看：
http://github.com/tonytomov/jqGrid/blob/master/js/grid.formedit.js

片段1：

[javascript] view plain copy print ?
  1. $t.SearchFilter=$("#"+fid).searchFilter(fields,{groupOps:p.groupOps,operators:oprtr,onClose:hideFilter,resetText:p.Reset,searchText:p.Find,windowTitle:p.caption,rulesText:p.rulesText,matchText:p.matchText,onSearch:searchFilters,onReset:resetFilters,stringResult:p.stringResult,ajaxSelectOptions:$.extend({},$.jgrid.ajaxOptions,$t.p.ajaxSelectOptions||{}),clone:p.cloneSearchRowOnAdd});
$t.SearchFilter = $("#"+fid).searchFilter(fields, { groupOps: p.groupOps, operators: oprtr, onClose:hideFilter, resetText: p.Reset, searchText: p.Find, windowTitle: p.caption, rulesText:p.rulesText, matchText:p.matchText, onSearch: searchFilters, onReset: resetFilters,stringResult:p.stringResult, ajaxSelectOptions: $.extend({},$.jgrid.ajaxOptions,$t.p.ajaxSelectOptions ||{}), clone: p.cloneSearchRowOnAdd });

片段2：

[javascript] view plain copy print ?
  1. functionsearchFilters(filters){
  2. varhasFilters=(filters!==undefined),//(1)
  3. grid=$("#"+$t.p.id),sdata={};
  4. if(p.multipleSearch===false){//(2)
  5. sdata[p.sField]=filters.rules[0].field;
  6. sdata[p.sValue]=filters.rules[0].data;
  7. sdata[p.sOper]=filters.rules[0].op;
  8. }else{
  9. sdata[p.sFilter]=filters;//(3)
  10. }
  11. grid[0].p.search=hasFilters;//(4)
  12. $.extend(grid[0].p.postData,sdata);//(5)
  13. grid.trigger("reloadGrid",[{page:1}]);//(6)
  14. if(p.closeAfterSearch){hideFilter($("#"+fid));}//(7)
  15. }
  16. functionresetFilters(op){
  17. varreload=op&&op.hasOwnProperty("reload")?op.reload:true;
  18. grid=$("#"+$t.p.id),sdata=[];
  19. grid[0].p.search=false;
  20. if(p.multipleSearch===false){
  21. sdata[p.sField]=sdata[p.sValue]=sdata[p.sOper]="";
  22. }else{
  23. sdata[p.sFilter]="";
  24. }
  25. $.extend(grid[0].p.postData,sdata);
  26. if(reload){
  27. grid.trigger("reloadGrid",[{page:1}]);
  28. }
  29. if(p.closeAfterReset){hideFilter($("#"+fid));}
  30. }
function searchFilters(filters) { var hasFilters = (filters !== undefined), //(1) grid = $("#"+$t.p.id), sdata={}; if(p.multipleSearch===false) { //(2) sdata[p.sField] = filters.rules[0].field; sdata[p.sValue] = filters.rules[0].data; sdata[p.sOper] = filters.rules[0].op; } else { sdata[p.sFilter] = filters; //(3) } grid[0].p.search = hasFilters; //(4) $.extend(grid[0].p.postData,sdata); //(5) grid.trigger("reloadGrid",[{page:1}]); //(6) if(p.closeAfterSearch) { hideFilter($("#"+fid)); } //(7) } function resetFilters(op) { var reload = op && op.hasOwnProperty("reload") ? op.reload : true; grid = $("#"+$t.p.id), sdata=[]; grid[0].p.search = false; if(p.multipleSearch===false) { sdata[p.sField] = sdata[p.sValue] = sdata[p.sOper] = ""; } else { sdata[p.sFilter] = ""; } $.extend(grid[0].p.postData,sdata); if(reload) { grid.trigger("reloadGrid",[{page:1}]); } if(p.closeAfterReset) { hideFilter($("#"+fid)); } }

我没有从头到尾通读所有代码，没有时间，也没有那么高水平，呵呵~

但从上面片段1中可以看出来：
在查询对话框中点击“查询”按钮，则执行searchFilters方法；而点击“重置”按钮，则执行resetFilters方法。

再看看searchFilters方法：

  • (1)首先判断是否存在filters；
  • (2)如果multipleSearch选项为false，则构建以sField、sOper、sValue所对应的参数名为内容的参数（默认的参数名为：searchField、searchOper、searchString）；
  • (3)如果multipleSearch选项为true，则构建sFilter对应的参数名的参数（默认为filters）；
  • (4)然后将查询参数置入postData选项；
  • (5)如果存在filters，则将jqGrid的search选项设为true；这与$("#gridTable").jqGrid("setGridParam", { search: true });是一样的。
  • (6)重新载入表格数据（发送包含查询参数的请求）；
  • (7)如果closeAfterSearch为true，则查询完毕后，关闭查询对话框。


总体看来，与之前自定义的条件查询实现基本一样，所不同的是，这里把单条件和多条件查询和在一起了。

而resetFilters方法，与之前自定义的实现，思路也基本一样，不再赘述。由于searchFilters和resetFilters是定义在searchGird方法中的函数，因此在外部调用时，还是有点困难的。



附上本文完整前端代码（后台代码可以参考之前的文章）：
HTML部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"> <head> <title>jqGrid09</title> <link rel="stylesheet" type="text/css" media="screen" href="../css/themes/aero/jquery-ui-1.8.1.custom.css" mce_href="css/themes/aero/jquery-ui-1.8.1.custom.css" /> <link rel="stylesheet" type="text/css" media="screen" href="../css/themes/aero/ui.jqgrid.custom.css" mce_href="css/themes/aero/ui.jqgrid.custom.css" /> <link href="../css/genericFormTable.css" mce_href="css/genericFormTable.css" rel="stylesheet" type="text/css" /> <mce:script type="text/javascript" src="../js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js"></mce:script> <mce:script src="../js/jquery-ui-1.8.1.custom.min.js" mce_src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></mce:script> <mce:script src="../js/i18n/grid.locale-zh-CN.js" mce_src="js/i18n/grid.locale-zh-CN.js" type="text/javascript"></mce:script> <mce:script src="../js/jquery.jqGrid.min.js" mce_src="js/jquery.jqGrid.min.js" type="text/javascript"></mce:script> <mce:script src="js/jqGrid09.js" mce_src="js/jqGrid09.js" type="text/javascript"></mce:script> </head> <body> <h3> jqGrid测试 09 </h3> <div id="mysearch"></div> <br /> <div> <table id="gridTable"></table> <div id="gridPager"></div> </div> <br /> <div> <button onclick="openSingleSearchDialog()">自定义单条件查询</button> <button onclick="clearSearch()">重置</button> <button onclick="openMultipleSearchDialog()">自定义复杂条件查询</button> </div> <div id="singleSearchDialog"> <table class="formTable"> <thead> <tr> <th>查询条件</th> <th>查询方式</th> <th>查询值</th> </tr> </thead> <tbody> <tr> <td> <input type="radio" name="searchField" value="id">编码</input><br/> <input type="radio" name="searchField" value="lastName">姓</input><br/> <input type="radio" name="searchField" value="firstName">名</input> </td> <td> <select id="searchOper"> <option value="eq">等于</option> <option value="gt">大于</option> <option value="lt">小于</option> </select> </td> <td> <input type="text" id="searchString"></input> </td> </tr> </tbody> </table> </div> <div id="multipleSearchDialog"> <table class="formTable"> <thead> <tr> <th>查询条件</th> <th>查询方式</th> <th>查询值</th> </tr> </thead> <tbody> <tr> <td> <select class="searchField"> <option value="id">编码</option> <option value="lastName">姓</option> <option value="firstName">名</option> <option value="idCardNo">身份证</option> </select> </td> <td> <select class="searchOper"> <option value="eq">等于</option> <option value="gt">大于</option> <option value="lt">小于</option> <option value="cn">包含</option> <option value="bw">开头</option> </select> </td> <td> <input type="text" class="searchString"></input> </td> </tr> <tr> <td> <select class="searchField"> <option value="id">编码</option> <option value="lastName">姓</option> <option value="firstName">名</option> <option value="idCardNo">身份证</option> </select> </td> <td> <select class="searchOper"> <option value="eq">等于</option> <option value="gt">大于</option> <option value="lt">小于</option> <option value="cn">包含</option> <option value="bw">开头</option> </select> </td> <td> <input type="text" class="searchString"></input> </td> </tr> <tr> <td> <select class="searchField"> <option value="id">编码</option> <option value="lastName">姓</option> <option value="firstName">名</option> <option value="idCardNo">身份证</option> </select> </td> <td> <select class="searchOper"> <option value="eq">等于</option> <option value="gt">大于</option> <option value="lt">小于</option> <option value="cn">包含</option> <option value="bw">开头</option> </select> </td> <td> <input type="text" class="searchString"></input> </td> </tr> </tbody> </table> </div> </body> </html>

JavaScript部分：

$(function(){ $("#gridTable").jqGrid({ url: "listContacts.action", datatype: "json", mtype: "GET", height: 350, width: 600, colModel: [ {name:"id",index:"id",label:"编码",width:40,sortable:false}, {name:"lastName",index:"lastName",label:"姓",width:80,sortable:false}, {name:"firstName",index:"firstName",label:"名",width:80,sortable:false}, {name:"email",index:"email",label:"电子邮箱",width:160,sortable:false}, {name:"telNo",index:"telNo",label:"电话",width:120,sortable:false} ], viewrecords: true, rowNum: 15, rowList: [15,50,100], prmNames: {search: "search"}, jsonReader: { root:"gridModel", records: "record", repeatitems : false }, pager: "#gridPager", caption: "联系人列表", hidegrid: false, shrikToFit: true }); $("#singleSearchDialog").dialog({ autoOpen: false, modal: true, resizable: true, width: 350, title: "自定义单条件查询", buttons: { "查询": singleSearch } }); $("#multipleSearchDialog").dialog({ autoOpen: false, modal: true, resizable: true, width: 350, title: "自定义多条件查询", buttons: { "查询": multipleSearch } }); }); var openSingleSearchDialog = function() { $("#singleSearchDialog").dialog("open"); }; var resetSingleSearchDialog = function() { $("radio","#singleSearchDialog").attr("checked", false); $(":text","#singleSearchDialog").val(""); }; var singleSearch = function() { var sdata = { searchField: $(":radio:checked", "#singleSearchDialog").val(), searchString: $("#searchString", "#singleSearchDialog").val(), searchOper: $("#searchOper", "#singleSearchDialog").val() }; var postData = $("#gridTable").jqGrid("getGridParam", "postData"); $.extend(postData, sdata); $("#gridTable").jqGrid("setGridParam", { search: true }).trigger("reloadGrid", [{page:1}]); $("#singleSearchDialog").dialog("close"); }; var clearSearch = function() { var sdata = { searchField: "", searchString: "", searchOper: "" }; var postData = $("#gridTable").jqGrid("getGridParam", "postData"); $.extend(postData, sdata); $("#gridTable").jqGrid("setGridParam", { search: false }).trigger("reloadGrid", [{page:1}]); resetSingleSearchDialog(); }; var openMultipleSearchDialog = function() { $("#multipleSearchDialog").dialog("open"); }; var multipleSearch = function() { var rules = ""; $("tbody tr", "#multipleSearchDialog").each(function(i){ var searchField = $(".searchField", this).val(); var searchOper = $(".searchOper", this).val(); var searchString = $(".searchString", this).val(); if(searchField && searchOper && searchString) { rules += ',{"field":"' + searchField + '","op":"' + searchOper + '","data":"' + searchString + '"}'; } }); if(rules) { rules = rules.substring(1); } var filtersStr = '{"groupOp":"AND","rules":[' + rules + ']}'; var postData = $("#gridTable").jqGrid("getGridParam", "postData"); $.extend(postData, {filters: filtersStr}); $("#gridTable").jqGrid("setGridParam", { search: true }).trigger("reloadGrid", [{page:1}]); $("#multipleSearchDialog").dialog("close"); };

z_p_h
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值