jqGrid与Struts2的结合应用（三） —— 使用自定义表单对话框编辑Grid数据

最新推荐文章于 2023-02-07 00:41:42 发布
最新推荐文章于 2023-02-07 00:41:42 发布
阅读量843 收藏 1
点赞数
分类专栏： JqGrid学习记录 文章标签： jqGrid与Struts2的结合应用三 使用自定义表单对话框编辑Grid数据

上一篇中的最后一点提到了，如果在服务器端出现异常，没能完成预期的操作，那么客户端（浏览器）中的jqGrid还继续更新数据吗?

这一篇就来说说服务器端的操作。

首先看一下服务器端的代码，我将查看行数据和操作行数据放在了两个Action类里面：ViewContactAction和ContactConsoleAction。

[java] view plain copy
  1. package cn.gengv.struts2ex.jqGrid; 
  2. import java.util.List; 
  3. import com.byzl.hare.model.Contact; 
  4. import com.byzl.hare.model.PatentCase; 
  5. import com.byzl.hare.service.ContactService; 
  6. import com.opensymphony.xwork2.ActionSupport; 
  7. @SuppressWarnings("serial") 
  8. public class ViewContactAction extends ActionSupport { 
  9.     private Contact contact;     
  10.     private List<PatentCase> patentCases; 
  11.      
  12.     private ContactService contactService; 
  13.      
  14.     private String ajaxResult; 
  15.      
  16.     public String viewContact() { 
  17.          
  18.         int id = contact.getId(); 
  19.          
  20.         contact = contactService.queryById(contact.getId()); 
  21.          
  22.         if (contact == null) { 
  23.             ajaxResult = "未能找到ID为 " + id + " 的联系人"; 
  24.             return ERROR; 
  25.         } 
  26.          
  27.         ajaxResult = SUCCESS; 
  28.         return SUCCESS; 
  29.     } 
  30.      
  31.     public Contact getContact() { 
  32.         return contact; 
  33.     } 
  34.     public void setContact(Contact contact) { 
  35.         this.contact = contact; 
  36.     } 
  37.     public String getAjaxResult() { 
  38.         return ajaxResult; 
  39.     } 
  40.     public void setAjaxResult(String ajaxResult) { 
  41.         this.ajaxResult = ajaxResult; 
  42.     } 
  43.     public void setContactService(ContactService contactService) { 
  44.         this.contactService = contactService; 
  45.     } 
  46.     public List<PatentCase> getPatentCases() { 
  47.         return patentCases; 
  48.     } 
  49.     public void setPatentCases(List<PatentCase> patentCases) { 
  50.         this.patentCases = patentCases; 
  51.     } 
  52. } 

[java] view plain copy
  1. package cn.gengv.struts2ex.jqGrid; 
  2. import com.byzl.hare.model.Contact; 
  3. import com.byzl.hare.service.ContactService; 
  4. import com.opensymphony.xwork2.ActionSupport; 
  5. @SuppressWarnings("serial") 
  6. public class ContactConsoleAction extends ActionSupport { 
  7.     private ContactService contactService; 
  8.     private Contact contact; 
  9.      
  10.     private String ajaxResult; 
  11.      
  12.     // 创建新的Contact 
  13.     public String createContact() { 
  14.         try { 
  15.             contact.setId(this.contactService.addNew(contact)); 
  16.              
  17.             ajaxResult = SUCCESS; 
  18.             return SUCCESS; 
  19.         } catch (Exception e) { 
  20.             e.printStackTrace(); 
  21.             this.addActionError(e.getMessage()); 
  22.             ajaxResult = "创建新联系人失败!" + e.getMessage(); 
  23.             return ERROR; 
  24.         } 
  25.          
  26.     } 
  27.      
  28.     // 更新Contact信息 
  29.     public String updateContact() { 
  30.         try { 
  31.             this.contactService.update(contact); 
  32.         } catch (Exception e) { 
  33.             e.printStackTrace(); 
  34.             this.addActionError(e.getMessage()); 
  35.             ajaxResult = "更新联系人信息失败!" + e.getMessage(); 
  36.             return ERROR; 
  37.         } 
  38.         ajaxResult = SUCCESS; 
  39.         return SUCCESS; 
  40.     } 
  41.     // 删除Contact 
  42.     public String deleteContact() { 
  43.         try { 
  44.             this.contactService.delete(contact); 
  45.         } catch (Exception e) { 
  46.             e.printStackTrace(); 
  47.             this.addActionError(e.getMessage()); 
  48.             ajaxResult = "删除联系人失败!" + e.getMessage(); 
  49.             return ERROR; 
  50.         } 
  51.         ajaxResult = SUCCESS; 
  52.         return SUCCESS; 
  53.     } 
  54.     public Contact getContact() { 
  55.         return contact; 
  56.     } 
  57.     public void setContact(Contact contact) { 
  58.         this.contact = contact; 
  59.     } 
  60.     public String getAjaxResult() { 
  61.         return ajaxResult; 
  62.     } 
  63.     public void setAjaxResult(String ajaxResult) { 
  64.         this.ajaxResult = ajaxResult; 
  65.     } 
  66.     public void setContactService(ContactService contactService) { 
  67.         this.contactService = contactService; 
  68.     } 
  69. } 

说明：

  • 因为客户端会和Server进行ajax交互，所以我在类里面加入了一个成员变量ajaxResult，用来保存操作实际的结果。当action产生json类型的result时，这个成员变量也会被串行化进json结果中，发送到客户端。客户端的javascript代码会解析这个值，以执行相应操作。
  • 这两个类都是用了Object-backed Action的方式来传递数据（关于Object-backed Action可以参考《Struts2 in Action》一书的3.4节）。

