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

转至:http://blog.csdn.net/gengv/article/details/5758321

作者: gengv

 

 

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

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

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

昨天,CSDN的一位网友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.csdn.net/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.csdn.net/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
  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   



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

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

 

 

[xhtml]  view plain copy
  1. ...  
  2.   
  3. <body>  
  4.     <h3>  
  5.         jqGrid测试 09  
  6.     </h3>  
  7.     <div id="mysearch"></div>  
  8.     <br />  
  9.     <div>  
  10.         <table id="gridTable"></table>  
  11.         <div id="gridPager"></div>  
  12.     </div>  
  13.       
  14.     <br />  
  15.       
  16.     <div>  
  17.         <button onclick="openSingleSearchDialog()">自定义单条件查询</button>  
  18.         <button onclick="clearSearch()">重置</button>  
  19.     </div>  
  20.       
  21.     <div id="singleSearchDialog">  
  22.         <table class="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.                         <input type="radio" name="searchField" value="id">编码</input><br />  
  34.                         <input type="radio" name="searchField" value="lastName"></input><br />  
  35.                         <input type="radio" name="searchField" value="firstName"></input>  
  36.                     </td>  
  37.                     <td>  
  38.                         <select id="searchOper">  
  39.                             <option value="eq">等于</option>  
  40.                             <option value="gt">大于</option>  
  41.                             <option value="lt">小于</option>  
  42.                         </select>  
  43.                     </td>  
  44.                     <td>  
  45.                         <input type="text" id="searchString"></input>  
  46.                     </td>  
  47.                 </tr>  
  48.             </tbody>  
  49.         </table>  
  50.     </div>  
  51.       
  52. </body>  
  53.   
  54. ...  

 

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


再看看javascript部分:

 

[javascript]  view plain copy
  1. $(function(){  
  2.     $("#gridTable").jqGrid({  
  3.         ...  
  4.           
  5.         prmNames: {search: "search"},  
  6.           
  7.         ...  
  8.           
  9.     });  
  10.       
  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.     });  
  21.       
  22.       
  23. });  
  24. var openSingleSearchDialog = function() {  
  25.     $("#singleSearchDialog").dialog("open");  
  26. };  
  27. var resetSingleSearchDialog = function() {  
  28.     $("radio","#singleSearchDialog").attr("checked"false);  
  29.     $(":text","#singleSearchDialog").val("");  
  30. };  
  31. var singleSearch = function() {  
  32.     var sdata = {   // (3)构建查询需要的参数  
  33.         searchField: $(":radio:checked""#singleSearchDialog").val(),  
  34.         searchString: $("#searchString""#singleSearchDialog").val(),  
  35.         searchOper: $("#searchOper""#singleSearchDialog").val()  
  36.     };  
  37.       
  38.     // (4)获得当前postData选项的值  
  39.     var postData = $("#gridTable").jqGrid("getGridParam""postData");  
  40.       
  41.     // (5)将查询参数融入postData选项对象  
  42.     $.extend(postData, sdata);  
  43.       
  44.     $("#gridTable").jqGrid("setGridParam", {  
  45.         search: true    // (6)将jqGrid的search选项设为true  
  46.     }).trigger("reloadGrid", [{page:1}]);   // (7)重新载入Grid表格,以使上述设置生效  
  47.       
  48.     $("#singleSearchDialog").dialog("close");  
  49. };  
  50. var clearSearch = function() {  
  51.     var sdata = {   // (8)构建一套空的查询参数  
  52.         searchField: "",  
  53.         searchString: "",  
  54.         searchOper: ""  
  55.     };  
  56.       
  57.     var postData = $("#gridTable").jqGrid("getGridParam""postData");  
  58.       
  59.     $.extend(postData, sdata);  //(9)将postData中的查询参数覆盖为空值  
  60.       
  61.     $("#gridTable").jqGrid("setGridParam", {  
  62.         search: false   // (10)将jqGrid的search选项设为false  
  63.     }).trigger("reloadGrid", [{page:1}]);  
  64.       
  65.     resetSingleSearchDialog();  
  66. };  

 

