layui编辑表格单元格

在日常的学习或开发后台管理这一块时，很多时候会有表格中的单元格可编辑操作。下面我们来了解一下关于layui.table中的单元格编辑事件：

在layui.table数据表格文档中-cols表头参数一览表中有“edit”这一参数，单元格编辑类型，默认是不开启的，目前它只支持text输入框。

如果你采用的是方法渲染，cols是一个二维数值，表头参数设定在数组内；如果你采用的是自动渲染，表头参数应设定在<th>标签上。

这里是采用方法渲染表格，所有表头参数设定在数组内，在学生年龄这一列上添加了“edit”参数，则表示学生年龄这一列下的单元格是可编辑的：

 点击单元格则会有一个输入框，即可输入想编辑的内容：

 输入完成点击其它地方即可：

这里则运用到一个触发单元格编辑事件：单元格被编辑，且值发生改变时触发，回调函数返回一个object参数，携带的成员如下：

*注：edit是固定事件名；test是table原始容器的属性lay-filter="对应的值"；obj.value得到修改后的值；obj.fields得到编辑的字段名；obj.data得到所在行的所有相关数据。

js代码：获取到修改后的值以及该行数据的id，通过post请求将值和id传到控制器。

控制器代码：接收传过来的id和值，通过id查询到该行的数据，将该行的年龄值修改为接收到的值即可。