用户管理界面.docx

1. 2. 3. 4. 5. 6. 7. jQueryEasyUICRUDDemo8. 9. 10. 11. 12. 13. 14. 15. BasicCRUDApplication16. 17.  18. Clickthebuttonsondatagridtoolbartodocrudactions.19. 20. 21. 25. 26. 27. FirstName28. LastName29. Phone30. Email31. 32. 33. 34. 35. NewUser36. EditUser37. RemoveUser38. 39. 40. 42. UserInformation43. 44. 45. FirstName:46. 47. 48. 49. LastName:50. 51. 52. 53. Phone:54. 55. 56. 57. Email:58. 59. 60. 61. 62. 63. Save64. Cancel65. 66. 67. varurl;68. functionnewUser()69. $(#dlg).dialog(open).dialog(setTitle,NewUser);70. $(#fm).form(clear);71. url=save_user.php;72. 73. functioneditUser()74. varrow=$(#dg).datagrid(getSelected);75. if(row)76. $(#dlg).dialog(open).dialog(setTitle,EditUser);77. $(#fm).form(load,row);78. url=update_user.php?id=+row.id;79. 80. 81. functionsaveUser()82. $(#fm).form(submit,83. url:url,84. onSubmit:function()85. return$(this).form(validate);86. ,87. success:function(result)88. varresult=eval(+result+);89. if(result.errorMsg)90. $.messager.show(91. title:Error,92. msg:result.errorMsg93. );94. else95. $(#dlg).dialog(close);/closethedialog96. $(#dg).datagrid(reload);/reloadtheuserdata97. 98. 99. );100. 101. functiondestroyUser()102. varrow=$(#dg).datagrid(getSelected);103. if(row)104. $.messager.confirm(Confirm,Areyousureyouwanttodestroythisuser?,function(r)105. if(r)106. $.post(destroy_user.php,id:row.id,function(result)107. if(result.success)108. $(#dg).datagrid(reload);/reloadtheuserdata109. else110. $.messager.show(/showerrormessage111. title:Error,112. msg:result.errorMsg113. );114. 115. ,json);116. 117. );118. 119. 120. 121. 122. #fm123. margin:0;124. padding:10px30px;125. 126. .ftitle127. font-size:14px;128. font-weight:bold;129. padding:5px0;130. margin-bottom:10px;131. border-bottom:1pxsolid#ccc;132. 133. .fitem134. margin-bottom:5px;135. 136. .fitemlabel137. display:inline-block;138. width:80px;139. 140. 141. 142. 日历文件1. 2. 3. 4. 5. BasicDateBox-jQueryEasyUIDemo6. 7. 8. 9. 10. 11. 12. 13. BasicDateBox14. 15. 16. Clickthecalendarimageontherightside.17. 18. 19. 20. 21. task manage Task manage Show summary information on TreeGrid footer. $(function() $(#tg).treegrid( title:TreeGrid with Footer, iconCls:icon-ok, width:700, height:250, rownumbers: true, animate:true, collapsible:true, fitColumns:true, url:./treegrid/treegrid_data2.json, idField:id, treeField:name, showFooter:true, columns: title:Task Name,field:name,width:180, field:persons,title:Persons,width:60,align:right, field:begin,title:Begin Date,width:80, field:end,title:End Date,width:80, field:progress,title:Progress,width:120, formatter:function(value) if (value) var s = + + value + % + ; return s; else return ; ); ) 下拉菜单1. 2. 3. 4. 5. BasicComboTree-jQueryEasyUIDemo6. 7. 8. 9. 10. 11. 12. 13. BasicComboTree14. 15. 16. Clicktherightarrowbuttontoshowthetreepanel.17. 18. 19. 20. 21. 22. 用户或者任务信息添加：1. 2. 3. 4. 5. 6. 7. AjaxForm-jQueryEasyUIDemo8. 9. 10. 11. 12. 13. 14. 15. AjaxFormDemo16. 17.  18. Typeininputboxandsubmittheform.19. 20. 21. 22. 23. 24. 25. Name:26. 27. 28. 29. Email:30. 31. 32. 33. Phone:34.