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

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

2024-07-02 17:12:59   225人阅读

一.概述

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

 

 

 

 

 

 

 


联系
我们