在配置文件中，按如下配置Action：

[xhtml] view plain copy
  1. <action name="viewContact" 
  2.     class="cn.gengv.struts2ex.jqGrid.ViewContactAction" method="viewContact"> 
  3.     <result name="success" type="json"> 
  4.         <param name="includeProperties"> 
  5.             contact.*, ajaxResult 
  6.             </param> 
  7.         <param name="noCache">true</param> 
  8.         <param name="ignoreHierarchy">false</param> 
  9.         <param name="excludeNullProperties">true</param> 
  10.     </result> 
  11. </action> 
  12.      
  13. <action name="createContact" 
  14.     class="cn.gengv.struts2ex.jqGrid.ContactConsoleAction" method="createContact"> 
  15.     <result name="success" type="json"> 
  16.         <param name="includeProperties"> 
  17.             contact/.id, ajaxResult 
  18.             </param> 
  19.         <param name="noCache">true</param> 
  20.         <param name="ignoreHierarchy">false</param> 
  21.     </result> 
  22. </action> 
  23.      
  24. <action name="updateContact" 
  25.     class="cn.gengv.struts2ex.jqGrid.ContactConsoleAction" method="updateContact"> 
  26.     <result name="success" type="json"> 
  27.         <param name="includeProperties"> 
  28.             contact/.id, ajaxResult 
  29.             </param> 
  30.         <param name="noCache">true</param> 
  31.         <param name="ignoreHierarchy">false</param> 
  32.     </result> 
  33. </action> 
  34.      
  35. <action name="deleteContact" 
  36.     class="cn.gengv.struts2ex.jqGrid.ContactConsoleAction" method="deleteContact"> 
  37.     <result name="success" type="json"> 
  38.         <param name="includeProperties"> 
  39.             contact/.id, ajaxResult 
  40.             </param> 
  41.         <param name="noCache">true</param> 
  42.         <param name="ignoreHierarchy">false</param> 
  43.     </result> 
  44. </action> 

说明：

  • 请注意result的类型为json，而且includeProperties属性中包括ajaxResult这个成员变量名；
  • 由于添加contact时，id属性值是由后台自动生成的，因此需要将这个值传回客户端作为Grid的行id值。

服务器端的代码似乎没有什么更多需要说明的地方了，应该一目了然。

下面看看客户端部分，这里面似乎有不少值得说明一下的部分。

首先看一下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>jqGrid03</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/jqGrid03.js" mce_src="js/jqGrid03.js" type="text/javascript"></mce:script>   
  17.     </head> 
  18.     <body> 
  19.         <h3> 
  20.             jqGrid测试 03 
  21.         </h3> 
  22.         <div> 
  23.             <table id="gridTable"></table> 
  24.             <div id="gridPager"></div> 
  25.         </div> 
  26.          
  27.         <br /> 
  28.          
  29.         <div> 
  30.             <button onclick="openDialog4Adding()">添加联系人</button> 
  31.             <button onclick="openDialog4Updating()">修改联系人</button> 
  32.             <button onclick="openDialog4Deleting()">删除联系人</button> 
  33.         </div> 
  34.          
  35.         <div id="consoleDlg"> 
  36.             <div id="formContainer"> 
  37.                 <form id="consoleForm"> 
  38.                     <input type="hidden" id="selectId"/> 
  39.                     <table class="formTable"> 
  40.                         <tr> 
  41.                             <th>姓：</th> 
  42.                             <td> 
  43.                                 <input type="text" class="textField" id="lastName" name="lastName" /> 
  44.                             </td> 
  45.                         </tr> 
  46.                         <tr> 
  47.                             <th>名：</th> 
  48.                             <td> 
  49.                                 <input type="text" class="textField" id="firstName" name="firstName" /> 
  50.                             </td> 
  51.                         </tr> 
  52.                         <tr> 
  53.                             <th>国籍：</th> 
  54.                             <td> 
  55.                                 <input type="text" class="textField" id="nationality" name="nationality" /> 
  56.                             </td> 
  57.                         </tr> 
  58.                         <tr> 
  59.                             <th>身份证号：</th> 
  60.                             <td> 
  61.                                 <input type="text" class="textField" id="idCardNo" name="idCardNo" /> 
  62.                             </td> 
  63.                         </tr> 
  64.                         <tr> 
  65.                             <th>电子邮箱：</th> 
  66.                             <td> 
  67.                                 <input type="text" class="textField" id="email" name="email" /> 
  68.                             </td> 
  69.                         </tr> 
  70.                         <tr> 
  71.                             <th>电话：</th> 
  72.                             <td> 
  73.                                 <input type="text" class="textField" id="telNo" name="telNo" /> 
  74.                             </td> 
  75.                         </tr> 
  76.                         <tr> 
  77.                             <th>地址：</th> 
  78.                             <td> 
  79.                                 <input type="text" class="textField" id="address" name="address" /> 
  80.                             </td> 
  81.                         </tr>                      
  82.                     </table> 
  83.                 </form> 
  84.             </div> 
  85.         </div> 
  86.     </body> 
  87. </html> 

相比较之前的例子，这个例子最重要的变化是添加了一个id为consoleDlg的<div>块。在javascript的页面初始化部分我将使用jQuery UI的API将这个div生成为一个模态对话框，用作编辑数据的界面。

虽然jqGrid也提供了表单格式的编辑数据的界面，但是我个人感觉那个界面太基础，适用于简单的数据编辑情况，对于复杂的情况，可能还是自己写点代码更加灵活。

