`

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的结合应用（二） —— ...
评论
发表评论

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

相关推荐

    jqGrid与Struts2的结合应用

    5. **自定义对话框**：在描述中提到的"使用自定义表单对话框编辑Grid数据"，指的是使用jQuery UI或其他工具创建一个弹出窗口，展示一个表单供用户编辑选定行的数据。在提交表单时，jqGrid会通过AJAX调用Struts2 ...

    jqgrid+struts2

    **三、jqGrid与Struts2结合应用** jqGrid与Struts2的结合使用可以实现数据的后台动态加载和前端的交互操作。具体步骤如下： 1. **配置Struts2 Action**：创建一个Action类，负责处理请求并返回数据。例如，可以创建...

    Delphi 12.3控件之TraeSetup-stable-1.0.12120.exe

    Delphi 12.3控件之TraeSetup-stable-1.0.12120.exe

    基于GPRS，GPS的电动汽车远程监控系统的设计与实现.pdf

    基于GPRS，GPS的电动汽车远程监控系统的设计与实现.pdf

    基于MATLAB/Simulink 2018a的单机无穷大系统暂态稳定性仿真与故障分析

    内容概要：本文详细介绍了如何利用MATLAB/Simulink 2018a进行单机无穷大系统的暂态稳定性仿真。主要内容包括搭建同步发电机模型、设置无穷大系统等效电源、配置故障模块及其控制信号、优化求解器设置以及绘制和分析转速波形和摇摆曲线。文中还提供了多个实用脚本，如故障类型切换、摇摆曲线计算和极限切除角的求解方法。此外，作者分享了一些实践经验，如避免常见错误和提高仿真效率的小技巧。 适合人群：从事电力系统研究和仿真的工程师和技术人员，尤其是对MATLAB/Simulink有一定基础的用户。 使用场景及目标：适用于需要进行电力系统暂态稳定性分析的研究项目或工程应用。主要目标是帮助用户掌握单机无穷大系统的建模和仿真方法，理解故障对系统稳定性的影响，并能够通过仿真结果评估系统的性能。 其他说明：文中提到的一些具体操作和脚本代码对于初学者来说可能会有一定的难度，建议结合官方文档或其他教程一起学习。同时，部分技巧和经验来自于作者的实际操作，具有一定的实用性。

    【KUKA 机器人资料】：KUKA机器人剑指未来——访库卡自动化设备(上海)有限公司销售部经理邹涛.pdf

    KUKA机器人相关资料

    基于DLR模型的PM10–能见度–湿度相关性 研究.pdf

    基于DLR模型的PM10–能见度–湿度相关性 研究.pdf

    MATLAB/Simulink中基于电导增量法的光伏并网系统MPPT仿真及其环境适应性分析

    内容概要：本文详细介绍了如何使用MATLAB/Simulink进行光伏并网系统的最大功率点跟踪(MPPT)仿真，重点讨论了电导增量法的应用。首先阐述了电导增量法的基本原理，接着展示了如何在Simulink中构建光伏电池模型和MPPT控制系统，包括Boost升压电路的设计和PI控制参数的设定。随后，通过仿真分析了不同光照强度和温度条件对光伏系统性能的影响，验证了电导增量法的有效性，并提出了针对特定工况的优化措施。 适合人群：从事光伏系统研究和技术开发的专业人士，尤其是那些希望通过仿真工具深入理解MPPT控制机制的人群。 使用场景及目标：适用于需要评估和优化光伏并网系统性能的研发项目，旨在提高系统在各种环境条件下的最大功率点跟踪效率。 其他说明：文中提供了详细的代码片段和仿真结果图表，帮助读者更好地理解和复现实验过程。此外，还提到了一些常见的仿真陷阱及解决方案，如变步长求解器的问题和PI参数整定技巧。

    【KUKA 机器人坐标的建立】：mo2_base_en.ppt

    KUKA机器人相关文档

    风力发电领域双馈风力发电机（DFIG）Simulink模型的构建与电流电压波形分析

    内容概要：本文详细探讨了双馈风力发电机（DFIG）在Simulink环境下的建模方法及其在不同风速条件下的电流与电压波形特征。首先介绍了DFIG的基本原理，即定子直接接入电网，转子通过双向变流器连接电网的特点。接着阐述了Simulink模型的具体搭建步骤，包括风力机模型、传动系统模型、DFIG本体模型和变流器模型的建立。文中强调了变流器控制算法的重要性，特别是在应对风速变化时，通过实时调整转子侧的电压和电流，确保电流和电压波形的良好特性。此外，文章还讨论了模型中的关键技术和挑战，如转子电流环控制策略、低电压穿越性能、直流母线电压脉动等问题，并提供了具体的解决方案和技术细节。最终，通过对故障工况的仿真测试，验证了所建模型的有效性和优越性。 适用人群：从事风力发电研究的技术人员、高校相关专业师生、对电力电子控制系统感兴趣的工程技术人员。 使用场景及目标：适用于希望深入了解DFIG工作原理、掌握Simulink建模技能的研究人员；旨在帮助读者理解DFIG在不同风速条件下的动态响应机制，为优化风力发电系统的控制策略提供理论依据和技术支持。 其他说明：文章不仅提供了详细的理论解释，还附有大量Matlab/Simulink代码片段，便于读者进行实践操作。同时，针对一些常见问题给出了实用的调试技巧，有助于提高仿真的准确性和可靠性。

    linux之用户管理教程.md

    linux之用户管理教程.md

    三菱PLC与组态王构建3x3书架式堆垛立体库：IO分配、梯形图编程及组态画面设计

    内容概要：本文详细介绍了利用三菱PLC（特别是FX系列）和组态王软件构建3x3书架式堆垛式立体库的方法。首先阐述了IO分配的原则，明确了输入输出信号的功能，如仓位检测、堆垛机运动控制等。接着深入解析了梯形图编程的具体实现，包括基本的左右移动控制、复杂的自动寻址逻辑，以及确保安全性的限位保护措施。还展示了接线图和原理图的作用，强调了正确的电气连接方式。最后讲解了组态王的画面设计技巧，通过图形化界面实现对立体库的操作和监控。 适用人群：从事自动化仓储系统设计、安装、调试的技术人员，尤其是熟悉三菱PLC和组态王的工程师。 使用场景及目标：适用于需要提高仓库空间利用率的小型仓储环境，旨在帮助技术人员掌握从硬件选型、电路设计到软件编程的全流程技能，最终实现高效稳定的自动化仓储管理。 其他说明：文中提供了多个实用的编程技巧和注意事项，如避免常见错误、优化性能参数等，有助于减少实际应用中的故障率并提升系统的可靠性。

    基于STM32的循迹避障小车仿真20250426（带讲解视频）

    基于STM32的循迹避障小车 主控：STM32 显示：OLED 电源模块 舵机云台 超声波测距 红外循迹模块（3个，左中右） 蓝牙模块 按键（6个，模式和手动控制小车状态） TB6612驱动的双电机 功能： 该小车共有3种模式： 自动模式：根据红外循迹和超声波测距模块决定小车的状态 手动模式：根据按键的状态来决定小车的状态 蓝牙模式：根据蓝牙指令来决定小车的状态 自动模式： 自动模式下，检测距离低于5cm小车后退 未检测到任何黑线，小车停止 检测到左边或左边+中间黑线，小车左转 检测到右边或右边+中间黑线，小车右转 检测到中边或左边+中间+右边黑线，小车前进 手动模式：根据按键的状态来决定小车的状态 蓝牙模式： //需切换为蓝牙模式才能指令控制 *StatusX X取值为0-4 0：小车停止 1：小车前进 2：小车后退 3：小车左转 4：小车右转

    海西蒙古族藏族自治州乡镇边界，矢量边界，shp格式

    矢量边界，行政区域边界，精确到乡镇街道，可直接导入arcgis使用

    基于IEEE33节点的主动配电网优化：含风光储柴燃多源调度模型的经济运行研究

    内容概要：本文探讨了基于IEEE33节点的主动配电网优化方法，旨在通过合理的调度模型降低配电网的总运行成本。文中详细介绍了模型的构建，包括风光发电、储能装置、柴油发电机和燃气轮机等多种分布式电源的集成。为了实现这一目标，作者提出了具体的约束条件，如储能充放电功率限制和潮流约束，并采用了粒子群算法进行求解。通过一系列实验验证，最终得到了优化的分布式电源运行计划，显著降低了总成本并提高了系统的稳定性。 适合人群：从事电力系统优化、智能电网研究的专业人士和技术爱好者。 使用场景及目标：适用于需要优化配电网运行成本的研究机构和企业。主要目标是在满足各种约束条件下，通过合理的调度策略使配电网更加经济高效地运行。 其他说明：文章不仅提供了详细的理论推导和算法实现，还分享了许多实用的经验技巧，如储能充放电策略、粒子群算法参数选择等。此外，通过具体案例展示了不同电源之间的协同作用及其经济效益。

    【KUKA 机器人资料】：KUKA 机器人初级培训教材.pdf

    KUKA机器人相关文档

    基于MATLAB的CSP电站与ORC综合能源系统优化建模及应用

    内容概要：本文详细介绍了将光热电站(CSP)和有机朗肯循环(ORC)集成到综合能源系统中的优化建模方法。主要内容涵盖系统的目标函数设计、关键设备的约束条件（如CSP储热罐、ORC热电耦合）、以及具体实现的技术细节。文中通过MATLAB和YALMIP工具进行建模，采用CPLEX求解器解决混合整数规划问题，确保系统在经济性和环境效益方面的最优表现。此外，文章还讨论了碳排放惩罚机制、风光弃能处理等实际应用场景中的挑战及其解决方案。 适合人群：从事综合能源系统研究的专业人士，尤其是对光热发电、余热利用感兴趣的科研工作者和技术开发者。 使用场景及目标：适用于需要评估和优化包含多种能源形式（如光伏、风电、燃气锅炉等）在内的复杂能源系统的项目。目标是在满足供电供热需求的同时，最小化运行成本并减少碳排放。 其他说明：文中提供了大量具体的MATLAB代码片段作为实例，帮助读者更好地理解和复现所提出的优化模型。对于初学者而言，建议从简单的确定性模型入手，逐渐过渡到更复杂的随机规划和鲁棒优化。

    网站设计与管理作业一.ppt

    网站设计与管理作业一.ppt

    基于MATLAB的双闭环Buck电路仿真模型设计与优化

    内容概要：本文详细介绍了如何使用MATLAB搭建双闭环Buck电路的仿真模型。首先定义了主电路的关键参数，如输入电压、电感、电容等，并解释了这些参数的选择依据。接着分别对电压外环和电流内环进行了PI控制器的设计，强调了电流环响应速度需要显著高于电压环以确保系统的稳定性。文中还讨论了仿真过程中的一些关键技术细节，如PWM死区时间的设置、低通滤波器的应用以及参数调整的方法。通过对比单闭环和双闭环系统的性能，展示了双闭环方案在应对负载突变时的优势。最后分享了一些调试经验和常见问题的解决方案。 适合人群：从事电力电子、电源设计领域的工程师和技术人员，尤其是有一定MATLAB基础的读者。 使用场景及目标：适用于需要进行电源管理芯片设计验证、电源系统性能评估的研究人员和工程师。主要目标是提高电源系统的稳定性和响应速度，特别是在负载变化剧烈的情况下。 其他说明：文章不仅提供了详细的理论分析，还包括了大量的代码片段和具体的调试步骤，帮助读者更好地理解和应用所学知识。同时提醒读者注意仿真与实际情况之间的差异，鼓励在实践中不断探索和改进。

    MATLAB实现冷热电气多能互补微能源网的鲁棒优化调度模型

    内容概要：本文详细探讨了MATLAB环境下冷热电气多能互补微能源网的鲁棒优化调度模型。首先介绍了多能耦合元件（如风电、光伏、P2G、燃气轮机等）的运行特性模型，展示了如何通过MATLAB代码模拟这些元件的实际运行情况。接着阐述了电、热、冷、气四者的稳态能流模型及其相互关系，特别是热电联产过程中能流的转换和流动。然后重点讨论了考虑经济成本和碳排放最优的优化调度模型，利用MATLAB优化工具箱求解多目标优化问题，确保各能源设备在合理范围内运行并保持能流平衡。最后分享了一些实际应用中的经验和技巧，如处理风光出力预测误差、非线性约束、多能流耦合等。 适合人群：从事能源系统研究、优化调度、MATLAB编程的专业人士和技术爱好者。 使用场景及目标：适用于希望深入了解综合能源系统优化调度的研究人员和工程师。目标是掌握如何在MATLAB中构建和求解复杂的多能互补优化调度模型，提高能源利用效率，降低碳排放。 其他说明：文中提供了大量MATLAB代码片段，帮助读者更好地理解和实践所介绍的内容。此外，还提及了一些有趣的发现和挑战，如多能流耦合的复杂性、鲁棒优化的应用等。

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