[转载]jquery-easyui编写用户管理小例子

[转载]jquery-easyui编写用户管理小例子 – AJAX – web – ITeye论坛.

利用easyui编写一个用户管理小例子,目的是演示CRUD操作。先看一下效果图:

1、表格的定义:

Html代码  收藏代码
  1. <table id=“user-table”>
  2. <thead>
  3. <tr>
  4. <th field=“name” width=“100”>名称</th>
  5. <th field=“phone” width=“100”>电话</th>
  6. <th field=“addr” width=“100”>地址</th>
  7. <th field=“duty” width=“100”>职务</th>
  8. </tr>
  9. </thead>
  10. </table>

利用表格的THEAD来定义列,field属性对应用户数据模型的字段名称。

接着用JQuery创建表格,同时创建一个操作工具栏:

Js代码  收藏代码
  1. grid = $(‘#user-table’).datagrid({
  2. url:‘/demo1/user/getUsers’,
  3. title:‘用户资料’,
  4. width:600,
  5. height:300,
  6. singleSelect:true,
  7. toolbar:[{
  8. text:‘新增’,
  9. iconCls:‘icon-add’,
  10. handler:newUser
  11. },‘-‘,{
  12. text:‘修改’,
  13. iconCls:‘icon-edit’,
  14. handler:editUser
  15. },‘-‘,{
  16. text:‘删除’,
  17. iconCls:‘icon-remove’
  18. }]
  19. });

2、定义用户信息窗口和表单

Html代码  收藏代码
  1. <div id=“user-window” title=“用户窗口” style=“width:400px;height:250px;”>
  2. <div style=“padding:20px 20px 40px 80px;”>
  3. <form method=“post”>
  4. <table>
  5. <tr>
  6. <td>名称:</td>
  7. <td><input name=“name”></input></td>
  8. </tr>
  9. <tr>
  10. <td>电话:</td>
  11. <td><input name=“phone”></input></td>
  12. </tr>
  13. <tr>
  14. <td>地址:</td>
  15. <td><input name=“addr”></input></td>
  16. </tr>
  17. <tr>
  18. <td>职务:</td>
  19. <td><input name=“duty”></input></td>
  20. </tr>
  21. </table>
  22. </form>
  23. </div>
  24. <div style=“text-align:center;padding:5px;”>
  25. <a href=JavaScript:void(0)” onclick=“saveUser()” id=“btn-save” icon=“icon-save”>保存</a>
  26. <a href=JavaScript:void(0)” onclick=“closeWindow()” id=“btn-cancel” icon=“icon-cancel”>取消</a>
  27. </div>
  28. </div>

可以看到,窗口是一个DIV,表单是一个FORM,这种创建方式具有极大的灵活性,不需要学习成本,创建的JQuery代码如下:

Js代码  收藏代码
  1. $(‘#btn-save,#btn-cancel’).linkbutton();
  2. win = $(‘#user-window’).window({
  3. closed:true
  4. });
  5. form = win.find(‘form’);

其中建立了窗口的操作按钮,并获取表单对象。

3、进行CRUD操作的客户端代码:

Js代码  收藏代码
  1. function newUser(){
  2. win.window(‘open’);
  3. form.form(‘clear’);
  4. form.url = ‘/demo1/user/save’;
  5. }
  6. function editUser(){
  7. var row = grid.datagrid(‘getSelected’);
  8. if (row){
  9. win.window(‘open’);
  10. form.form(‘load’, ‘/demo1/user/getUser/’+row.id);
  11. form.url = ‘/demo1/user/update/’+row.id;
  12. else {
  13. $.messager.show({
  14. title:‘警告’,
  15. msg:‘请先选择用户资料。’
  16. });
  17. }
  18. }
  19. function saveUser(){
  20. form.form(‘submit’, {
  21. url:form.url,
  22. success:function(data){
  23. eval(‘data=’+data);
  24. if (data.success){
  25. grid.datagrid(‘reload’);
  26. win.window(‘close’);
  27. else {
  28. $.messager.alert(‘错误’,data.msg,‘error’);
  29. }
  30. }
  31. });
  32. }
  33. function closeWindow(){
  34. win.window(‘close’);
  35. }

例子中使用etmvc框架来处理后台的数据,演示例子中不使用数据库。

定义用户数据模型:

Java代码  收藏代码
  1. public class User {
  2. public Integer id;
  3. public String name;
  4. public String phone;
  5. public String addr;
  6. public String duty;
  7. public User clone(){
  8. User u = new User();
  9. u.id = id;
  10. u.name = name;
  11. u.phone = phone;
  12. u.addr = addr;
  13. u.duty = duty;
  14. return u;
  15. }
  16. }

定义后台用户的CRUD操作:

Java代码  收藏代码
  1. public class UserController extends ApplicationController{
  2. /**
  3. * 返回全部用户资料
  4. */
  5. public View getUsers() throws Exception{
  6. Map<String,Object> result = new HashMap<String,Object>();
  7. result.put(“total”, users.size());
  8. result.put(“rows”, users);
  9. return new JsonView(result);
  10. }
  11. /**
  12. * 取得指定的用户资料
  13. */
  14. public View getUser(Integer id) throws Exception{
  15. User user = users.get(id-1);
  16. return new JsonView(user);
  17. }
  18. /**
  19. * 保存用户资料,这里对用户名称进行非空检验,仅供演示用
  20. */
  21. public View save(User user) throws Exception{
  22. Map<String,Object> result = new HashMap<String,Object>();
  23. if (user.name.length() == 0){
  24. result.put(“failure”, true);
  25. result.put(“msg”, “用户名称必须填写。”);
  26. else {
  27. result.put(“success”, true);
  28. user.id = users.size()+1;
  29. users.add(user);
  30. }
  31. View view = new JsonView(result);
  32. view.setContentType(“text/html;charset=utf-8”);
  33. return view;
  34. }
  35. /**
  36. * 更新指定的用户资料
  37. */
  38. public View update(Integer id) throws Exception{
  39. Map<String,Object> result = new HashMap<String,Object>();
  40. User user = users.get(id-1).clone();
  41. updateModel(user);
  42. if (user.name.length() == 0){
  43. result.put(“failure”, true);
  44. result.put(“msg”, “用户名称必须填写。”);
  45. else {
  46. result.put(“success”, true);
  47. user.id = id;
  48. users.set(id-1, user);
  49. }
  50. View view = new JsonView(result);
  51. view.setContentType(“text/html;charset=utf-8”);
  52. return view;
  53. }
  54. // 用户资料测试数据
  55. private static List<User> users = new ArrayList<User>();
  56. static{
  57. for(int i=1; i<10; i++){
  58. User user = new User();
  59. user.id = i;
  60. user.name = “name” + i;
  61. user.phone = “phone” + i;
  62. user.addr = “addr” + i;
  63. user.duty = “duty” + i;
  64. users.add(user);
  65. }
  66. }
  67. }

完整的代码请见附件,可以看到,easyui具有极少的JS代码。

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