根据引用[1]，
Layui表格提供了可
编辑的功能。你可以通过以下步骤实现：
1. 引入
Layui和
Layui表格的相关文件。
```html
<link rel="stylesheet" href="
layui/css/
layui.css">
<script src="
layui/
layui.js"></script>
```
2. 在HTML中创建一个
表格，并为其添加一个id。
```html
<
table id="demo" lay-filter="test"></
table>
```
3. 在JavaScript中配置
表格，并开启
编辑功能。
```javascript
layui.use('
table', function(){
var
table =
layui.
table;
//
表格配置
table.render({
elem: '#demo',
url: '/demo/
table/user/',
cols: [[
{field:'id', title:'ID', width:80},
{field:'username', title:'用户名', width:120},
{field:'email', title:'邮箱', width:150},
{field:'sex', title:'性别', width:80, sort:true},
{field:'city', title:'城市', width:100},
{field:'sign', title:'签名', width:200},
{field:'experience', title:'积分', width:80, sort:true},
{field:'score', title:'评分', width:80, sort:true},
{field:'classify', title:'职业', width:100},
{field:'wealth', title:'财富', width:135, sort:true},
{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]],
page: true,
// 开启
编辑功能
edit: true
});
});
```
4. 在HTML中添加一个工具条，并为其添加一个id。
```html
<script type="text/html" id="barDemo">
<a class="
layui-btn
layui-btn-xs" lay-event="edit">
编辑</a>
<a class="
layui-btn
layui-btn-danger
layui-btn-xs" lay-event="del">删除</a>
</script>
```
5. 在JavaScript中监听
表格的
编辑事件，并处理
编辑后的数据。
```javascript
layui.use('
table', function(){
var
table =
layui.
table;
// 监听
表格编辑事件
table.on('edit(test)', function(obj){
var value = obj.value; // 得到修改后的值
var data = obj.data; // 得到所在行所有键值
var field = obj.field; // 得到字段
// 处理
编辑后的数据
// ...
});
});
```
扫一扫
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
