Layui表格行 删除操作页面数据
时间: 2023-09-09 17:06:09 浏览: 51
要在Layui表格中删除行,需要在表格配置中设置一个事件,这个事件将在用户点击删除按钮时触发。在这个事件中,需要获取被删除的行数据,并将其从数据源中删除。然后,需要调用表格的reload方法来重新加载数据,以更新表格中的行。
下面是一个示例代码,展示如何在Layui表格中添加删除行的功能:
```
// 定义表格数据源
var data = [
{ name: '张三', age: 20 },
{ name: '李四', age: 22 },
{ name: '王五', age: 25 }
];
// 定义表格配置
var tableConfig = {
elem: '#table',
cols: [[
{ field: 'name', title: '姓名' },
{ field: 'age', title: '年龄' },
{ title: '操作', toolbar: '#toolbar' }
]],
data: data,
// 设置事件,用于删除行
done: function(res, curr, count) {
$('#table').next().find('.layui-btn-danger').on('click', function() {
var index = $(this).parents('tr').eq(0).attr('data-index');
data.splice(index, 1);
table.reload();
});
}
};
// 初始化表格
var table = layui.table;
table.render(tableConfig);
```
在上面的代码中,我们首先定义了一个数据源data,包含了三个对象。然后,我们定义了一个表格配置tableConfig,其中设置了表格的列信息、数据源以及一个done事件。
在done事件中,我们使用jQuery来设置一个点击事件,用于删除行。当用户点击删除按钮时,我们首先获取被删除行的索引index,然后使用splice方法将其从数据源中删除。最后,调用表格的reload方法来重新加载数据,以更新表格中的行。