说明:

  • (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页数据,也能被显示出来。

 

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

 

 


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

 

[javascript]  view plain copy
  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参数就行了。

 

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

 

[xhtml]  view plain copy
  1. ...  
  2.   
  3. <div>  
  4.     ...  
  5.     <button onclick="openMultipleSearchDialog()">自定义复杂条件查询</button>  
  6. </div>  
  7.   
  8. ...  
  9.   
  10. <div id="multipleSearchDialog">  
  11.     <table class="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.                     <select class="searchField">  
  23.                         <option value="id">编码</option>  
  24.                         <option value="lastName"></option>  
  25.                         <option value="firstName"></option>  
  26.                     </select>  
  27.                 </td>  
  28.                 <td>  
  29.                     <select class="searchOper">  
  30.                         <option value="eq">等于</option>  
  31.                         <option value="gt">大于</option>  
  32.                         <option value="lt">小于</option>  
  33.                     </select>  
  34.                 </td>  
  35.                 <td>  
  36.                     <input type="text" class="searchString"></input>  
  37.                 </td>  
  38.             </tr>  
  39.             <tr>  
  40.                 <td>  
  41.                     <select class="searchField">  
  42.                         <option value="id">编码</option>  
  43.                         <option value="lastName"></option>  
  44.                         <option value="firstName"></option>  
  45.                     </select>  
  46.                 </td>  
  47.                 <td>  
  48.                     <select class="searchOper">  
  49.                         <option value="eq">等于</option>  
  50.                         <option value="gt">大于</option>  
  51.                         <option value="lt">小于</option>  
  52.                     </select>  
  53.                 </td>  
  54.                 <td>  
  55.                     <input type="text" class="searchString"></input>  
  56.                 </td>  
  57.             </tr>  
  58.             <tr>  
  59.                 <td>  
  60.                     <select class="searchField">  
  61.                         <option value="id">编码</option>  
  62.                         <option value="lastName"></option>  
  63.                         <option value="firstName"></option>  
  64.                     </select>  
  65.                 </td>  
  66.                 <td>  
  67.                     <select class="searchOper">  
  68.                         <option value="eq">等于</option>  
  69.                         <option value="gt">大于</option>  
  70.                         <option value="lt">小于</option>  
  71.                     </select>  
  72.                 </td>  
  73.                 <td>  
  74.                     <input type="text" class="searchString"></input>  
  75.                 </td>  
  76.             </tr>  
  77.         </tbody>  
  78.     </table>  
  79. </div>  
  80.   
  81. ...  

 


再来看javascript部分:

 

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

 

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

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

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

 

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

 


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

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

 

片段1:

 

[javascript]  view plain copy
  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 });  

 

 

片段2:

 

