EasyUi 增删改查

一、弹出对话框就行操作：

index.xml:

先引用一些css和js：

[html]  view plain  copy

1. <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.3/themes/default/easyui.css" />  
2.     <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.3/themes/icon.css">  
3.     <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.3/demo/demo.css">  
4.     <script type="text/javascript" src="jquery-easyui-1.5.3/jquery.min.js"></script>  
5.     <script type="text/javascript" src="jquery-easyui-1.5.3/jquery.easyui.min.js"></script>  

body里面的代码：

[html]  view plain  copy

1.       
2.     <!-- 创建表单 -->  
3.    <table id="dg" title="所有用户" class="easyui-datagrid" style="width:550px;height:250px"  
4.        url="userCtrl/selectUser.do"  
5.        toolbar="#toolbar"  
6.        rownumbers="true" fitColumns="true" singleSelect="true">  
7.    <thead>  
8.        <tr>  
9.            <th field="name" width="110">姓名</th>  
10.            <th field="phone" width="110">电话</th>  
11.            <th field="email" width="150">邮件</th>  
12.        </tr>  
13.    </thead>  
14. </table>  
15. <div id="toolbar">  
16.     <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">添加</a>  
17.     <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">修改</a>  
18.     <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">移除</a>  
19. </div>  
20.   
21.   
22. <!-- 创建表单对话框 -->  
23. <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"  
24.         closed="true" buttons="#dlg-buttons">  
25.     <div class="ftitle">编辑用户</div>  
26.     <form id="fm" method="post">  
27.         <div class="fitem">  
28.             <label>姓名 ：</label>  
29.             <input name="name" class="easyui-validatebox" required="true">  
30.         </div>  
31.         <div class="fitem">  
32.             <label>电话 ：</label>  
33.             <input name="phone" class="easyui-validatebox" required="true">  
34.         </div>  
35.         <div class="fitem">  
36.             <label>邮件 ：</label>  
37.             <input name="email">  
38.         </div>  
39.     </form>  
40. </div>  
41. <div id="dlg-buttons">  
42.     <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">保存</a>  
43.     <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>  
44. </div>  
45. <script type="text/javascript">  
46.     //弹出添加用户的对话框  
47.     function newUser(){  
48.         $('#dlg').dialog('open').dialog('setTitle','添加有用户');  
49.         $('#fm').form('clear');  
50.         url = 'userCtrl/saveUser.do'; //这里的url是保存用户的路径  
51.     }  
52.     //保存的方法  
53.     function saveUser(){  
54.     $('#fm').form('submit',{  
55.         url: url,  
56.         onSubmit: function(){  
57.             return $(this).form('validate');  
58.         },  
59.         success: function(result){  
60.             var result = eval('('+result+')');  
61.             if (result.errorMsg){  
62.                 $.messager.show({  
63.                     title: 'Error',  
64.                     msg: result.errorMsg  
65.                 });  
66.             } else {  
67.                 $('#dlg').dialog('close');        // close the dialog  
68.                 $('#dg').datagrid('reload');    // reload the user data  
69.             }  
70.         }  
71.     });  
72.     }  
73.       
74.     //修改用户的窗口  
75.     function editUser(){  
76.         var row = $('#dg').datagrid('getSelected');  
77.         if (row){  
78.             $('#dlg').dialog('open').dialog('setTitle','编辑用户');  
79.             $('#fm').form('load',row);  
80.             url = 'userCtrl/updateUser.do?id='+row.id;  
81.         }  
82.     }  
83.       
84.     //删除用户  
85.     function destroyUser(){  
86.         var row = $('#dg').datagrid('getSelected');  
87.         if (row){  
88.             $.messager.confirm('提示','你确定要删除这个用户吗?',function(r){  
89.                 if (r){  
90.                     $.post('userCtrl/delUser.do',{id:row.id},function(result){  
91.                         if (result.success){  
92.                             $('#dg').datagrid('reload');    // reload the user data  
93.                         } else {  
94.                             $.messager.show({    // show error message  
95.                                 title: 'Error',  
96.                                 msg: result.errorMsg  
97.                             });  
98.                         }  
99.                     },'json');  
100.                 }  
101.             });  
102.         }  
103.     }  
104. </script>  