另一个项目中，我自己实现的相对复杂的表单界面：

回到本例中，上面的“对话框”div中，有一个form，其中有一个<input type="hidden" id="selectId"/>（当准备修改或者删除一行记录的时候，这行的id将被保存在这里，以备后用），以及若干个<input type="text">。

再来看看javascript部分，javascript部分主要功能分成几块：

  • 初始化表格；
  • 初始化对话框；
  • 添加记录时打开对话框；
  • 执行添加操作；
  • 载入行数据到对话框；
  • 修改记录时打开对话框；
  • 执行修改操作；
  • 删除记录时打开对话框；
  • 执行删除操作。

先看一下完整代码，然后逐块分析：

[javascript] view plain copy
  1. $(function(){ 
  2.     // 配置jqGrid组件 
  3.     $("#gridTable").jqGrid({ 
  4.         url: "jqGrid03.action", 
  5.         datatype: "json", 
  6.         mtype: "GET", 
  7.         height: 350, 
  8.         width: 600, 
  9.         colModel: [ 
  10.               {name:"id",index:"id",label:"编码",width:40},   
  11.               {name:"lastName",index:"lastName",label:"姓",width:80,sortable:false}, 
  12.               {name:"firstName",index:"firstName",label:"名",width:80,sortable:false}, 
  13.               {name:"email",index:"email",label:"电子邮箱",width:160,sortable:false}, 
  14.               {name:"telNo",index:"telNo",label:"电话",width:120,sortable:false} 
  15.         ], 
  16.         viewrecords: true, 
  17.         rowNum: 15, 
  18.         rowList: [15,50,100], 
  19.         prmNames: {search: "search"}, 
  20.         jsonReader: { 
  21.             root:"gridModel", 
  22.             records: "record", 
  23.             repeatitems : false 
  24.         }, 
  25.         pager: "#gridPager", 
  26.         caption: "联系人列表", 
  27.         hidegrid: false, 
  28.         shrikToFit: true 
  29.     }); 
  30.      
  31.     // 配置对话框 
  32.     $("#consoleDlg").dialog({ 
  33.         autoOpen: false,     
  34.         modal: true,    // 设置对话框为模态（modal）对话框 
  35.         resizable: true,     
  36.         width: 480, 
  37.         buttons: {  // 为对话框添加按钮 
  38.             "取消": function() {$("#consoleDlg").dialog("close")}, 
  39.             "创建": addContact, 
  40.             "保存": updateContact, 
  41.             "删除": deleteContact 
  42.         } 
  43.     }); 
  44. }); 
  45. var openDialog4Adding = function() { 
  46.     var consoleDlg = $("#consoleDlg"); 
  47.     var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane"); 
  48.     consoleDlg.find("input").removeAttr("disabled").val(""); 
  49.     dialogButtonPanel.find("button:not(:contains('取消'))").hide(); 
  50.     dialogButtonPanel.find("button:contains('创建')").show(); 
  51.     consoleDlg.dialog("option", "title", "创建新联系人").dialog("open"); 
  52. }; 
  53. var openDialog4Updating = function() { 
  54.     var consoleDlg = $("#consoleDlg"); 
  55.     var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane"); 
  56.      
  57.     consoleDlg.find("input").removeAttr("disabled"); 
  58.     dialogButtonPanel.find("button:not(:contains('取消'))").hide(); 
  59.     dialogButtonPanel.find("button:contains('保存')").show(); 
  60.     consoleDlg.dialog("option", "title", "修改联系人信息"); 
  61.      
  62.     loadSelectedRowData(); 
  63. } 
  64. var openDialog4Deleting = function() { 
  65.     var consoleDlg = $("#consoleDlg"); 
  66.     var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane"); 
  67.      
  68.     consoleDlg.find("input").attr("disabled", true); 
  69.     dialogButtonPanel.find("button:not(:contains('取消'))").hide(); 
  70.     dialogButtonPanel.find("button:contains('删除')").show(); 
  71.     consoleDlg.dialog("option", "title", "删除联系人"); 
  72.      
  73.     loadSelectedRowData(); 
  74. } 
  75. var loadSelectedRowData = function() {   
  76.     var selectedRowId = $("#gridTable").jqGrid("getGridParam", "selrow"); 
  77.     if (!selectedRowId) { 
  78.         alert("请先选择需要编辑的行!"); 
  79.         return false; 
  80.     } else { 
  81.         var params = { 
  82.             "contact.id" : selectedRowId 
  83.         }; 
  84.         var actionUrl = "viewContact.action"; 
  85.         // 从Server读取对应ID的JSON数据 
  86.         $.ajax( { 
  87.             url : actionUrl, 
  88.             data : params, 
  89.             dataType : "json", 
  90.             cache : false, 
  91.             error : function(textStatus, errorThrown) { 
  92.                 alert("系统ajax交互错误: " + textStatus); 
  93.             }, 
  94.             success : function(data, textStatus) { 
  95.                 // 如果读取结果成功，则将信息载入到对话框中                  
  96.                 var rowData = data.contact; 
  97.                 var consoleDlg = $("#consoleDlg"); 
  98.                 consoleDlg.find("#selectId").val(rowData.id); 
  99.                 consoleDlg.find("#lastName").val(rowData.lastName); 
  100.                 consoleDlg.find("#firstName").val(rowData.firstName); 
  101.                 consoleDlg.find("#certificateNo").val(rowData.certificateNo); 
  102.                 consoleDlg.find("#email").val(rowData.email); 
  103.                 consoleDlg.find("#telNo").val(rowData.telNo); 
  104.                 consoleDlg.find("#address").val(rowData.address); 
  105.                 consoleDlg.find("#idCardNo").val(rowData.idCardNo); 
  106.                 consoleDlg.find("#nationality").val(rowData.nationality); 
  107.                  
  108.                 // 根据新载入的数据将表格中的对应数据行一并更新一下 
  109.                 var dataRow = { 
  110.                         id : rowData.id, 
  111.                         lastName : rowData.lastName, 
  112.                         firstName : rowData.firstName, 
  113.                         email : rowData.email, 
  114.                         telNo : rowData.telNo 
  115.                     }; 
  116.                  
  117.                 $("#gridTable").jqGrid("setRowData", data.contact.id, dataRow); 
  118.                      
  119.                 // 打开对话框 
  120.                 consoleDlg.dialog("open"); 
  121.             } 
  122.         }); 
  123.          
  124.     } 
  125. }; 
  126. var addContact = function() { 
  127.     var consoleDlg = $("#consoleDlg"); 
  128.          
  129.     var pLastName = $.trim(consoleDlg.find("#lastName").val()); 
  130.     var pFirstName = $.trim(consoleDlg.find("#firstName").val()); 
  131.     var pEmail = $.trim(consoleDlg.find("#email").val()); 
  132.     var pTelNo = $.trim(consoleDlg.find("#telNo").val()); 
  133.     var pAddress = $.trim(consoleDlg.find("#address").val()); 
  134.     var pIdCardNo = $.trim(consoleDlg.find("#idCardNo").val()); 
  135.     var pNationality = $.trim(consoleDlg.find("#nationality").val()); 
  136.      
  137.     var params = { 
  138.         "contact.lastName" : pLastName, 
  139.         "contact.firstName" : pFirstName, 
  140.         "contact.email" : pEmail, 
  141.         "contact.telNo" : pTelNo, 
  142.         "contact.address" : pAddress, 
  143.         "contact.idCardNo" : pIdCardNo, 
  144.         "contact.nationality" : pNationality 
  145.     }; 
  146.      
  147.     var actionUrl = "createContact.action" 
  148.      
  149.     $.ajax( { 
  150.         url : actionUrl, 
  151.         data : params, 
  152.         dataType : "json", 
  153.         cache : false, 
  154.         error : function(textStatus, errorThrown) { 
  155.             alert("系统ajax交互错误: " + textStatus); 
  156.         }, 
  157.         success : function(data, textStatus) { 
  158.             if(data.ajaxResult == "success") { 
  159.                 var dataRow = { 
  160.                     id : data.contact.id,   // 从Server端得到系统分配的id 
  161.                     lastName : pLastName, 
  162.                     firstName : pFirstName, 
  163.                     email : pEmail, 
  164.                     telNo : pTelNo 
  165.                 }; 
  166.                  
  167.                 var srcrowid = $("#gridTable").jqGrid("getGridParam", "selrow"); 
  168.                  
  169.                 if(srcrowid) { 
  170.                     $("#gridTable").jqGrid("addRowData", data.contact.id, dataRow, "before", srcrowid); 
  171.                 } else { 
  172.                     $("#gridTable").jqGrid("addRowData", data.contact.id, dataRow, "first"); 
  173.                 } 
  174.                 consoleDlg.dialog("close"); 
  175.                  
  176.                 alert("联系人添加操作成功!"); 
  177.                  
  178.             } else { 
  179.                 alert("添加操作失败!"); 
  180.             } 
  181.         } 
  182.     }); 
  183. }; 
  184. var updateContact = function() { 
  185.     var consoleDlg = $("#consoleDlg"); 
  186.      
  187.     var pId = $.trim(consoleDlg.find("#selectId").val()); 
  188.     var pLastName = $.trim(consoleDlg.find("#lastName").val()); 
  189.     var pFirstName = $.trim(consoleDlg.find("#firstName").val()); 
  190.     var pEmail = $.trim(consoleDlg.find("#email").val()); 
  191.     var pTelNo = $.trim(consoleDlg.find("#telNo").val()); 
  192.     var pAddress = $.trim(consoleDlg.find("#address").val()); 
  193.     var pIdCardNo = $.trim(consoleDlg.find("#idCardNo").val()); 
  194.     var pNationality = $.trim(consoleDlg.find("#nationality").val()); 
  195.     var params = { 
  196.         "contact.id" : pId, 
  197.         "contact.lastName" : pLastName, 
  198.         "contact.firstName" : pFirstName, 
  199.         "contact.email" : pEmail, 
  200.         "contact.telNo" : pTelNo, 
  201.         "contact.address" : pAddress, 
  202.         "contact.idCardNo" : pIdCardNo, 
  203.         "contact.nationality" : pNationality 
  204.     }; 
  205.     var actionUrl = "updateContact.action"; 
  206.     $.ajax( { 
  207.         url : actionUrl, 
  208.         data : params, 
  209.         dataType : "json", 
  210.         cache : false, 
  211.         error : function(textStatus, errorThrown) { 
  212.             alert("系统ajax交互错误: " + textStatus); 
  213.         }, 
  214.         success : function(data, textStatus) { 
  215.             if (data.ajaxResult == "success") { 
  216.                 var dataRow = { 
  217.                     id : data.contact.id, 
  218.                     lastName : pLastName, 
  219.                     firstName : pFirstName, 
  220.                     email : pEmail, 
  221.                     telNo : pTelNo 
  222.                 }; 
  223.                 $("#gridTable").jqGrid("setRowData", data.contact.id, dataRow, {color:"#FF0000"}); 
  224.                  
  225.                 alert("联系人信息更新成功!"); 
  226.                  
  227.                 consoleDlg.dialog("close"); 
  228.                  
  229.             } else { 
  230.                 alert("修改操作失败!"); 
  231.             } 
  232.         } 
  233.     }); 
  234. }; 
  235. var deleteContact = function() { 
  236.     var consoleDlg = $("#consoleDlg"); 
  237.      
  238.     var pId = $.trim(consoleDlg.find("#selectId").val()); 
  239.     var params = { 
  240.         "contact.id" : pId 
  241.     }; 
  242.     var actionUrl = "deleteContact.action"; 
  243.     $.ajax({ 
  244.         url : actionUrl, 
  245.         data : params, 
  246.         dataType : "json", 
  247.         cache : false, 
  248.         error : function(textStatus, errorThrown) { 
  249.             alert("系统ajax交互错误: " + textStatus); 
  250.         }, 
  251.         success : function(data, textStatus) { 
  252.             if (data.ajaxResult == "success") { 
  253.                 $("#gridTable").jqGrid("delRowData", pId); 
  254.                  
  255.                 consoleDlg.dialog("close"); 
  256.                 alert("联系人删除成功!"); 
  257.             } else { 
  258.                 alert("删除操作失败!"); 
  259.             } 
  260.         } 
  261.     }); 
  262. }; 

