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

一.概述

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

二.实现

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

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

@RequestMapping("/addUser")
@ResponseBody
public void addUser(User user){
        
    userManager.addUser(user);
}

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

{
    field:'userName',
    title:'姓名',
    width:100,
    align:'right',
    editor :{
 7           type : 'validatebox',
 8           options:{
 9                 required : true
10           }
11     }
 }

$('#datagrid').datagrid({
        toolbar: [{
            text:'增加',
            iconCls: 'icon-add',
            handler: function(){
                $('#datagrid').datagrid('insertRow',{
                    index : 0 ,
                    row:{
                        
                    }
                });
        $('#datagrid').datagrid('beginEdit',0);
}
}

{
            text:'保存',
            iconCls: 'icon-save',
            handler: function(){
                console.info("save affected!");
                $('#datagrid').datagrid('endEdit',0);
            }
        }],
        onAfterEdit : function (rowIndex, rowData, changes){
            console.info(rowData);
            $.ajax({
                   type: "POST",
                   url: "user/addUser",
                   data: {
                       "userName":rowData.userName,
                       "age":rowData.age
                   },
                   success: function(msg){
                     alert("数据添加成功...");
                     $('#datagrid').datagrid('load');//重新加载datagrid，刷新功能
                   }
                });
        }