使用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代码区域尽量不要写其他事件，