一.概述
根据我们平常的习惯，一共有两种修改模式，一种是弹窗是修改，将原有的数据提取到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,布布扣,bubuko.com