1. 在 HTML 页面中引入 layui 的相关资源文件：```html
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>
- 创建一个包含表格的容器：
<div id="table-container"></div>
- 初始化 layui：
layui.use('table', function () {var table = layui.table;// 表格配置var tableConfig = {elem: '#table-container',height: 'full-150',url: '/api/data', // 表格数据接口page: true, // 开启分页cols: [[{field: 'id', title: 'ID', edit: 'text'},{field: 'name', title: '姓名', edit: 'text'},{field: 'age', title: '年龄', edit: 'text'},{field: 'gender', title: '性别', edit: 'text'},{field: 'address', title: '地址', edit: 'text'},{field: 'operation', title: '操作', toolbar: '#operation-bar'}]]};// 渲染表格table.render(tableConfig);// 监听表格编辑事件table.on('edit(table-filter)', function (obj) {var data = obj.data; // 编辑后的数据var field = obj.field; // 编辑的字段名var value = obj.value; // 编辑后的值// 在这里可以将编辑后的数据通过 Ajax 请求发送到后台保存});
});
-
在表格配置的 cols 中指定需要编辑的列，并设置 edit 属性为 ‘text’ 或其他合适的编辑方式。在上述代码中，我们设定了 id、name、age、gender 和 address 这几个字段可以编辑。
-
在监听编辑事件的回调函数中，可以获取编辑后的数据以及编辑的字段名和值。在这里可以通过 Ajax 请求将编辑后的数据发送到后台保存。
注意事项：
- 在编辑事件的回调函数中，可以通过 obj.data 获取当前行的数据，obj.field 获取编辑的字段名，obj.value 获取编辑后的值。
- 表格的 elem 属性需要设置为表格容器的 id 或 class。
- 可以根据需要修改表格的其他配置项，比如接口地址、分页等。
这样，当用户点击表格中的单元格进行编辑时，会触发表格的编辑事件，你可以在回调函数中处理编辑后的数据。
//监听单元格编辑事件
table.on(‘edit(listRecordTo002Filter)’, function(obj){
var value = obj.value; // 得到修改后的值
var data = obj.data; // 得到所在行所有键值
var field = obj.field; // 得到字段
$.ajax({type: 'POST',url : "[[@{/technology/record/updateRecordTo002}]]",data: JSON.stringify({id: data.id,field: field,value: value}),contentType: 'application/json',success: function(response) {// 根据需要处理成功的响应console.log('Save success:', response);layer.msg('已保存修改', {icon: 1});},error: function(xhr, status, error) {// 根据需要处理错误的响应console.error('Save error:', error);layer.msg('保存失败', {icon: 2});}
});console.log('Edited value:', value);
console.log('Edited row data:', data);
