使用easyui实现数据表格行内编辑以及将表中数据传到后台的一系列操作

前言

最近在写项目的时候遇到一个问题，在使用easyui编写前台页面有时候在新添加一行数据或者修改数据的时候要求不能以弹框的形式实现，需要直接在原来表格的下面直接增加一行，并且可以直接点击某一单元格进行编辑或修改。在查找了有关资料以及请教公司同事之后，就自己已经完成的某审批系统简单总结了一下具体实现的过程。

步骤：

1.引入js文件

js文件一般公司都会自己将一些常用功能的方法以及事件自己封装成一个js文件，到时候直接可以问你们公司的同事，直接引入就可以

2.在datagrid列属性中的需要添加行内编辑的字段后添加editor属性

editor: { type: "text", options: { required: true }}

其中type可以为下拉框，验证框等，根据需要修改type属性值即可。

3.编写一个单元格触发事件，一般这个事件公司也会提前写好，因为这种通用功能都会进行封装，所以只需要将此事件copy下来即可：

onClickCell: function(rowIndex, field, value){
cellEdit(rowIndex, field, "#teacher");
}
});

如果下面写了双击事件有可能最后的效果不会出来，所以如果你是单纯的想知道如何实现行内编辑效果的话，建议大家在js代码区域尽量不要写其他事件，防止干扰。

完成上述步骤就应该可以出来效果了。

在编辑完需要修改或者添加等操作后，就需要按保存按钮将数据打包发给后台保存到数据库中了。可是这些增删改的数据要怎样才能传递到后台并且知道哪几行的数据做了对应的增删改操作呢？这里我们可以将表格数据全部传到后台，后台用一个String类型的json串接收，再将此json字符串转换成对应的实体类。转换成实体类之后我们就可以对它们为所欲为了。

具体步骤如下：

1.在保存按钮中写一个单击事件

<a id="removeContacts" href="javascript:void(0)" class="easyui-linkbutton btn_disabled"
data-options="iconCls:'icon-btn-save',plain:true" onclick="save()">保存</a>

2.用ajax传递表格数据

function save(){  
  if (endEditing()){  
        $.messager.confirm('确认', '确定要提交所有的数据?', function(r){  
            if (r){  
                $.ajax({  
                    type: "post",  
                    url:"${pageContext.request.contextPath}/tea/manage/saveTeacher",  
                    data:{'dataJson': JSON.stringify($('#teacher').datagrid("getRows"))},
                    dataType: 'json',  
                    success: function (data, textStatus) {  
                        if(data) {  
                            showRightBottomMsg("系统提示","提交成功！",'slide',5000);  
                            clearDatagridAndTree();  
                        } else {  
                            if(data.errorType == "user") {  
                                showAlertMsg("提示",data.msg,"warning");  
                            } else {  
                                showRightBottomMsg("系统提示",data.msg,'slide',5000);  
                            }  
                        }  
                    },  
                    error: function (XMLHttpRequest, textStatus, errorThrown) {  
                        alert(textStatus + errorThrown);  
                    }  
                });  
            }  
        });  
    }  
}  

2.controller层

在这里如果是对一个表的增删改操作需要保存的时候，有两种方法可以实现：一是先将数据库表中的所有数据清空，然后将传递过来的数据重新插入到数据库中，这种方法实现起来较简单，但是仅限于没有特殊需求的前提下，如果数据库中某些数据强制需求不能删除就不能再用此方法了，不过一张表的保存一般不会有这种需求。

后台接收的数据转换成对象之后是多个所以用集合接收，这里用的是LIst集合就可以了。

3service层

这里是现将数据清空，调用的是自己写的删除所有数据的方法，如果你们公司封装了这个方法，可以直接调用，接下来就是遍历List集合将数据逐条保存到数据库，保存方法是封装好的，我直接调用了。特别强调一点的是，开始没有在删除完数据的时候将实体类的id置空，导致一直报一个id定义不明确的异常，之后找了下原因，有可能是在刚做完删除的时候缓存没有清空，所以再添加的时候id会发生冲突，所以在这里将id设置为null会好点。

3自定义的dao的实现类

到这里基本上就可以保证你的数据从前台到后台走通了，这是我第一篇文章，如果哪里写的不完善请大家多多指教，我们可以一起讨论。