首页 > 代码库 > SpringMVC+easyUI中datagrid行编辑模式(添加数据)实现_2014.5.2

SpringMVC+easyUI中datagrid行编辑模式(添加数据)实现_2014.5.2

一.概述

  根据我们平常的习惯,一共有两种修改模式,一种是弹窗是修改,将原有的数据提取到dialog上,然后再重新提交到后台(好像easyui里面有个onAfterEdit,这个事件里面有三个参数,其中的一个参数就是发现数据是否有改变),而第二种方式就是实现行编辑模式,在原有的datagrid上添加一个空行,(本例是实现添加数据,不考虑原有数据)。

二.实现

1.后台就不赘言了。直接上代码,但是我还是有个疑问,对于SpingMVC的Controller层次中的方法的**入参**,我在前台通过ajax发送过来的

如{"userName":userName,"age":age}这丫别难过的

1 @RequestMapping("/addUser")
2 @ResponseBody
3 public void addUser(User user){
4         
5     userManager.addUser(user);
6 }

2.前台easyUI,实现是,主要有几个方面,在每个行上,添加editor行属性,也就是说此行允许编辑,然后,在点击添加空行的时候,实用insertRow,点击的时候触发beginEdit,然后在添加一个保存按钮,在编辑完成后,EndEdit,来关闭编辑模式,还有一个OnAfterEdit的事件,通过ajax将数据传送到后台:

 1 {
 2     field:‘userName‘,
 3     title:‘姓名‘,
 4     width:100,
 5     align:‘right‘,
 6     editor :{
 7           type : ‘validatebox‘,
 8           options:{
 9                 required : true
10           }
11     }
12  }
 1 $(‘#datagrid‘).datagrid({
 2         toolbar: [{
 3             text:‘增加‘,
 4             iconCls: ‘icon-add‘,
 5             handler: function(){
 6                 $(‘#datagrid‘).datagrid(‘insertRow‘,{
 7                     index : 0 ,
 8                     row:{
 9                         
10                     }
11                 });
12         $(‘#datagrid‘).datagrid(‘beginEdit‘,0);
13 }
14 }
 1 {
 2             text:‘保存‘,
 3             iconCls: ‘icon-save‘,
 4             handler: function(){
 5                 console.info("save affected!");
 6                 $(‘#datagrid‘).datagrid(‘endEdit‘,0);
 7             }
 8         }],
 9         onAfterEdit : function (rowIndex, rowData, changes){
10             console.info(rowData);
11             $.ajax({
12                    type: "POST",
13                    url: "user/addUser",
14                    data: {
15                        "userName":rowData.userName,
16                        "age":rowData.age
17                    },
18                    success: function(msg){
19                      alert("数据添加成功...");
20                      $(‘#datagrid‘).datagrid(‘load‘);//重新加载datagrid,刷新功能
21                    }
22                 });
23         }