`

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

 
阅读更多

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

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

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

[java] view plaincopyprint?
  1. packagecn.gengv.struts2ex.jqGrid;
  2. importjava.util.List;
  3. importcom.byzl.hare.model.Contact;
  4. importcom.byzl.hare.model.PatentCase;
  5. importcom.byzl.hare.service.ContactService;
  6. importcom.opensymphony.xwork2.ActionSupport;
  7. @SuppressWarnings("serial")
  8. publicclassViewContactActionextendsActionSupport{
  9. privateContactcontact;
  10. privateList<PatentCase>patentCases;
  12. privateContactServicecontactService;
  14. privateStringajaxResult;
  16. publicStringviewContact(){
  18. intid=contact.getId();
  20. contact=contactService.queryById(contact.getId());
  22. if(contact==null){
  23. ajaxResult="未能找到ID为"+id+"的联系人";
  24. returnERROR;
  25. }
  27. ajaxResult=SUCCESS;
  28. returnSUCCESS;
  29. }
  31. publicContactgetContact(){
  32. returncontact;
  33. }
  34. publicvoidsetContact(Contactcontact){
  35. this.contact=contact;
  36. }
  37. publicStringgetAjaxResult(){
  38. returnajaxResult;
  39. }
  40. publicvoidsetAjaxResult(StringajaxResult){
  41. this.ajaxResult=ajaxResult;
  42. }
  43. publicvoidsetContactService(ContactServicecontactService){
  44. this.contactService=contactService;
  45. }
  46. publicList<PatentCase>getPatentCases(){
  47. returnpatentCases;
  48. }
  49. publicvoidsetPatentCases(List<PatentCase>patentCases){
  50. this.patentCases=patentCases;
  51. }
  52. }

[java] view plaincopyprint?
  1. packagecn.gengv.struts2ex.jqGrid;
  2. importcom.byzl.hare.model.Contact;
  3. importcom.byzl.hare.service.ContactService;
  4. importcom.opensymphony.xwork2.ActionSupport;
  5. @SuppressWarnings("serial")
  6. publicclassContactConsoleActionextendsActionSupport{
  7. privateContactServicecontactService;
  8. privateContactcontact;
  10. privateStringajaxResult;
  12. //创建新的Contact
  13. publicStringcreateContact(){
  14. try{
  15. contact.setId(this.contactService.addNew(contact));
  17. ajaxResult=SUCCESS;
  18. returnSUCCESS;
  19. }catch(Exceptione){
  20. e.printStackTrace();
  21. this.addActionError(e.getMessage());
  22. ajaxResult="创建新联系人失败!"+e.getMessage();
  23. returnERROR;
  24. }
  26. }
  28. //更新Contact信息
  29. publicStringupdateContact(){
  30. try{
  31. this.contactService.update(contact);
  32. }catch(Exceptione){
  33. e.printStackTrace();
  34. this.addActionError(e.getMessage());
  35. ajaxResult="更新联系人信息失败!"+e.getMessage();
  36. returnERROR;
  37. }
  38. ajaxResult=SUCCESS;
  39. returnSUCCESS;
  40. }
  41. //删除Contact
  42. publicStringdeleteContact(){
  43. try{
  44. this.contactService.delete(contact);
  45. }catch(Exceptione){
  46. e.printStackTrace();
  47. this.addActionError(e.getMessage());
  48. ajaxResult="删除联系人失败!"+e.getMessage();
  49. returnERROR;
  50. }
  51. ajaxResult=SUCCESS;
  52. returnSUCCESS;
  53. }
  54. publicContactgetContact(){
  55. returncontact;
  56. }
  57. publicvoidsetContact(Contactcontact){
  58. this.contact=contact;
  59. }
  60. publicStringgetAjaxResult(){
  61. returnajaxResult;
  62. }
  63. publicvoidsetAjaxResult(StringajaxResult){
  64. this.ajaxResult=ajaxResult;
  65. }
  66. publicvoidsetContactService(ContactServicecontactService){
  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 plaincopyprint?
  1. <actionname="viewContact"
  2. class="cn.gengv.struts2ex.jqGrid.ViewContactAction"method="viewContact">
  3. <resultname="success"type="json">
  4. <paramname="includeProperties">
  5. contact.*,ajaxResult
  6. </param>
  7. <paramname="noCache">true</param>
  8. <paramname="ignoreHierarchy">false</param>
  9. <paramname="excludeNullProperties">true</param>
  10. </result>
  11. </action>
  13. <actionname="createContact"
  14. class="cn.gengv.struts2ex.jqGrid.ContactConsoleAction"method="createContact">
  15. <resultname="success"type="json">
  16. <paramname="includeProperties">
  17. contact/.id,ajaxResult
  18. </param>
  19. <paramname="noCache">true</param>
  20. <paramname="ignoreHierarchy">false</param>
  21. </result>
  22. </action>
  24. <actionname="updateContact"
  25. class="cn.gengv.struts2ex.jqGrid.ContactConsoleAction"method="updateContact">
  26. <resultname="success"type="json">
  27. <paramname="includeProperties">
  28. contact/.id,ajaxResult
  29. </param>
  30. <paramname="noCache">true</param>
  31. <paramname="ignoreHierarchy">false</param>
  32. </result>
  33. </action>
  35. <actionname="deleteContact"
  36. class="cn.gengv.struts2ex.jqGrid.ContactConsoleAction"method="deleteContact">
  37. <resultname="success"type="json">
  38. <paramname="includeProperties">
  39. contact/.id,ajaxResult
  40. </param>
  41. <paramname="noCache">true</param>
  42. <paramname="ignoreHierarchy">false</param>
  43. </result>
  44. </action>

说明：

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

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

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

首先看一下html的完整代码：

[xhtml] view plaincopyprint?
  1. <!DOCTYPEhtml
  2. PUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="zh-CN"lang="zh-CN">
  5. <head>
  6. <title>jqGrid03</title>
  7. <linkrel="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. <linkrel="stylesheet"type="text/css"media="screen"href="../css/themes/aero/ui.jqgrid.custom.css"mce_href="css/themes/aero/ui.jqgrid.custom.css"/>
  9. <linkhref="../css/genericFormTable.css"mce_href="css/genericFormTable.css"rel="stylesheet"type="text/css"/>
  11. <mce:scripttype="text/javascript"src="../js/jquery-1.4.2.min.js"mce_src="js/jquery-1.4.2.min.js"></mce:script>
  12. <mce:scriptsrc="../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:scriptsrc="../js/i18n/grid.locale-zh-CN.js"mce_src="js/i18n/grid.locale-zh-CN.js"type="text/javascript"></mce:script>
  14. <mce:scriptsrc="../js/jquery.jqGrid.min.js"mce_src="js/jquery.jqGrid.min.js"type="text/javascript"></mce:script>
  16. <mce:scriptsrc="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. <tableid="gridTable"></table>
  24. <divid="gridPager"></div>
  25. </div>
  27. <br/>
  29. <div>
  30. <buttononclick="openDialog4Adding()">添加联系人</button>
  31. <buttononclick="openDialog4Updating()">修改联系人</button>
  32. <buttononclick="openDialog4Deleting()">删除联系人</button>
  33. </div>
  35. <divid="consoleDlg">
  36. <divid="formContainer">
  37. <formid="consoleForm">
  38. <inputtype="hidden"id="selectId"/>
  39. <tableclass="formTable">
  40. <tr>
  41. <th>姓：</th>
  42. <td>
  43. <inputtype="text"class="textField"id="lastName"name="lastName"/>
  44. </td>
  45. </tr>
  46. <tr>
  47. <th>名：</th>
  48. <td>
  49. <inputtype="text"class="textField"id="firstName"name="firstName"/>
  50. </td>
  51. </tr>
  52. <tr>
  53. <th>国籍：</th>
  54. <td>
  55. <inputtype="text"class="textField"id="nationality"name="nationality"/>
  56. </td>
  57. </tr>
  58. <tr>
  59. <th>身份证号：</th>
  60. <td>
  61. <inputtype="text"class="textField"id="idCardNo"name="idCardNo"/>
  62. </td>
  63. </tr>
  64. <tr>
  65. <th>电子邮箱：</th>
  66. <td>
  67. <inputtype="text"class="textField"id="email"name="email"/>
  68. </td>
  69. </tr>
  70. <tr>
  71. <th>电话：</th>
  72. <td>
  73. <inputtype="text"class="textField"id="telNo"name="telNo"/>
  74. </td>
  75. </tr>
  76. <tr>
  77. <th>地址：</th>
  78. <td>
  79. <inputtype="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 plaincopyprint?
  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. });
  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. varopenDialog4Adding=function(){
  46. varconsoleDlg=$("#consoleDlg");
  47. vardialogButtonPanel=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. varopenDialog4Updating=function(){
  54. varconsoleDlg=$("#consoleDlg");
  55. vardialogButtonPanel=consoleDlg.siblings(".ui-dialog-buttonpane");
  57. consoleDlg.find("input").removeAttr("disabled");
  58. dialogButtonPanel.find("button:not(:contains('取消'))").hide();
  59. dialogButtonPanel.find("button:contains('保存')").show();
  60. consoleDlg.dialog("option","title","修改联系人信息");
  62. loadSelectedRowData();
  63. }
  64. varopenDialog4Deleting=function(){
  65. varconsoleDlg=$("#consoleDlg");
  66. vardialogButtonPanel=consoleDlg.siblings(".ui-dialog-buttonpane");
  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","删除联系人");
  73. loadSelectedRowData();
  74. }
  75. varloadSelectedRowData=function(){
  76. varselectedRowId=$("#gridTable").jqGrid("getGridParam","selrow");
  77. if(!selectedRowId){
  78. alert("请先选择需要编辑的行!");
  79. returnfalse;
  80. }else{
  81. varparams={
  82. "contact.id":selectedRowId
  83. };
  84. varactionUrl="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. varrowData=data.contact;
  97. varconsoleDlg=$("#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);
  108. //根据新载入的数据将表格中的对应数据行一并更新一下
  109. vardataRow={
  110. id:rowData.id,
  111. lastName:rowData.lastName,
  112. firstName:rowData.firstName,
  113. email:rowData.email,
  114. telNo:rowData.telNo
  115. };
  117. $("#gridTable").jqGrid("setRowData",data.contact.id,dataRow);
  119. //打开对话框
  120. consoleDlg.dialog("open");
  121. }
  122. });
  124. }
  125. };
  126. varaddContact=function(){
  127. varconsoleDlg=$("#consoleDlg");
  129. varpLastName=$.trim(consoleDlg.find("#lastName").val());
  130. varpFirstName=$.trim(consoleDlg.find("#firstName").val());
  131. varpEmail=$.trim(consoleDlg.find("#email").val());
  132. varpTelNo=$.trim(consoleDlg.find("#telNo").val());
  133. varpAddress=$.trim(consoleDlg.find("#address").val());
  134. varpIdCardNo=$.trim(consoleDlg.find("#idCardNo").val());
  135. varpNationality=$.trim(consoleDlg.find("#nationality").val());
  137. varparams={
  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. };
  147. varactionUrl="createContact.action"
  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. vardataRow={
  160. id:data.contact.id,//从Server端得到系统分配的id
  161. lastName:pLastName,
  162. firstName:pFirstName,
  163. email:pEmail,
  164. telNo:pTelNo
  165. };
  167. varsrcrowid=$("#gridTable").jqGrid("getGridParam","selrow");
  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");
  176. alert("联系人添加操作成功!");
  178. }else{
  179. alert("添加操作失败!");
  180. }
  181. }
  182. });
  183. };
  184. varupdateContact=function(){
  185. varconsoleDlg=$("#consoleDlg");
  187. varpId=$.trim(consoleDlg.find("#selectId").val());
  188. varpLastName=$.trim(consoleDlg.find("#lastName").val());
  189. varpFirstName=$.trim(consoleDlg.find("#firstName").val());
  190. varpEmail=$.trim(consoleDlg.find("#email").val());
  191. varpTelNo=$.trim(consoleDlg.find("#telNo").val());
  192. varpAddress=$.trim(consoleDlg.find("#address").val());
  193. varpIdCardNo=$.trim(consoleDlg.find("#idCardNo").val());
  194. varpNationality=$.trim(consoleDlg.find("#nationality").val());
  195. varparams={
  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. varactionUrl="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. vardataRow={
  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"});
  225. alert("联系人信息更新成功!");
  227. consoleDlg.dialog("close");
  229. }else{
  230. alert("修改操作失败!");
  231. }
  232. }
  233. });
  234. };
  235. vardeleteContact=function(){
  236. varconsoleDlg=$("#consoleDlg");
  238. varpId=$.trim(consoleDlg.find("#selectId").val());
  239. varparams={
  240. "contact.id":pId
  241. };
  242. varactionUrl="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);
  255. consoleDlg.dialog("close");
  256. alert("联系人删除成功!");
  257. }else{
  258. alert("删除操作失败!");
  259. }
  260. }
  261. });
  262. };

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

2. 初始化对话框：

[javascript] view plaincopyprint?
  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 plaincopyprint?
  1. varopenDialog4Adding=function(){
  2. varconsoleDlg=$("#consoleDlg");
  3. vardialogButtonPanel=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 plaincopyprint?
  1. varaddContact=function(){
  2. varconsoleDlg=$("#consoleDlg");
  4. //(1)
  5. varpLastName=$.trim(consoleDlg.find("#lastName").val());
  6. varpFirstName=$.trim(consoleDlg.find("#firstName").val());
  7. varpEmail=$.trim(consoleDlg.find("#email").val());
  8. varpTelNo=$.trim(consoleDlg.find("#telNo").val());
  9. varpAddress=$.trim(consoleDlg.find("#address").val());
  10. varpIdCardNo=$.trim(consoleDlg.find("#idCardNo").val());
  11. varpNationality=$.trim(consoleDlg.find("#nationality").val());
  13. varparams={
  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. };
  23. varactionUrl="createContact.action"
  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. vardataRow={
  36. id:data.contact.id,//(5)从Server端得到系统分配的id
  37. lastName:pLastName,
  38. firstName:pFirstName,
  39. email:pEmail,
  40. telNo:pTelNo
  41. };
  43. varsrcrowid=$("#gridTable").jqGrid("getGridParam","selrow");//(6)
  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");
  52. alert("联系人添加操作成功!");
  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 plaincopyprint?
  1. varloadSelectedRowData=function(){
  2. varselectedRowId=$("#gridTable").jqGrid("getGridParam","selrow");
  3. if(!selectedRowId){//(1)
  4. alert("请先选择需要编辑的行!");
  5. returnfalse;
  6. }else{
  7. varparams={
  8. "contact.id":selectedRowId
  9. };
  10. varactionUrl="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. varrowData=data.contact;
  23. varconsoleDlg=$("#consoleDlg");
  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);
  36. //(3)根据新载入的数据将表格中的对应数据行一并更新一下
  37. vardataRow={
  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);
  46. consoleDlg.dialog("open");//(4)
  47. }
  48. });
  50. }
  51. };

说明：

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

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

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

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

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

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

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

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

7. 执行修改操作：

[javascript] view plaincopyprint?
  1. varupdateContact=function(){
  2. varconsoleDlg=$("#consoleDlg");
  4. varpId=$.trim(consoleDlg.find("#selectId").val());
  5. varpLastName=$.trim(consoleDlg.find("#lastName").val());
  6. varpFirstName=$.trim(consoleDlg.find("#firstName").val());
  7. varpEmail=$.trim(consoleDlg.find("#email").val());
  8. varpTelNo=$.trim(consoleDlg.find("#telNo").val());
  9. varpAddress=$.trim(consoleDlg.find("#address").val());
  10. varpIdCardNo=$.trim(consoleDlg.find("#idCardNo").val());
  11. varpNationality=$.trim(consoleDlg.find("#nationality").val());
  12. varparams={
  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. varactionUrl="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. vardataRow={
  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)
  42. alert("联系人信息更新成功!");
  44. consoleDlg.dialog("close");
  46. }else{
  47. alert("修改操作失败!");
  48. }
  49. }
  50. });
  51. };

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

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

[javascript] view plaincopyprint?
  1. varopenDialog4Deleting=function(){
  2. varconsoleDlg=$("#consoleDlg");
  3. vardialogButtonPanel=consoleDlg.siblings(".ui-dialog-buttonpane");
  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","删除联系人");
  10. loadSelectedRowData();
  11. }

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

9. 执行删除操作：

[javascript] view plaincopyprint?
  1. vardeleteContact=function(){
  2. varconsoleDlg=$("#consoleDlg");
  4. varpId=$.trim(consoleDlg.find("#selectId").val());
  5. varparams={
  6. "contact.id":pId
  7. };
  8. varactionUrl="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);
  21. consoleDlg.dialog("close");
  22. alert("联系人删除成功!");
  23. }else{
  24. alert("删除操作失败!");
  25. }
  26. }
  27. });
  28. };




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


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

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

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

[java] view plaincopyprint?
  1. packagecn.gengv.struts2ex.jqGrid;
  2. importjava.util.List;
  3. importcom.byzl.hare.model.Contact;
  4. importcom.byzl.hare.model.PatentCase;
  5. importcom.byzl.hare.service.ContactService;
  6. importcom.opensymphony.xwork2.ActionSupport;
  7. @SuppressWarnings("serial")
  8. publicclassViewContactActionextendsActionSupport{
  9. privateContactcontact;
  10. privateList<PatentCase>patentCases;
  12. privateContactServicecontactService;
  14. privateStringajaxResult;
  16. publicStringviewContact(){
  18. intid=contact.getId();
  20. contact=contactService.queryById(contact.getId());
  22. if(contact==null){
  23. ajaxResult="未能找到ID为"+id+"的联系人";
  24. returnERROR;
  25. }
  27. ajaxResult=SUCCESS;
  28. returnSUCCESS;
  29. }
  31. publicContactgetContact(){
  32. returncontact;
  33. }
  34. publicvoidsetContact(Contactcontact){
  35. this.contact=contact;
  36. }
  37. publicStringgetAjaxResult(){
  38. returnajaxResult;
  39. }
  40. publicvoidsetAjaxResult(StringajaxResult){
  41. this.ajaxResult=ajaxResult;
  42. }
  43. publicvoidsetContactService(ContactServicecontactService){
  44. this.contactService=contactService;
  45. }
  46. publicList<PatentCase>getPatentCases(){
  47. returnpatentCases;
  48. }
  49. publicvoidsetPatentCases(List<PatentCase>patentCases){
  50. this.patentCases=patentCases;
  51. }
  52. }

[java] view plaincopyprint?
  1. packagecn.gengv.struts2ex.jqGrid;
  2. importcom.byzl.hare.model.Contact;
  3. importcom.byzl.hare.service.ContactService;
  4. importcom.opensymphony.xwork2.ActionSupport;
  5. @SuppressWarnings("serial")
  6. publicclassContactConsoleActionextendsActionSupport{
  7. privateContactServicecontactService;
  8. privateContactcontact;
  10. privateStringajaxResult;
  12. //创建新的Contact
  13. publicStringcreateContact(){
  14. try{
  15. contact.setId(this.contactService.addNew(contact));
  17. ajaxResult=SUCCESS;
  18. returnSUCCESS;
  19. }catch(Exceptione){
  20. e.printStackTrace();
  21. this.addActionError(e.getMessage());
  22. ajaxResult="创建新联系人失败!"+e.getMessage();
  23. returnERROR;
  24. }
  26. }
  28. //更新Contact信息
  29. publicStringupdateContact(){
  30. try{
  31. this.contactService.update(contact);
  32. }catch(Exceptione){
  33. e.printStackTrace();
  34. this.addActionError(e.getMessage());
  35. ajaxResult="更新联系人信息失败!"+e.getMessage();
  36. returnERROR;
  37. }
  38. ajaxResult=SUCCESS;
  39. returnSUCCESS;
  40. }
  41. //删除Contact
  42. publicStringdeleteContact(){
  43. try{
  44. this.contactService.delete(contact);
  45. }catch(Exceptione){
  46. e.printStackTrace();
  47. this.addActionError(e.getMessage());
  48. ajaxResult="删除联系人失败!"+e.getMessage();
  49. returnERROR;
  50. }
  51. ajaxResult=SUCCESS;
  52. returnSUCCESS;
  53. }
  54. publicContactgetContact(){
  55. returncontact;
  56. }
  57. publicvoidsetContact(Contactcontact){
  58. this.contact=contact;
  59. }
  60. publicStringgetAjaxResult(){
  61. returnajaxResult;
  62. }
  63. publicvoidsetAjaxResult(StringajaxResult){
  64. this.ajaxResult=ajaxResult;
  65. }
  66. publicvoidsetContactService(ContactServicecontactService){
  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 plaincopyprint?
  1. <actionname="viewContact"
  2. class="cn.gengv.struts2ex.jqGrid.ViewContactAction"method="viewContact">
  3. <resultname="success"type="json">
  4. <paramname="includeProperties">
  5. contact.*,ajaxResult
  6. </param>
  7. <paramname="noCache">true</param>
  8. <paramname="ignoreHierarchy">false</param>
  9. <paramname="excludeNullProperties">true</param>
  10. </result>
  11. </action>
  13. <actionname="createContact"
  14. class="cn.gengv.struts2ex.jqGrid.ContactConsoleAction"method="createContact">
  15. <resultname="success"type="json">
  16. <paramname="includeProperties">
  17. contact/.id,ajaxResult
  18. </param>
  19. <paramname="noCache">true</param>
  20. <paramname="ignoreHierarchy">false</param>
  21. </result>
  22. </action>
  24. <actionname="updateContact"
  25. class="cn.gengv.struts2ex.jqGrid.ContactConsoleAction"method="updateContact">
  26. <resultname="success"type="json">
  27. <paramname="includeProperties">
  28. contact/.id,ajaxResult
  29. </param>
  30. <paramname="noCache">true</param>
  31. <paramname="ignoreHierarchy">false</param>
  32. </result>
  33. </action>
  35. <actionname="deleteContact"
  36. class="cn.gengv.struts2ex.jqGrid.ContactConsoleAction"method="deleteContact">
  37. <resultname="success"type="json">
  38. <paramname="includeProperties">
  39. contact/.id,ajaxResult
  40. </param>
  41. <paramname="noCache">true</param>
  42. <paramname="ignoreHierarchy">false</param>
  43. </result>
  44. </action>

说明：

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

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

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

首先看一下html的完整代码：

[xhtml] view plaincopyprint?
  1. <!DOCTYPEhtml
  2. PUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="zh-CN"lang="zh-CN">
  5. <head>
  6. <title>jqGrid03</title>
  7. <linkrel="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. <linkrel="stylesheet"type="text/css"media="screen"href="../css/themes/aero/ui.jqgrid.custom.css"mce_href="css/themes/aero/ui.jqgrid.custom.css"/>
  9. <linkhref="../css/genericFormTable.css"mce_href="css/genericFormTable.css"rel="stylesheet"type="text/css"/>
  11. <mce:scripttype="text/javascript"src="../js/jquery-1.4.2.min.js"mce_src="js/jquery-1.4.2.min.js"></mce:script>
  12. <mce:scriptsrc="../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:scriptsrc="../js/i18n/grid.locale-zh-CN.js"mce_src="js/i18n/grid.locale-zh-CN.js"type="text/javascript"></mce:script>
  14. <mce:scriptsrc="../js/jquery.jqGrid.min.js"mce_src="js/jquery.jqGrid.min.js"type="text/javascript"></mce:script>
  16. <mce:scriptsrc="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. <tableid="gridTable"></table>
  24. <divid="gridPager"></div>
  25. </div>
  27. <br/>
  29. <div>
  30. <buttononclick="openDialog4Adding()">添加联系人</button>
  31. <buttononclick="openDialog4Updating()">修改联系人</button>
  32. <buttononclick="openDialog4Deleting()">删除联系人</button>
  33. </div>
  35. <divid="consoleDlg">
  36. <divid="formContainer">
  37. <formid="consoleForm">
  38. <inputtype="hidden"id="selectId"/>
  39. <tableclass="formTable">
  40. <tr>
  41. <th>姓：</th>
  42. <td>
  43. <inputtype="text"class="textField"id="lastName"name="lastName"/>
  44. </td>
  45. </tr>
  46. <tr>
  47. <th>名：</th>
  48. <td>
  49. <inputtype="text"class="textField"id="firstName"name="firstName"/>
  50. </td>
  51. </tr>
  52. <tr>
  53. <th>国籍：</th>
  54. <td>
  55. <inputtype="text"class="textField"id="nationality"name="nationality"/>
  56. </td>
  57. </tr>
  58. <tr>
  59. <th>身份证号：</th>
  60. <td>
  61. <inputtype="text"class="textField"id="idCardNo"name="idCardNo"/>
  62. </td>
  63. </tr>
  64. <tr>
  65. <th>电子邮箱：</th>
  66. <td>
  67. <inputtype="text"class="textField"id="email"name="email"/>
  68. </td>
  69. </tr>
  70. <tr>
  71. <th>电话：</th>
  72. <td>
  73. <inputtype="text"class="textField"id="telNo"name="telNo"/>
  74. </td>
  75. </tr>
  76. <tr>
  77. <th>地址：</th>
  78. <td>
  79. <inputtype="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 plaincopyprint?
  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. });
  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. varopenDialog4Adding=function(){
  46. varconsoleDlg=$("#consoleDlg");
  47. vardialogButtonPanel=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. varopenDialog4Updating=function(){
  54. varconsoleDlg=$("#consoleDlg");
  55. vardialogButtonPanel=consoleDlg.siblings(".ui-dialog-buttonpane");
  57. consoleDlg.find("input").removeAttr("disabled");
  58. dialogButtonPanel.find("button:not(:contains('取消'))").hide();
  59. dialogButtonPanel.find("button:contains('保存')").show();
  60. consoleDlg.dialog("option","title","修改联系人信息");
  62. loadSelectedRowData();
  63. }
  64. varopenDialog4Deleting=function(){
  65. varconsoleDlg=$("#consoleDlg");
  66. vardialogButtonPanel=consoleDlg.siblings(".ui-dialog-buttonpane");
  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","删除联系人");
  73. loadSelectedRowData();
  74. }
  75. varloadSelectedRowData=function(){
  76. varselectedRowId=$("#gridTable").jqGrid("getGridParam","selrow");
  77. if(!selectedRowId){
  78. alert("请先选择需要编辑的行!");
  79. returnfalse;
  80. }else{
  81. varparams={
  82. "contact.id":selectedRowId
  83. };
  84. varactionUrl="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. varrowData=data.contact;
  97. varconsoleDlg=$("#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);
  108. //根据新载入的数据将表格中的对应数据行一并更新一下
  109. vardataRow={
  110. id:rowData.id,
  111. lastName:rowData.lastName,
  112. firstName:rowData.firstName,
  113. email:rowData.email,
  114. telNo:rowData.telNo
  115. };
  117. $("#gridTable").jqGrid("setRowData",data.contact.id,dataRow);
  119. //打开对话框
  120. consoleDlg.dialog("open");
  121. }
  122. });
  124. }
  125. };
  126. varaddContact=function(){
  127. varconsoleDlg=$("#consoleDlg");
  129. varpLastName=$.trim(consoleDlg.find("#lastName").val());
  130. varpFirstName=$.trim(consoleDlg.find("#firstName").val());
  131. varpEmail=$.trim(consoleDlg.find("#email").val());
  132. varpTelNo=$.trim(consoleDlg.find("#telNo").val());
  133. varpAddress=$.trim(consoleDlg.find("#address").val());
  134. varpIdCardNo=$.trim(consoleDlg.find("#idCardNo").val());
  135. varpNationality=$.trim(consoleDlg.find("#nationality").val());
  137. varparams={
  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. };
  147. varactionUrl="createContact.action"
  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. vardataRow={
  160. id:data.contact.id,//从Server端得到系统分配的id
  161. lastName:pLastName,
  162. firstName:pFirstName,
  163. email:pEmail,
  164. telNo:pTelNo
  165. };
  167. varsrcrowid=$("#gridTable").jqGrid("getGridParam","selrow");
  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");
  176. alert("联系人添加操作成功!");
  178. }else{
  179. alert("添加操作失败!");
  180. }
  181. }
  182. });
  183. };
  184. varupdateContact=function(){
  185. varconsoleDlg=$("#consoleDlg");
  187. varpId=$.trim(consoleDlg.find("#selectId").val());
  188. varpLastName=$.trim(consoleDlg.find("#lastName").val());
  189. varpFirstName=$.trim(consoleDlg.find("#firstName").val());
  190. varpEmail=$.trim(consoleDlg.find("#email").val());
  191. varpTelNo=$.trim(consoleDlg.find("#telNo").val());
  192. varpAddress=$.trim(consoleDlg.find("#address").val());
  193. varpIdCardNo=$.trim(consoleDlg.find("#idCardNo").val());
  194. varpNationality=$.trim(consoleDlg.find("#nationality").val());
  195. varparams={
  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. varactionUrl="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. vardataRow={
  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"});
  225. alert("联系人信息更新成功!");
  227. consoleDlg.dialog("close");
  229. }else{
  230. alert("修改操作失败!");
  231. }
  232. }
  233. });
  234. };
  235. vardeleteContact=function(){
  236. varconsoleDlg=$("#consoleDlg");
  238. varpId=$.trim(consoleDlg.find("#selectId").val());
  239. varparams={
  240. "contact.id":pId
  241. };
  242. varactionUrl="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);
  255. consoleDlg.dialog("close");
  256. alert("联系人删除成功!");
  257. }else{
  258. alert("删除操作失败!");
  259. }
  260. }
  261. });
  262. };

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

2. 初始化对话框：

[javascript] view plaincopyprint?
  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 plaincopyprint?
  1. varopenDialog4Adding=function(){
  2. varconsoleDlg=$("#consoleDlg");
  3. vardialogButtonPanel=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 plaincopyprint?
  1. varaddContact=function(){
  2. varconsoleDlg=$("#consoleDlg");
  4. //(1)
  5. varpLastName=$.trim(consoleDlg.find("#lastName").val());
  6. varpFirstName=$.trim(consoleDlg.find("#firstName").val());
  7. varpEmail=$.trim(consoleDlg.find("#email").val());
  8. varpTelNo=$.trim(consoleDlg.find("#telNo").val());
  9. varpAddress=$.trim(consoleDlg.find("#address").val());
  10. varpIdCardNo=$.trim(consoleDlg.find("#idCardNo").val());
  11. varpNationality=$.trim(consoleDlg.find("#nationality").val());
  13. varparams={
  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. };
  23. varactionUrl="createContact.action"
  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. vardataRow={
  36. id:data.contact.id,//(5)从Server端得到系统分配的id
  37. lastName:pLastName,
  38. firstName:pFirstName,
  39. email:pEmail,
  40. telNo:pTelNo
  41. };
  43. varsrcrowid=$("#gridTable").jqGrid("getGridParam","selrow");//(6)
  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");
  52. alert("联系人添加操作成功!");
  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 plaincopyprint?
  1. varloadSelectedRowData=function(){
  2. varselectedRowId=$("#gridTable").jqGrid("getGridParam","selrow");
  3. if(!selectedRowId){//(1)
  4. alert("请先选择需要编辑的行!");
  5. returnfalse;
  6. }else{
  7. varparams={
  8. "contact.id":selectedRowId
  9. };
  10. varactionUrl="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. varrowData=data.contact;
  23. varconsoleDlg=$("#consoleDlg");
  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);
  36. //(3)根据新载入的数据将表格中的对应数据行一并更新一下
  37. vardataRow={
  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);
  46. consoleDlg.dialog("open");//(4)
  47. }
  48. });
  50. }
  51. };

说明：

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

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

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

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

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

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

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

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

7. 执行修改操作：

[javascript] view plaincopyprint?
  1. varupdateContact=function(){
  2. varconsoleDlg=$("#consoleDlg");
  4. varpId=$.trim(consoleDlg.find("#selectId").val());
  5. varpLastName=$.trim(consoleDlg.find("#lastName").val());
  6. varpFirstName=$.trim(consoleDlg.find("#firstName").val());
  7. varpEmail=$.trim(consoleDlg.find("#email").val());
  8. varpTelNo=$.trim(consoleDlg.find("#telNo").val());
  9. varpAddress=$.trim(consoleDlg.find("#address").val());
  10. varpIdCardNo=$.trim(consoleDlg.find("#idCardNo").val());
  11. varpNationality=$.trim(consoleDlg.find("#nationality").val());
  12. varparams={
  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. varactionUrl="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. vardataRow={
  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)
  42. alert("联系人信息更新成功!");
  44. consoleDlg.dialog("close");
  46. }else{
  47. alert("修改操作失败!");
  48. }
  49. }
  50. });
  51. };

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

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

[javascript] view plaincopyprint?
  1. varopenDialog4Deleting=function(){
  2. varconsoleDlg=$("#consoleDlg");
  3. vardialogButtonPanel=consoleDlg.siblings(".ui-dialog-buttonpane");
  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","删除联系人");
  10. loadSelectedRowData();
  11. }

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

9. 执行删除操作：

[javascript] view plaincopyprint?
  1. vardeleteContact=function(){
  2. varconsoleDlg=$("#consoleDlg");
  4. varpId=$.trim(consoleDlg.find("#selectId").val());
  5. varparams={
  6. "contact.id":pId
  7. };
  8. varactionUrl="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);
  21. consoleDlg.dialog("close");
  22. alert("联系人删除成功!");
  23. }else{
  24. alert("删除操作失败!");
  25. }
  26. }
  27. });
  28. };




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


分享到：
| jqGrid与Struts2的结合应用（二） —— ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics