首页 > 代码库 > 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 }
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。