layui怎么批量删除表格数据

layui

小亿

136

2024-02-20 15:39:26

栏目: 编程语言

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

layui怎么批量删除表格数据

最新问答

相关标签