1. 初始化Grid表格：
这一部分的代码，和上一篇中的例子完全相同，不再赘述。

2. 初始化对话框：

[javascript] view plain copy
  1. $("#consoleDlg").dialog({ 
  2.     autoOpen: false,     
  3.     modal: true,    // (1) 设置对话框为模态（modal）对话框 
  4.     resizable: true,     
  5.     width: 480, 
  6.     buttons: {  // (2) 为对话框添加按钮 
  7.         "取消": function() {$("#consoleDlg").dialog("close")}, 
  8.         "创建": addContact, 
  9.         "保存": updateContact, 
  10.         "删除": deleteContact 
  11.     } 
  12. }); 

说明：

(1)处将modal属性设为true，即将对话框设置为“模态”，当对话框打开状态时，下层的Grid表格式不能被编辑的（注意z-Index的值）；

(2)处为对话框添加了4个按钮，因为增、删、查都共用一个对话框，所以添加4个按钮是比较方便的，只要控制它们不同状态下的显隐状态就OK了。点击每个按钮都会执行各自对应的函数。

注：jQuery UI的dialog方法可以详细参考jQuery UI的文档。

3. 添加记录时打开对话框：

[javascript] view plain copy
  1. var openDialog4Adding = function() { 
  2.     var consoleDlg = $("#consoleDlg"); 
  3.     var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane");   // (1) 
  4.     consoleDlg.find("input").removeAttr("disabled").val("");    // (2) 
  5.     dialogButtonPanel.find("button:not(:contains('取消'))").hide(); // (3) 
  6.     dialogButtonPanel.find("button:contains('创建')").show(); // (4) 
  7.     consoleDlg.dialog("option", "title", "创建新联系人").dialog("open");  // (5) 
  8. }; 

