layui怎么批量删除表格数据

   2024-11-04 7230
核心提示:在layui中,可以通过以下步骤来实现批量删除表格数据:在表格中添加一个复选框列来实现选择多条数据;为复选框列的每个复选框添

在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数组,然后在点击删除按钮时可以获取到这个数组并进行相应的操作。您可以根据自己的需求对代码进行调整和扩展。

 
举报打赏
 
更多>同类维修大全
推荐图文
推荐维修大全
点击排行

网站首页  |  关于我们  |  联系方式网站留言    |  赣ICP备2021007278号