写一个layui表格点击删除,删除data数组里面的假数据
时间: 2024-05-01 17:17:51 浏览: 86
layui数据表格跨行自动合并的例子
5星 · 资源好评率100%
好的,针对你的问题,可以使用如下代码实现:
首先,需要在表格渲染时给删除按钮添加一个点击事件。
```
table.render({
// ...
cols: [
// ...
{ field: 'operation', title: '操作', width: 100, templet: '#operationTpl' }
],
// ...
});
// 定义操作列的模板
<script type="text/html" id="operationTpl">
<button class="layui-btn layui-btn-sm layui-btn-danger btn-delete" data-id="{{d.id}}">删除</button>
</script>
```
上述代码中,在操作列中添加了一个删除按钮,并添加了一个 `btn-delete` 类作为选择器,以便在点击时能够获取到该按钮的信息。
接下来,需要编写一个处理删除操作的方法,该方法会在点击删除按钮时触发。
```
// 监听删除按钮的点击事件
$('body').on('click', '.btn-delete', function() {
var id = $(this).data('id'); // 获取要删除的数据的 id
// 从 data 数组中删除对应的数据
for (var i = 0; i < data.length; i++) {
if (data[i].id == id) {
data.splice(i, 1);
break;
}
}
// 重新渲染表格
table.reload('table', { data: data });
});
```
上述代码中,使用 jQuery 监听了删除按钮的点击事件,并获取到需要删除的数据的 id。然后,在 data 数组中查找对应的数据,并删除该数据。最后,重新渲染表格即可。
需要注意的是,上述代码中的 `table.reload` 方法需要在表格初始化时指定 `id`,可以使用如下代码指定:
```
table.render({
elem: '#table',
id: 'table',
// ...
});
```
阅读全文