[javascript]  view plain copy
  1. function searchFilters(filters) {  
  2.     var hasFilters = (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. function resetFilters(op) {  
  17.     var reload = 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. }  

 

 

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

但从上面片段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部分:

 

[xhtml]  view plain copy
  1. <!DOCTYPE html  
  2. PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">  
  5.     <head>  
  6.         <title>jqGrid09</title>  
  7.         <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" />  
  8.         <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" />  
  9.         <link href="../css/genericFormTable.css" mce_href="css/genericFormTable.css" rel="stylesheet" type="text/css" />  
  10.           
  11.         <mce:script type="text/javascript" src="../js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js"></mce:script>  
  12.         <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>  
  13.         <mce:script src="../js/i18n/grid.locale-zh-CN.js" mce_src="js/i18n/grid.locale-zh-CN.js" type="text/javascript"></mce:script>  
  14.         <mce:script src="../js/jquery.jqGrid.min.js" mce_src="js/jquery.jqGrid.min.js" type="text/javascript"></mce:script>  
  15.           
  16.         <mce:script src="js/jqGrid09.js" mce_src="js/jqGrid09.js" type="text/javascript"></mce:script>    
  17.     </head>  
  18.     <body>  
  19.         <h3>  
  20.             jqGrid测试 09  
  21.         </h3>  
  22.         <div id="mysearch"></div>  
  23.         <br />  
  24.         <div>  
  25.             <table id="gridTable"></table>  
  26.             <div id="gridPager"></div>  
  27.         </div>  
  28.           
  29.         <br />  
  30.           
  31.         <div>  
  32.             <button onclick="openSingleSearchDialog()">自定义单条件查询</button>  
  33.             <button onclick="clearSearch()">重置</button>  
  34.             <button onclick="openMultipleSearchDialog()">自定义复杂条件查询</button>  
  35.         </div>  
  36.           
  37.         <div id="singleSearchDialog">  
  38.             <table class="formTable">  
  39.                 <thead>  
  40.                     <tr>  
  41.                         <th>查询条件</th>  
  42.                         <th>查询方式</th>  
  43.                         <th>查询值</th>  
  44.                     </tr>  
  45.                 </thead>  
  46.                 <tbody>  
  47.                     <tr>  
  48.                         <td>  
  49.                             <input type="radio" name="searchField" value="id">编码</input><br/>  
  50.                             <input type="radio" name="searchField" value="lastName"></input><br/>  
  51.                             <input type="radio" name="searchField" value="firstName"></input>  
  52.                         </td>  
  53.                         <td>  
  54.                             <select id="searchOper">  
  55.                                 <option value="eq">等于</option>  
  56.                                 <option value="gt">大于</option>  
  57.                                 <option value="lt">小于</option>  
  58.                             </select>  
  59.                         </td>  
  60.                         <td>  
  61.                             <input type="text" id="searchString"></input>  
  62.                         </td>  
  63.                     </tr>  
  64.                 </tbody>  
  65.             </table>  
  66.         </div>  
  67.           
  68.         <div id="multipleSearchDialog">  
  69.             <table class="formTable">  
  70.                 <thead>  
  71.                     <tr>  
  72.                         <th>查询条件</th>  
  73.                         <th>查询方式</th>  
  74.                         <th>查询值</th>  
  75.                     </tr>  
  76.                 </thead>  
  77.                 <tbody>  
  78.                     <tr>  
  79.                         <td>  
  80.                             <select class="searchField">  
  81.                                 <option value="id">编码</option>  
  82.                                 <option value="lastName"></option>  
  83.                                 <option value="firstName"></option>  
  84.                                 <option value="idCardNo">身份证</option>  
  85.                             </select>  
  86.                         </td>  
  87.                         <td>  
  88.                             <select class="searchOper">  
  89.                                 <option value="eq">等于</option>  
  90.                                 <option value="gt">大于</option>  
  91.                                 <option value="lt">小于</option>  
  92.                                 <option value="cn">包含</option>  
  93.                                 <option value="bw">开头</option>  
  94.                             </select>  
  95.                         </td>  
  96.                         <td>  
  97.                             <input type="text" class="searchString"></input>  
  98.                         </td>  
  99.                     </tr>  
  100.                     <tr>  
  101.                         <td>  
  102.                             <select class="searchField">  
  103.                                 <option value="id">编码</option>  
  104.                                 <option value="lastName"></option>  
  105.                                 <option value="firstName"></option>  
  106.                                 <option value="idCardNo">身份证</option>  
  107.                             </select>  
  108.                         </td>  
  109.                         <td>  
  110.                             <select class="searchOper">  
  111.                                 <option value="eq">等于</option>  
  112.                                 <option value="gt">大于</option>  
  113.                                 <option value="lt">小于</option>  
  114.                                 <option value="cn">包含</option>  
  115.                                 <option value="bw">开头</option>  
  116.                             </select>  
  117.                         </td>  
  118.                         <td>  
  119.                             <input type="text" class="searchString"></input>  
  120.                         </td>  
  121.                     </tr>  
  122.                     <tr>  
  123.                         <td>  
  124.                             <select class="searchField">  
  125.                                 <option value="id">编码</option>  
  126.                                 <option value="lastName"></option>  
  127.                                 <option value="firstName"></option>  
  128.                                 <option value="idCardNo">身份证</option>  
  129.                             </select>  
  130.                         </td>  
  131.                         <td>  
  132.                             <select class="searchOper">  
  133.                                 <option value="eq">等于</option>  
  134.                                 <option value="gt">大于</option>  
  135.                                 <option value="lt">小于</option>  
  136.                                 <option value="cn">包含</option>  
  137.                                 <option value="bw">开头</option>  
  138.                             </select>  
  139.                         </td>  
  140.                         <td>  
  141.                             <input type="text" class="searchString"></input>  
  142.                         </td>  
  143.                     </tr>  
  144.                 </tbody>  
  145.             </table>  
  146.         </div>  
  147.           
  148.     </body>  
  149. </html>  

 

 

JavaScript部分:

 

[javascript]  view plain copy
  1. $(function(){  
  2.     $("#gridTable").jqGrid({  
  3.         url: "listContacts.action",  
  4.         datatype: "json",  
  5.         mtype: "GET",  
  6.         height: 350,  
  7.         width: 600,  
  8.         colModel: [  
  9.               {name:"id",index:"id",label:"编码",width:40,sortable:false},    
  10.               {name:"lastName",index:"lastName",label:"姓",width:80,sortable:false},  
  11.               {name:"firstName",index:"firstName",label:"名",width:80,sortable:false},  
  12.               {name:"email",index:"email",label:"电子邮箱",width:160,sortable:false},  
  13.               {name:"telNo",index:"telNo",label:"电话",width:120,sortable:false}  
  14.         ],  
  15.         viewrecords: true,  
  16.         rowNum: 15,  
  17.         rowList: [15,50,100],  
  18.         prmNames: {search: "search"},  
  19.         jsonReader: {  
  20.             root:"gridModel",  
  21.             records: "record",  
  22.             repeatitems : false  
  23.         },  
  24.         pager: "#gridPager",  
  25.         caption: "联系人列表",  
  26.         hidegrid: false,  
  27.         shrikToFit: true  
  28.     });  
  29.       
  30.     $("#singleSearchDialog").dialog({  
  31.         autoOpen: false,      
  32.         modal: true,  
  33.         resizable: true,      
  34.         width: 350,  
  35.         title: "自定义单条件查询",  
  36.         buttons: {  
  37.             "查询": singleSearch  
  38.         }  
  39.     });  
  40.       
  41.     $("#multipleSearchDialog").dialog({  
  42.         autoOpen: false,      
  43.         modal: true,  
  44.         resizable: true,      
  45.         width: 350,  
  46.         title: "自定义多条件查询",  
  47.         buttons: {  
  48.             "查询": multipleSearch  
  49.         }  
  50.     });  
  51.       
  52.       
  53. });  
  54. var openSingleSearchDialog = function() {  
  55.     $("#singleSearchDialog").dialog("open");  
  56. };  
  57. var resetSingleSearchDialog = function() {  
  58.     $("radio","#singleSearchDialog").attr("checked"false);  
  59.     $(":text","#singleSearchDialog").val("");  
  60. };  
  61. var singleSearch = function() {  
  62.     var sdata = {  
  63.         searchField: $(":radio:checked""#singleSearchDialog").val(),  
  64.         searchString: $("#searchString""#singleSearchDialog").val(),  
  65.         searchOper: $("#searchOper""#singleSearchDialog").val()  
  66.     };  
  67.       
  68.     var postData = $("#gridTable").jqGrid("getGridParam""postData");  
  69.       
  70.     $.extend(postData, sdata);  
  71.       
  72.     $("#gridTable").jqGrid("setGridParam", {  
  73.         search: true  
  74.     }).trigger("reloadGrid", [{page:1}]);  
  75.       
  76.     $("#singleSearchDialog").dialog("close");  
  77. };  
  78. var clearSearch = function() {  
  79.     var sdata = {  
  80.         searchField: "",  
  81.         searchString: "",  
  82.         searchOper: ""  
  83.     };  
  84.       
  85.     var postData = $("#gridTable").jqGrid("getGridParam""postData");  
  86.       
  87.     $.extend(postData, sdata);  
  88.       
  89.     $("#gridTable").jqGrid("setGridParam", {  
  90.         search: false  
  91.     }).trigger("reloadGrid", [{page:1}]);  
  92.       
  93.     resetSingleSearchDialog();  
  94. };  
  95. var openMultipleSearchDialog = function() {  
  96.     $("#multipleSearchDialog").dialog("open");  
  97. };  
  98. var multipleSearch = function() {  
  99.     var rules = "";  
  100.       
  101.     $("tbody tr""#multipleSearchDialog").each(function(i){  
  102.         var searchField = $(".searchField"this).val();  
  103.         var searchOper = $(".searchOper"this).val();  
  104.         var searchString = $(".searchString"this).val();  
  105.           
  106.         if(searchField && searchOper && searchString) {  
  107.             rules += ',{"field":"' + searchField + '","op":"' + searchOper + '","data":"' + searchString + '"}';  
  108.         }  
  109.     });  
  110.       
  111.     if(rules) {  
  112.         rules = rules.substring(1);  
  113.     }  
  114.       
  115.     var filtersStr = '{"groupOp":"AND","rules":[' + rules + ']}';  
  116.       
  117.     var postData = $("#gridTable").jqGrid("getGridParam""postData");  
  118.       
  119.     $.extend(postData, {filters: filtersStr});  
  120.       
  121.     $("#gridTable").jqGrid("setGridParam", {  
  122.         search: true  
  123.     }).trigger("reloadGrid", [{page:1}]);  
  124.       
  125.     $("#multipleSearchDialog").dialog("close");  
  126. };  

 

 

 

 

你可能感兴趣的:(struts2)