要
实现编辑列表某
一行的功能，你可以使用
layui 的
表格组件和弹出层组件。
首先需要在
表格中添加编辑按钮，点击编辑按钮弹出弹出层，显示当前行的数据，并提供修改和保存操作。具体步骤如下：
1. 在
表格中添加编辑按钮列：
```javascript
{field: 'operation', title: '操作', templet: '#operationTpl'}
```
2. 在模板中定义编辑按钮的内容：
```html
<script type="text/html" id="operationTpl">
<a class="
layui-btn
layui-btn-xs" lay-event="edit">编辑</a>
</script>
```
3. 监听
表格的工具条事件，在事件回调函数中判断是否点击了编辑按钮：
```javascript
table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'edit'){
// 编辑操作
}
});
```
4. 在编辑操作中弹出弹出层，并显示当前行的数据：
```javascript
layer.open({
type: 1,
title: '编辑',
content: $('#editForm'),
success: function(layero, index){
// 将当前行的数据填充到表单中
form.val('editForm', data);
},
btn: ['保存', '取消'],
yes: function(index, layero){
// 保存操作
},
btn2: function(index, layero){
// 取消操作
layer.close(index);
}
});
```
5. 弹出层中的表单需要使用
layui 的 form 组件，表单的 HTML 代码如下：
```html
<form class="
layui-form" lay-filter="editForm">
<div class="
layui-form-item">
<label class="
layui-form-label">名称</label>
<div class="
layui-
input-block">
<
input type="text" name="name" required lay-verify="required" placeholder="请输入名称" autocomplete="off" class="
layui-
input">
</div>
</div>
<div class="
layui-form-item">
<label class="
layui-form-label">地址</label>
<div class="
layui-
input-block">
<
input type="text" name="address" required lay-verify="required" placeholder="请输入地址" autocomplete="off" class="
layui-
input">
</div>
</div>
<!-- 其他表单项 -->
</form>
```
6. 在保存操作中获取表单数据并更新当前行的数据：
```javascript
form.on('submit(saveBtn)', function(data){
// 更新当前行的数据
obj.update({
name: data.field.name,
address: data.field.address,
// 其他表单项
});
layer.close(index);
return false;
});
```
这样就可以
实现编辑列表某
一行的功能了。完整代码示例可以参考下面的链接：
https://www.
layui.com/doc/modules/table.html#table-toolbar
扫一扫
1332
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
