阅读量:6
在layui中，可以通过以下步骤来实现批量删除表格数据：
- 在表格中添加一个复选框列来实现选择多条数据；
- 为复选框列的每个复选框添加一个事件监听器，在复选框被选中时将数据的id存储到一个数组中；
- 创建一个删除按钮，点击该按钮时获取选中的数据id数组，然后发送请求给后端进行批量删除操作。
以下是一个简单的示例代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>批量删除表格数据</title> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/css/layui.css"> </head> <body> <div class="layui-container"> <button class="layui-btn layui-btn-danger" id="deleteBtn">批量删除</button> <table id="dataTable" lay-filter="dataTable"></table> </div> <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.js"></script> <script> layui.use(['table', 'layer'], function() { var table = layui.table; var layer = layui.layer; // 模拟表格数据 var data = [ {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) { var checkStatus = table.checkStatus('dataTable'); var ids = checkStatus.data.map(function(item) { return item.id; }); console.log(ids); }); // 监听删除按钮点击事件 document.getElementById('deleteBtn').addEventListener('click', function() { var checkStatus = table.checkStatus('dataTable'); var ids = checkStatus.data.map(function(item) { return item.id; }); console.log('要删除的id数组：', ids); // 发送请求给后端进行批量删除操作 }); }); </script> </body> </html> 在上面的示例代码中，我们通过监听复选框的选中事件来获取选中的数据id数组，然后在点击删除按钮时可以获取到这个数组并进行相应的操作。您可以根据自己的需求对代码进行调整和扩展。
