easy ui window应用

easy ui window使用

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


easy ui window应用

1、表格的定义:

Html代码  easy ui window应用
  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代码  easy ui window应用
  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代码  easy ui window应用
  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代码  easy ui window应用
  1. $('#btn-save,#btn-cancel').linkbutton();  
  2. win = $('#user-window').window({  
  3.     closed:true  
  4. });  
  5. form = win.find('form');  

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

 

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

Js代码  easy ui window应用
  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代码  easy ui window应用
  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.       
  8.     public User clone(){  
  9.         User u = new User();  
  10.         u.id = id;  
  11.         u.name = name;  
  12.         u.phone = phone;  
  13.         u.addr = addr;  
  14.         u.duty = duty;  
  15.         return u;  
  16.     }  
  17. }  

定义后台用户的CRUD操作:

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