说明：
(1)处先获得对话框按钮的父元素；

(2)将所有的input元素解除disabled状态（在打开删除对话框时，会diable这些input元素）；

(3)(4)处调整对话框按钮的显示隐藏状态；

(5)更新对话框标题。

4. 执行添加操作：

[javascript] view plain copy
  1. var addContact = function() { 
  2.     var consoleDlg = $("#consoleDlg"); 
  3.          
  4.     // (1) 
  5.     var pLastName = $.trim(consoleDlg.find("#lastName").val()); 
  6.     var pFirstName = $.trim(consoleDlg.find("#firstName").val()); 
  7.     var pEmail = $.trim(consoleDlg.find("#email").val()); 
  8.     var pTelNo = $.trim(consoleDlg.find("#telNo").val()); 
  9.     var pAddress = $.trim(consoleDlg.find("#address").val()); 
  10.     var pIdCardNo = $.trim(consoleDlg.find("#idCardNo").val()); 
  11.     var pNationality = $.trim(consoleDlg.find("#nationality").val()); 
  12.      
  13.     var params = { 
  14.         "contact.lastName" : pLastName, 
  15.         "contact.firstName" : pFirstName, 
  16.         "contact.email" : pEmail, 
  17.         "contact.telNo" : pTelNo, 
  18.         "contact.address" : pAddress, 
  19.         "contact.idCardNo" : pIdCardNo, 
  20.         "contact.nationality" : pNationality 
  21.     }; 
  22.      
  23.     var actionUrl = "createContact.action" 
  24.      
  25.     $.ajax( { 
  26.         url : actionUrl, 
  27.         data : params, 
  28.         dataType : "json", 
  29.         cache : false, 
  30.         error : function(textStatus, errorThrown) { // (2) 
  31.             alert("系统ajax交互错误: " + textStatus); 
  32.         }, 
  33.         success : function(data, textStatus) {  // (3) 
  34.             if(data.ajaxResult == "success") {  // (4) 
  35.                 var dataRow = { 
  36.                     id : data.contact.id,   // (5) 从Server端得到系统分配的id 
  37.                     lastName : pLastName, 
  38.                     firstName : pFirstName, 
  39.                     email : pEmail, 
  40.                     telNo : pTelNo 
  41.                 }; 
  42.                  
  43.                 var srcrowid = $("#gridTable").jqGrid("getGridParam", "selrow");    // (6) 
  44.                  
  45.                 if(srcrowid) { 
  46.                     $("#gridTable").jqGrid("addRowData", data.contact.id, dataRow, "before", srcrowid); // （7） 
  47.                 } else { 
  48.                     $("#gridTable").jqGrid("addRowData", data.contact.id, dataRow, "first");    // (8) 
  49.                 } 
  50.                 consoleDlg.dialog("close"); 
  51.                  
  52.                 alert("联系人添加操作成功!"); 
  53.                  
  54.             } else {    // (9) 
  55.                 alert("添加操作失败!"); 
  56.             } 
  57.         } 
  58.     }); 
  59. }; 

