首页layui 单元格编辑

layui 单元格编辑

时间: 2023-08-16 19:10:33 浏览: 254

在 layui 中，可以通过使用 table 模块来实现单元格的编辑功能。下面是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui 单元格编辑示例</title> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css"> </head> <body> <table class="layui-table" lay-data="{id: 'demo', page: true}" lay-filter="demo"> <thead> <tr> <th lay-data="{field:'id', width:80, edit:'text'}">ID</th> <th lay-data="{field:'name', width:120, edit:'text'}">姓名</th> <th lay-data="{field:'age', width:80, edit:'text'}">年龄</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>20</td> </tr> <tr> <td>2</td> <td>李四</td> <td>25</td> </tr> </tbody> </table> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script> <script> // 加载layui模块 layui.use(['table', 'form'], function(){ var table = layui.table; var form = layui.form; // 监听单元格编辑事件 table.on('edit(demo)', function(obj){ var value = obj.value; // 得到修改后的值 var field = obj.field; // 得到字段名 var data = obj.data; // 得到当前行数据对象 console.log(value, field, data); }); }); </script> </body> </html> ``` 以上代码中，通过设置 `edit` 属性为 `'text'` 来指定单元格可编辑，并通过监听 `edit` 事件来获取编辑后的值、字段名和当前行数据对象。你可以根据具体需求进行调整和扩展。

阅读全文