在layui中，可以通过以下步骤来实现批量删除表格数据：在表格中添加一个复选框列来实现选择多条数据；为复选框列的每个复选框添加一个事件监听器，在复选框被选中时将数据的id存储到一个数组中；创建一个删除按钮，点击该按钮时获取选中的数据id数组，然后发送请求给后端进行批量删除操作

lewis 1年前 (2024-03-29) 阅读数 7 #技术

在layui中，可以通过以下步骤来实现批量删除表格数据：

在表格中添加一个复选框列来实现选择多条数据；
为复选框列的每个复选框添加一个事件监听器，在复选框被选中时将数据的id存储到一个数组中；
创建一个删除按钮，点击该按钮时获取选中的数据id数组，然后发送请求给后端进行批量删除操作。

以下是一个简单的示例代码：

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>批量删除表格数据</title>
<linkrel="stylesheet"href="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/css/layui.css">
</head>
<body>
<divclass="layui-container">
<buttonclass="layui-btnlayui-btn-danger"id="deleteBtn">批量删除</button>
<tableid="dataTable"lay-filter="dataTable"></table>
</div>

<scriptsrc="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.js"></script>
<script>
layui.use(['table','layer'],function(){
vartable=layui.table;
varlayer=layui.layer;

//模拟表格数据
vardata=[
{id:1,name:'张三'},
{id:2,name:'李四'},
{id:3,name:'王五'}
];

//渲染表格
table.render({
elem:'#dataTable',
cols:[[
{type:'checkbox'},
{field:'id',title:'ID'},
{field:'name',title:'姓名'}
]],
data:data
});

//监听复选框选中事件
table.on('checkbox(dataTable)',function(obj){
varcheckStatus=table.checkStatus('dataTable');
varids=checkStatus.data.map(function(item){
returnitem.id;
});
console.log(ids);
});

//监听删除按钮点击事件
document.getElementById('deleteBtn').addEventListener('click',function(){
varcheckStatus=table.checkStatus('dataTable');
varids=checkStatus.data.map(function(item){
returnitem.id;
});
console.log('要删除的id数组：',ids);
//发送请求给后端进行批量删除操作
});
});
</script>
</body>
</html>

在上面的示例代码中，我们通过监听复选框的选中事件来获取选中的数据id数组，然后在点击删除按钮时可以获取到这个数组并进行相应的操作。您可以根据自己的需求对代码进行调整和扩展。

版权声明

本文仅代表作者观点，不代表博信信息网立场。

上一篇：Prometheus如何理解下一篇：html怎么播放视频

版权声明

作者文章