说明：

(1)从对话框的表单中读取各个输入项的值；
(2)在$.ajax()方法遇到error时，会提示错误（从而让jqGrid不再继续后面的Grid操作）；
(3)如果$.ajax()成功，则执行回调函数，但是应当注意这里的“success”，是指ajax请求成功得到response，而不是Struts2 Action的“success”。当Action的result的name为“error”、“input”、“login”等的时候，只要它能够给客户端返回一个格式正确的json数据（我们这里定义了需要的是json），那么都会被认为是“success”；
(4)因此通过传回来的json数据中的ajaxResult项的值，来判断逻辑事务操作是否成功；（在正式项目中，我为不同的Action result定义了不同的ajaxResult值，以方便客户端判断，执行相应后续操作。这里为了演示简便，只定义了success一种，Action配置文件中也只定义了success结果，即使出现error或input等其他结果，Struts2也会因为找不到其他result配置，而抛出异常，也就不会向客户端发送json数据。客户端也就认为ajax请求失败了，从而执行$.ajax()中error项定义的回调方法。）
(5)如果执行成功，则根据Action配置文件的定义，json数据中会包括"contact.id":value这段数据；而jqGrid也就应该继续后续操作，更新Grid表格内的数据；
(6)获得最后选中行的行id；
(7)(8)如果最后选中行的行id不为null，则将新数据行插入到这行上面；否则将新数据加入到Grid的顶端；
(9)如果ajaxResult的值不为success，即逻辑实务操作没有成功，jqGrid不再进行后续操作，同时向用户提示操作失败。

5. 载入行数据到对话框：

当修改或者删除某行数据的时候，通常需要先打开这行记录，让用户看到并确认操作。这就需要将行数据载入到对话框中。

[javascript] view plain copy
  1. var loadSelectedRowData = function() {   
  2.     var selectedRowId = $("#gridTable").jqGrid("getGridParam", "selrow"); 
  3.     if (!selectedRowId) {   // (1) 
  4.         alert("请先选择需要编辑的行!"); 
  5.         return false; 
  6.     } else { 
  7.         var params = { 
  8.             "contact.id" : selectedRowId 
  9.         }; 
  10.         var actionUrl = "viewContact.action"; 
  11.         // 从Server读取对应ID的JSON数据 
  12.         $.ajax( { 
  13.             url : actionUrl, 
  14.             data : params, 
  15.             dataType : "json", 
  16.             cache : false, 
  17.             error : function(textStatus, errorThrown) { 
  18.                 alert("系统ajax交互错误: " + textStatus); 
  19.             }, 
  20.             success : function(data, textStatus) { 
  21.                 // 如果读取结果成功，则将信息载入到对话框中                  
  22.                 var rowData = data.contact; 
  23.                 var consoleDlg = $("#consoleDlg"); 
  24.   
  25.                 // (2) 
  26.                 consoleDlg.find("#selectId").val(rowData.id); 
  27.                 consoleDlg.find("#lastName").val(rowData.lastName); 
  28.                 consoleDlg.find("#firstName").val(rowData.firstName); 
  29.                 consoleDlg.find("#certificateNo").val(rowData.certificateNo); 
  30.                 consoleDlg.find("#email").val(rowData.email); 
  31.                 consoleDlg.find("#telNo").val(rowData.telNo); 
  32.                 consoleDlg.find("#address").val(rowData.address); 
  33.                 consoleDlg.find("#idCardNo").val(rowData.idCardNo); 
  34.                 consoleDlg.find("#nationality").val(rowData.nationality);                
  35.   
  36.                 // (3) 根据新载入的数据将表格中的对应数据行一并更新一下 
  37.                 var dataRow = { 
  38.                         id : rowData.id, 
  39.                         lastName : rowData.lastName, 
  40.                         firstName : rowData.firstName, 
  41.                         email : rowData.email, 
  42.                         telNo : rowData.telNo 
  43.                     };               
  44.                 $("#gridTable").jqGrid("setRowData", data.contact.id, dataRow); 
  45.                  
  46.                 consoleDlg.dialog("open");  // (4) 
  47.             } 
  48.         }); 
  49.          
  50.     } 
  51. }; 

说明：

(1)如果没有行被选中，则提示用户；

(2)如果成功地从Server得到行数据，则将行数据的内容置入对话框表单中；

(3)根据新载入的数据将表格中的对应数据行一并更新一下；

(4)数据载入完毕后，打开对话框。

注：其实(3)是可选的部分，我的考虑是既然已经将最新的数据从Server取回来了，干脆就将Grid表格中的数据也更新一下。不论修改或删除操作是否被用户提交，更新一下数据总是好的，也不太费事。既然用户选择了这行数据，说明这行应该是用户关心的，有可能用户打开Grid页面一段时间了，而这行数据实际已经被其他用户更新了。当前用户通过打开对话框，也能得到最新的数据，即便没有修改或者删除，也不算无“功”而返啊。这主要也是从用户体验的角度出发。

6. 修改记录时打开对话框：

