layui table 批量删除

layui table 是一款基于layui框架开发的表格插件，它提供了很多实用的功能，包括批量删除。具体实现方法如下：

1. 在HTML页面中，定义一个表格，并且给表格添加一个id，如下所示：

<table id="demo" lay-filter="test"></table>

2. 在JS文件中，通过 layui.table.render() 方法渲染表格，并且设置一些属性，如下所示：

layui.use('table', function(){
  var table = layui.table;
  
  //渲染表格
  table.render({
    elem: '#demo',
    url: '/demo/table/user/', //数据接口
    page: true, //开启分页
    cols: [[ //表头
      {type: 'checkbox'},
      {field: 'id', title: 'ID', width:80, sort: true},
      {field: 'username', title: '用户名', width:120},
      {field: 'email', title: '邮箱', width:150},
      {field: 'sex', title: '性别', width:80, sort: true},
      {field: 'city', title: '城市', width:100},
      {field: 'sign', title: '签名', width: 200},
      {field: 'experience', title: '积分', width: 80, sort: true},
      {field: 'score', title: '评分', width: 80, sort: true},
      {field: 'classify', title: '职业', width: 100},
      {field: 'wealth', title: '财富', width: 135, sort: true},
      {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    ]]
  });
});

3. 定义一个工具条模板，通过 checkbox 来选择需要删除的数据项，如下所示：

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

4. 绑定工具条事件，通过 layui.table.on() 方法监听事件，如下所示：

layui.use('table', function(){
  var table = layui.table;
  
  //监听工具条
  table.on('tool(test)', function(obj){
    var data = obj.data; //获取当前行数据
    var layEvent = obj.event; //获取lay-event对应的值
    
    if(layEvent === 'del'){ //删除
      layer.confirm('真的删除行么', function(index){
        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
        layer.close(index);
        //向服务端发送删除指令
      });
    } 
  });
});

5. 定义一个批量删除按钮，通过 layui.table.on() 方法监听按钮事件，并获取选中的数据项进行删除操作，如下所示：

layui.use('table', function(){
  var table = layui.table;
  
  //监听表格复选框选择
  table.on('checkbox(test)', function(obj){
    console.log(obj)
  });
  
  //监听工具条
  table.on('tool(test)', function(obj){
    var data = obj.data; //获取当前行数据
    var layEvent = obj.event; //获取lay-event对应的值
    
    if(layEvent === 'del'){ //删除
      layer.confirm('真的删除行么', function(index){
        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
        layer.close(index);
        //向服务端发送删除指令
      });
    } 
  });
  
  //批量删除按钮事件监听
  $('#btnDelete').click(function(){
    var checkStatus = table.checkStatus('demo'); //获取选中行数据
    var data = checkStatus.data;
    if(data.length > 0){
      layer.confirm('真的删除选中的数据么？', function(index){
        $.ajax({
          url : '/demo/table/delete/',
          type : "POST",
          data : {
            data : JSON.stringify(data)
          },
          success : function(data) {
            if (data.code == 0) {
              layer.msg("删除成功", {
                icon : 6,
                time : 1000
              }, function() {
                table.reload("demo");
              });
            } else {
              layer.msg(data.msg, {
                icon : 5,
                time : 1000
              });
            }
          }
        });
        layer.close(index);
      });
    }else{
      layer.msg("请选择需要删除的数据");
    }
  });
});

以上就是 layui table 批量删除的实现方法。如果您还有其他问题，请随时提出。