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         }

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