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

本文介绍了如何使用EasyUI在前端实现数据表格的行内编辑功能，以及如何通过AJAX将编辑后的数据传送到后台。首先，通过在datagrid列属性中添加editor属性实现编辑功能，接着在保存按钮的点击事件中，利用AJAX将JSON格式的表格数据发送到后台。在后台，数据被转换为实体类并进行处理。文章还提到了在控制器和服务层处理数据保存的注意事项，包括数据清空和避免ID冲突的问题。

前言

最近在写项目的时候遇到一个问题，在使用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()">保存</