[转载]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;
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代码  

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);
10. return new JsonView(result);
11. }
13. /**
14. * 取得指定的用户资料
15. */
16. public View getUser(Integer id) throws Exception{
17. User user = users.get(id-1);
18. return new JsonView(user);
19. }
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. }
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. }
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;
70. users.add(user);
71. }
72. }
73. }

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

• demo1.rar (646.4 KB)