[javascript] view plain copy
  1. var openDialog4Updating = function() { 
  2.     var consoleDlg = $("#consoleDlg"); 
  3.     var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane"); 
  4.      
  5.     consoleDlg.find("input").removeAttr("disabled"); 
  6.     dialogButtonPanel.find("button:not(:contains('取消'))").hide(); 
  7.     dialogButtonPanel.find("button:contains('保存')").show(); 
  8.     consoleDlg.dialog("option", "title", "修改联系人信息"); 
  9.      
  10.     loadSelectedRowData();  // (1) 
  11. } 

说明：
前几行的代码与添加记录是打开对话框时的过程相似，不再赘述；(1)处即在打开对话框之前，将对应行数据载入对话框。

7. 执行修改操作：

[javascript] view plaincopy
  1. var updateContact = function() { 
  2.     var consoleDlg = $("#consoleDlg"); 
  3.      
  4.     var pId = $.trim(consoleDlg.find("#selectId").val()); 
  5.     var pLastName = $.trim(consoleDlg.find("#lastName").val()); 
  6.     var pFirstName = $.trim(consoleDlg.find("#firstName").val()); 
  7.     var pEmail = $.trim(consoleDlg.find("#email").val()); 
  8.     var pTelNo = $.trim(consoleDlg.find("#telNo").val()); 
  9.     var pAddress = $.trim(consoleDlg.find("#address").val()); 
  10.     var pIdCardNo = $.trim(consoleDlg.find("#idCardNo").val()); 
  11.     var pNationality = $.trim(consoleDlg.find("#nationality").val()); 
  12.     var params = { 
  13.         "contact.id" : pId, 
  14.         "contact.lastName" : pLastName, 
  15.         "contact.firstName" : pFirstName, 
  16.         "contact.email" : pEmail, 
  17.         "contact.telNo" : pTelNo, 
  18.         "contact.address" : pAddress, 
  19.         "contact.idCardNo" : pIdCardNo, 
  20.         "contact.nationality" : pNationality 
  21.     }; 
  22.     var actionUrl = "updateContact.action"; 
  23.     $.ajax( { 
  24.         url : actionUrl, 
  25.         data : params, 
  26.         dataType : "json", 
  27.         cache : false, 
  28.         error : function(textStatus, errorThrown) { 
  29.             alert("系统ajax交互错误: " + textStatus); 
  30.         }, 
  31.         success : function(data, textStatus) { 
  32.             if (data.ajaxResult == "success") { 
  33.                 var dataRow = { 
  34.                     id : data.contact.id, 
  35.                     lastName : pLastName, 
  36.                     firstName : pFirstName, 
  37.                     email : pEmail, 
  38.                     telNo : pTelNo 
  39.                 }; 
  40.                 $("#gridTable").jqGrid("setRowData", data.contact.id, dataRow, {color:"#FF0000"});  // (1) 
  41.                  
  42.                 alert("联系人信息更新成功!"); 
  43.                  
  44.                 consoleDlg.dialog("close"); 
  45.                  
  46.             } else { 
  47.                 alert("修改操作失败!"); 
  48.             } 
  49.         } 
  50.     }); 
  51. }; 

说明：参考执行添加操作的说明，这段应该很好理解。(1)处更新Grid中对应行的数据，并添加CSS样式。

8. 删除记录时打开对话框：

[javascript] view plaincopy
  1. var openDialog4Deleting = function() { 
  2.     var consoleDlg = $("#consoleDlg"); 
  3.     var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane"); 
  4.      
  5.     consoleDlg.find("input").attr("disabled", true);    // (1) 
  6.     dialogButtonPanel.find("button:not(:contains('取消'))").hide(); 
  7.     dialogButtonPanel.find("button:contains('删除')").show(); 
  8.     consoleDlg.dialog("option", "title", "删除联系人"); 
  9.      
  10.     loadSelectedRowData(); 
  11. } 

说明：(1)处将所有input全部disable掉，使之不能输入内容。

9. 执行删除操作：

[javascript] view plain copy
  1. var deleteContact = function() { 
  2.     var consoleDlg = $("#consoleDlg"); 
  3.      
  4.     var pId = $.trim(consoleDlg.find("#selectId").val()); 
  5.     var params = { 
  6.         "contact.id" : pId 
  7.     }; 
  8.     var actionUrl = "deleteContact.action"; 
  9.     $.ajax({ 
  10.         url : actionUrl, 
  11.         data : params, 
  12.         dataType : "json", 
  13.         cache : false, 
  14.         error : function(textStatus, errorThrown) { 
  15.             alert("系统ajax交互错误: " + textStatus); 
  16.         }, 
  17.         success : function(data, textStatus) { 
  18.             if (data.ajaxResult == "success") { 
  19.                 $("#gridTable").jqGrid("delRowData", pId); 
  20.                  
  21.                 consoleDlg.dialog("close"); 
  22.                 alert("联系人删除成功!"); 
  23.             } else { 
  24.                 alert("删除操作失败!"); 
  25.             } 
  26.         } 
  27.     }); 
  28. }; 




以上就是实际应用中，使用自定义表单对话框编辑Grid数据的过程。下一篇说一下排序与搜索。

