layui批量全选删除table(layui select多选)

在使用Layui框架开发Web应用时，经常会遇到需要实现表格数据的批量选择和删除功能。本文将详细介绍如何使用Layui实现这一功能，并提供多种实现思路。

解决方案概述

要实现Layui表格的批量全选和删除功能，我们需要以下几个步骤：

初始化Layui表格。
添加全选/取消全选的功能。
实现批量删除功能。

初始化Layui表格

首先，我们需要在HTML中引入Layui的CSS和JS文件，并初始化一个表格。

html
</p>



  
  <title>Layui 批量全选删除</title>
  


  <table id="demo"></table>

  
  
    layui.use(['table'], function(){
      var table = layui.table;

      // 渲染表格
      table.render({
        elem: '#demo'
        ,url: '/data.json' // 数据接口
        ,cols: [[ // 表头
          {type: 'checkbox'}
          ,{field: 'id', title: 'ID', width: 80}
          ,{field: 'username', title: '用户名', width: 120}
          ,{field: 'email', title: '邮箱', width: 150}
          ,{field: 'sign', title: '签名', width: 200}
        ]]
        ,page: true // 开启分页
      });
    });
  



<p>

添加全选/取消全选的功能

接下来，我们需要添加全选和取消全选的功能。Layui提供了layTable.on方法来监听表格的事件。

html</p>


  layui.use(['table'], function(){
    var table = layui.table;

    // 渲染表格
    table.render({
      elem: '#demo'
      ,url: '/data.json' // 数据接口
      ,cols: [[ // 表头
        {type: 'checkbox'}
        ,{field: 'id', title: 'ID', width: 80}
        ,{field: 'username', title: '用户名', width: 120}
        ,{field: 'email', title: '邮箱', width: 150}
        ,{field: 'sign', title: '签名', width: 200}
      ]]
      ,page: true // 开启分页
    });

    // 监听全选
    table.on('all(CHECKED)', function(obj){
      obj.setChecked(true); // 全选
    });

    // 监听取消全选
    table.on('all(NONE)', function(obj){
      obj.setChecked(false); // 取消全选
    });
  });


<p>

实现批量删除功能

最后，我们实现批量删除功能。我们需要一个按钮来触发删除操作，并处理选中的数据。

html
<button class="layui-btn" id="deleteBtn">批量删除</button></p>


  layui.use(['table'], function(){
    var table = layui.table;

    // 渲染表格
    table.render({
      elem: '#demo'
      ,url: '/data.json' // 数据接口
      ,cols: [[ // 表头
        {type: 'checkbox'}
        ,{field: 'id', title: 'ID', width: 80}
        ,{field: 'username', title: '用户名', width: 120}
        ,{field: 'email', title: '邮箱', width: 150}
        ,{field: 'sign', title: '签名', width: 200}
      ]]
      ,page: true // 开启分页
    });

    // 监听全选
    table.on('all(CHECKED)', function(obj){
      obj.setChecked(true); // 全选
    });

    // 监听取消全选
    table.on('all(NONE)', function(obj){
      obj.setChecked(false); // 取消全选
    });

    // 批量删除
    document.getElementById('deleteBtn').addEventListener('click', function(){
      var checkStatus = table.checkStatus('demo')
        ,data = checkStatus.data; // 获取选中的数据
      if (data.length === 0) {
        layer.msg('请先选择要删除的数据');
        return;
      }
      layer.confirm('确定要删除选中的数据吗？', function(index){
        // 发送请求删除数据
        // 假设后端接口为 /delete
        var ids = data.map(function(item){ return item.id }).join(',');
        fetch('/delete', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ids: ids})
        }).then(function(response){
          if (response.ok) {
            layer.msg('删除成功');
            table.reload('demo'); // 刷新表格
          } else {
            layer.msg('删除失败');
          }
        });
        layer.close(index);
      });
    });
  });


<p>

多种实现思路

使用jQuery实现批量删除

如果你更喜欢使用jQuery，可以结合Layui的API来实现批量删除功能。

html</p>




  layui.use(['table'], function(){
    var table = layui.table;

    // 渲染表格
    table.render({
      elem: '#demo'
      ,url: '/data.json' // 数据接口
      ,cols: [[ // 表头
        {type: 'checkbox'}
        ,{field: 'id', title: 'ID', width: 80}
        ,{field: 'username', title: '用户名', width: 120}
        ,{field: 'email', title: '邮箱', width: 150}
        ,{field: 'sign', title: '签名', width: 200}
      ]]
      ,page: true // 开启分页
    });

    // 批量删除
    $('#deleteBtn').on('click', function(){
      var checkStatus = table.checkStatus('demo')
        ,data = checkStatus.data; // 获取选中的数据
      if (data.length === 0) {
        layer.msg('请先选择要删除的数据');
        return;
      }
      layer.confirm('确定要删除选中的数据吗？', function(index){
        // 发送请求删除数据
        var ids = data.map(function(item){ return item.id }).join(',');
        $.ajax({
          url: '/delete',
          type: 'POST',
          contentType: 'application/json',
          data: JSON.stringify({ids: ids}),
          success: function(response){
            if (response.success) {
              layer.msg('删除成功');
              table.reload('demo'); // 刷新表格
            } else {
              layer.msg('删除失败');
            }
          },
          error: function(){
            layer.msg('删除失败');
          }
        });
        layer.close(index);
      });
    });
  });


<p>

使用纯JavaScript实现批量删除

如果你不想依赖任何库，可以使用纯JavaScript来实现批量删除功能。

html</p>


  layui.use(['table'], function(){
    var table = layui.table;

    // 渲染表格
    table.render({
      elem: '#demo'
      ,url: '/data.json' // 数据接口
      ,cols: [[ // 表头
        {type: 'checkbox'}
        ,{field: 'id', title: 'ID', width: 80}
        ,{field: 'username', title: '用户名', width: 120}
        ,{field: 'email', title: '邮箱', width: 150}
        ,{field: 'sign', title: '签名', width: 200}
      ]]
      ,page: true // 开启分页
    });

    // 批量删除
    document.getElementById('deleteBtn').addEventListener('click', function(){
      var checkStatus = table.checkStatus('demo')
        ,data = checkStatus.data; // 获取选中的数据
      if (data.length === 0) {
        layer.msg('请先选择要删除的数据');
        return;
      }
      layer.confirm('确定要删除选中的数据吗？', function(index){
        // 发送请求删除数据
        var ids = data.map(function(item){ return item.id }).join(',');
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/delete', true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.onreadystatechange = function() {
          if (xhr.readyState === 4 && xhr.status === 200) {
            var response = JSON.parse(xhr.responseText);
            if (response.success) {
              layer.msg('删除成功');
              table.reload('demo'); // 刷新表格
            } else {
              layer.msg('删除失败');
            }
          } else if (xhr.readyState === 4) {
            layer.msg('删除失败');
          }
        };
        xhr.send(JSON.stringify({ids: ids}));
        layer.close(index);
      });
    });
  });


<p>

通过以上几种方法，你可以根据自己的需求选择最适合的方式来实现Layui表格的批量全选和删除功能。希望本文对你有所帮助！

文章来源网络，作者：运维，如若转载，请注明出处：https://shuyeidc.com/wp/68555.html<