UserCtrl.java：

[java]  view plain  copy

1. package com.mfc.ctrl;  
2.   
3. import java.util.List;  
4.   
5. import javax.annotation.Resource;  
6.   
7. import org.springframework.stereotype.Controller;  
8. import org.springframework.web.bind.annotation.RequestMapping;  
9. import org.springframework.web.bind.annotation.ResponseBody;  
10.   
11. import com.mfc.dao.UserDao;  
12. import com.mfc.entity.User;  
13.   
14. import net.sf.json.JSONObject;  
15.   
16. @Controller  
17. @RequestMapping("userCtrl")  
18. public class UserCtrl {  
19.       
20.     @Resource(name = "userDao")  
21.     private UserDao userDao;  
22.       
23.     @RequestMapping("selectUser")  
24.     @ResponseBody  
25.     public Object selectUser(){  
26.         List<User> users = userDao.selectUser(null);  
27.         JSONObject jsonObject = new JSONObject();  
28.         jsonObject.put("users", users);  
29.         return users;  
30.     }  
31.       
32.     @RequestMapping("saveUser")  
33.     public void saveUser(User user){  
34.         userDao.addUser(user);  
35.     }  
36.       
37.     @RequestMapping("updateUser")  
38.     public void updateUser(User user){  
39.         userDao.updateUser(user);  
40.     }  
41.       
42.     @RequestMapping("delUser")  
43.     public void delUser(Integer id){  
44.         userDao.delUser(id);  
45.     }  
46. }  

这里只看了控制器和界面的代码！

效果图：

二、直接在表格上进行操作：

修改index.jsp

这里使用alluser.jsp代替：

先引入css和js：

这里要新下载一个jquery.edatagrid.js：

[html]  view plain  copy

1. <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.3/themes/default/easyui.css" />  
2. <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.3/themes/icon.css">  
3. <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.3/demo/demo.css">  
4. <script type="text/javascript" src="jquery-easyui-1.5.3/jquery.min.js"></script>  
5. <script type="text/javascript" src="jquery-easyui-1.5.3/jquery.easyui.min.js"></script>  
6. <script type="text/javascript" src="jquery-easyui-1.5.3/jquery.edatagrid.js"></script>  

代码：

[html]  view plain  copy

1.     <script type="text/javascript">  
2.         $(function(){  
3.             $('#dg').edatagrid({  
4.                 url: 'userCtrl/selectUser.do',  
5.                 saveUrl: 'userCtrl/saveUser.do',  
6.                 updateUrl: 'userCtrl/updateUser.do',  
7.                 destroyUrl: 'userCtrl/delUser.do'  
8.             });  
9.         });  
10.     </script>      
11.   
12.         <h1>直接实现数据的增删改查</h1>  
13.       
14.     <table id="dg" title="所有用户" style="width:700px;height:250px"  
15.             toolbar="#toolbar" pagination="true" idField="id"  
16.             rownumbers="true" fitColumns="true" singleSelect="true">  
17.         <thead>  
18.             <tr>  
19.                 <th field="name" width="120" editor="{type:'validatebox',options:{required:true}}">姓名</th>  
20.                 <th field="phone" width="120" editor="{type:'validatebox',options:{required:true}}">电话</th>  
21.                 <th field="email" width="120" editor="{type:'validatebox',options:{validType:'email'}}">邮件</th>  
22.             </tr>  
23.         </thead>  
24.     </table>  
25.     <div id="toolbar">  
26.         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')">新建</a>  
27.         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">删除</a>  
28.         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">保存</a>  
29.         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">取消<a>  
30.     </div>  

效果图：