c622724
关注
专栏目录
使用ext-4.2.1 和Struts2 实现 grid
Yalone--让时光只能改变你的容颜
07-16 3317
前提准备：   1.struts2必备Jar包     2.struts2 Json插件 json-plugin 可以转换action的返回结果为json数据，恰好配合extjs 的store进行数据的交互。 一、Java代码  1.User.java package com.yalone.test.ext; public class User {
jqGrid与Struts2的结合应用（十） —— 真正的自定义表单查询
GengV - 在Java的世界流浪
07-23 2万+
关于这个问题，我在网上搜了一下，大多都是引用jqGrid的文档中的filterGrid方法。但这个方法不是真正意义的自定义查询。 这篇文章主要讲述一下真正意义的自定义查询，顺便简单聊聊jqGrid源码中查询的实现方法。 在这个系列的第五篇中（http://blog.csdn.net/gengv/archive/2010/07/10/5725172.aspx ）曾经讲到了如何进行数据查询。其中提到了一种“自定义查询”，这是jqGrid的文档中给出的一种所谓的自定义查询。其实就是把工具条查询，
jqGrid dialog例子
08-04
运用了jqGrid实现数据的展示，分页，运用dialog弹出层进行增删改，弹出层代码分页写，用了ajax传值，同时也是MVC的运用。调用数据库则用的是linq
vue表单对话框的新建或修改
Nie2014的博客
07-23 2806
主要使用element-ui中的el-dialog控件，使用场景如下： 表单对话框的标题 根据当前的添加、修改操作展示不同对话框标题。 operation_type: "", textMap: {create: "添加设备", edit: "修改设备",}, 添加 <el-button type="text" icon="el-icon-circle-plus-outline" @click="handleAddDev"> 添加 </el-button>
jqGrid与Struts2的结合应用_操作Grid数据
11-24
在本文中，我们将深入探讨如何将 jqGrid 与 Struts2 结合使用，以及 jqGrid 的一些核心方法。 在 Struts2 框架中，jqGrid 可以作为前端展示大量数据的有效工具，同时提供分页、排序、过滤等高级功能。要实现 jqGrid...
jqGrid与Struts2的结合应用
12-18
5. **自定义对话框**：在描述中提到的"使用自定义表单对话框编辑Grid数据"，指的是使用jQuery UI或其他工具创建一个弹出窗口，展示一个表单供用户编辑选定行的数据。在提交表单时，jqGrid会通过AJAX调用Struts2 ...
jqgrid+struts2
10-03
**三、jqGrid与Struts2结合应用** jqGrid与Struts2的结合使用可以实现数据的后台动态加载和前端的交互操作。具体步骤如下： 1. **配置Struts2 Action**：创建一个Action类，负责处理请求并返回数据。例如，可以创建...
jqGrid表格应用之新增与删除数据附源码下载
11-22
jqGrid可以结合fancybox等插件完成超酷的弹出层效果，通过与php后台交互，可以轻松完成数据的添加与详情查看，而这个过程完全是一个ajax异步通信过程，是一个非常友好的富客户端应用。 下面给大家展示了效果图，喜欢...
jqgrid+struts2实现的增删改查
06-23
在本项目中，jqGrid 与 Struts2 结合，实现了Web应用中的核心功能——增删改查。以下是关键步骤： 1. **配置 Struts2**：首先，需要在项目的 `struts.xml` 配置文件中设置Action类及其对应的URL映射，以及指定使用...
Jqgrid入门-使用模态对话框编辑表格数据(三)
aichuxia4449的博客
06-28 406
Jqgrid是一个强大的表格插件，它提供了多种方式来编辑数据。这三种方式分别是： Cell Editing——只允许修改某一个单元格内容 Inline Editing——允许在jqGrid中直接修改某一行的数据 Form Editing——弹出一个新的编辑窗口进行编辑和新增 在我做的DEMO中，主要运用的是第三种， 弹出一个新窗口来编辑数...
jqgrid实现多行数据弹出框添加修改查询操作
qililong88的博客
08-05 5212
此页面可以实现在单行末尾进行添加图片操作，也可以实现选中多行然后一起添加修改图片操作。前台页面和后台代码及注解如下所示：groupImage包：materialNextDef.jsp： 药品图片添加 //要弹出添加框，此处先定义为隐藏
JavaScript 练手小技巧：HTML5 的 dialog 标签制作对话框
最新发布
九天翔龙的技术博客
02-07 9431
对话框，在应用中常常用来做（如，登录、删除信息等）。
jqGrid与Struts2的结合应用（二） —— 操作Grid数据
热门推荐
GengV - 在Java的世界流浪
07-06 3万+
上一篇中，jqGrid已经可以从Server端获得数据，并显示在Grid表格中了。下面说一下，如何操作Grid表格及其数据。jqGrid有很多方法函数，用来操作数据或者操作Grid表格本身。jqGrid的方法有两种调用方式：$("#grid_id").jqGridMethod( parameter1,...,parameterN );或者$("#grid_id").jqGrid('method', parameter1,...,parameterN );首先介绍一下jqGrid的几个最常用的方法函数，具体的
jqGrid表单编辑配置参数
菜鸟史
03-10 1万+
jqGrid表单编辑 jqGrid支持一个浮动的表单用于查看，添加，编辑，删除和查询表格数据，下面为添加记录的效果图 　　在你的项目中可以使用模态盒子和行编辑。其中，行编辑只能用于编辑已经存在的行，不能用于查询，删除，添加数据。实际应用中，不推荐同时使用这2中方法，因为选择同一行时这2者存在冲突（在这种情况下，当你选择一行来编辑，点击编辑模态盒子，你将得到模态盒子中的单元格ID，而不是
jqGrid的编辑——基于Form Editing的增、删、改操作
weixin_33754065的博客
12-14 506
为什么80%的码农都做不了架构师？>>> ...
自定义jqgrid单元格编辑：点击弹出选择对话框
该资源是一个关于jqGrid的示例，展示了如何实现一个自定义的单元格编辑功能。当用户点击单元格时，会弹出一个数据选择对话框，用户从中选取一条数据后，所选数据将被写入到当前行的对应单元格中。这个示例可能是从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值