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

最新推荐文章于 2025-01-12 21:00:00 发布
转载 最新推荐文章于 2025-01-12 21:00:00 发布 · 1k 阅读 · 0
文章标签：

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

本文介绍如何使用 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
  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页数据，也能被显示出来。


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知识就能实现，因此不再本文的讨论内容中了。


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

jqGrid与Struts2的结合应用（三） —— 使用自定义表单对话框编辑Grid数据
GengV - 在Java的世界流浪
07-07 2万+
上一篇中的最后一点提到了，如果在服务器端出现异常，没能完成预期的操作，那么客户端（浏览器）中的jqGrid还继续更新数据吗? 这一篇就来说说服务器端的操作。 首先看一下服务器端的代码，我将查看行数据和操作行数据放在了两个Action类里面：ViewContactAction和ContactConsoleAction。package cn.gengv.struts2ex.jqGrid; import java.util.List; import com.byzl.hare.model.Cont
jqgrid ajax查询,jqGrid查询配置
weixin_42613773的博客
08-05 634
jqGrid的列可以用于查询表单。表格查询按照规则从服务器加载数据。目前没有查询本地数据的模块当datatype设置为local。所有查询都是通过服务器(Currently we do not have module for searching on local data i.e when a datatype options is set to local. All the searching ...
jqGrid搜索
05-17
jqGrid搜索
自定义表单界面组件和万能查询组件
weixin_34250434的博客
10-28 367
  准备开发自定义表单界面组件和万能查询组件 1.       自定义表单组件在展现时包含三种界面，一种自由格式的表单对应多种列表表单；只有一种自由格式的表单；只有一个列表表单。 2.       包含功能，各个表单的增删改；表单内或与其它表单的数据校验，表单间构辑关系运算，从数据库取数，表单间数据交换等 3.       万能查询组件支持常见各种数据库   思路已经成形，下一步着手...
自定义表单系统构想
jianfeng008cn的专栏
08-15 2256
近来淘宝，发现淘宝网的商品查询做得很细致，很灵活，能通过产品各个角度进行搜索。这个功能是怎么实现的呢，不会是通过BI系统的维度抽取来实现的吧，如果各个产品都是结构化的数据库表格，那需要的表格就会很多很多，是不是通过自定义表单系统实现的呢？   经过今天晚上的思考，自定义表单系统的初步数据库设计如下：   表单项模板表（ItemTemplate）：包含数据类型（按照数据类型对应到数据库中不同的表中去...
jqGrid与Struts2的结合应用
12-18
在jqGrid与Struts2的结合应用中，我们通常会经历以下几个步骤： 1. **配置Struts2**：首先，需要在项目的`struts.xml`配置文件中添加jqGrid相关的Action，这些Action负责处理来自jqGrid的AJAX请求，获取或更新...
JQGrid与Struts2结合开发入门示例
当我们谈论JQGrid与Struts2结合时，实际上是指将JQGrid前端功能与Struts2后端功能相结合，用以实现丰富的Web表格应用。这种组合可以利用Struts2的MVC架构，将后端的业务数据通过JQGrid展示给用户，并且可以轻松实现...
jqGrid与Struts2的结合应用_操作Grid数据
11-24
总结来说，jqGrid 与 Struts2 的结合应用提供了高效的数据展示和管理能力。通过理解并熟练运用 jqGrid 的核心方法，开发者可以构建出功能丰富的数据网格，同时结合 Struts2 的灵活性，实现前后端的无缝协作，提高...
jqGrid与Struts2整合实现学生信息管理
在本例中，我们探讨的是jqGrid这一流行的JavaScript网格控件与Struts2这一成熟的Java Web框架如何结合，来创建功能强大的数据展示和管理界面。 ### jqGrid 知识点 jqGrid是一个基于jQuery的JavaScript插件，它被...
使用jqgrid和struts2结合jdbc实现数据的增删改查操作
在本文中，我们将详细探讨如何结合jqgrid、struts2以及jdbc来实现增删改查功能，这是一种在Web应用程序中常见的数据操作模式。具体来说，我们会涉及到以下知识点： ### jqgrid概述 jqgrid是一个用于在HTML表格中...
关于jqGrid中查询功能
01-17
jqGrid 按多个条件 或单个条件进行查询
JqGrid实现自定义查询
weixin_30387799的博客
02-27 423
1 $("#jqGridId").setGridParam({url:"数据查询地址"}).trigger("reloadGrid"); 转载于:https://www.cnblogs.com/tongyinaocan/p/5222404.html
jqGrid自定义搜索框进行条件查询并且刷新表格
GLH508的博客
02-11 1647
前提：正常使用jqGrid表格插件，只是不愿意使用它的搜索框，所以选择自定义； 直接上代码： 前端： 页面显示： 页面代码（很简单，就是从别的页面扣了一个过来）： html: <div class="alert alert-info"> <!-- <form class="form-search" action="" method="p...
jqgrid--按搜索字段进行搜索并重新加载表格
热门推荐
zhengxiangwen的专栏
02-26 1万+
如下： //查询 var searchUrl = ""; $("#searchButton").click(function(){ var url = searchUrl + "?searchAnswer="+$("#searchAnswer").val(); //每次提出新的查询都转到第一页 $("#list2").jqGrid("setGridParam",
如何实现后端开发框架（六）-多表自定义查询
lyon0098的专栏
06-19 364
如何实现后端开发框架（六）-多表自定义查询
vue封装——使用js高阶函数实现多条件搜索功能
杜永康的博客
06-27 3519
🙂博主：爱学习的Akali king。之前出过一个react写法的前端搜索（[react写法——使用js高阶函数实现多条件搜索功能](https://blog.youkuaiyun.com/dyk11111/article/details/131256962)） 今天我们再研究一下vue中怎么实现。 之前用react写法实现前端搜索功能时，我们是从思路出发的，并不局限于框架语言。所以我们用vue实现前端搜索，思路也是一样，还是这三步。不过我们要做一个新的东西，就是封装。 因为我们将一个搜索功能写好后，这就相当于是
sql 中 exists和 in如何选择
znanj的博客
09-09 1047
如果外部查询是“大”和内部查询是“小”，IN是一般效率比EXISTS好。 如果外部查询是“小”和内部查询是“大”，那么EXISTS是相当有效的。
若依中初始多表格及自定义查询和依赖查询的一种实现方式
最新发布
夜郎King的博客
01-12 7274
本文以若依单体化架构项目为例，重点介绍如何在若依当中实现多表格统一初始化，如何将表格与查询参数表单进行绑定实现差异化提交，最后介绍表单依赖查询的实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值