Layui数据表格多选表格行实现批量删除

最新推荐文章于 2024-08-08 07:24:14 发布

zukxu

最新推荐文章于 2024-08-08 07:24:14 发布

阅读量1.1w

点赞数 15

文章标签： layui数据表格数据表格的单行删除数据表格的多行删除

本文链接：https://blog.csdn.net/zukxu123/article/details/101165761

版权

参考自layui官网实例：https://www.layui.com/demo/table.html
layui是一个很好用的轻量级前后端框架，其中有很多自己封装的方法供用户使用，其中的数据表格对于后端人员来说更是不可多得的好工具。
今天在使用layui的数据表格模块时，发现了layui的数据表格模块只提供了单行数据的删除，那是layui的数据表格工具条的方法，即layui数据表格自带的工具条工具，没有多选数据进行删除的方法，

<!--数据表格-->
<table class="layui-table" lay-filter="test" lay-data="{id: 'info'}" id="info"></table>

<!--数据表格工具条，// 注意：属性 lay-event="" 是模板的关键所在，值可随意定义。-->
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
  //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            //获得当前行的DOM
            var tr = obj.tr;

            if (obj.event === 'del') {
                layer.confirm('确定删除吗?', function (index) {
                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                layer.prompt({
                    formType: 2
                    , value: data.email
                }, function (value, index) {
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });
            }
        });  //监听行工具事件结束
</script>

经过网上查询资料等等，发现网上都没有直接实现数据表格多行删除的功能，有的都是全选删除，即一次性全部删除所有的表格信息，所以自己写了一个进行多行删除的案例


        //    批量删除，
        $("#delSelect").on('click', function () {
            //获得表格CheckBox已经选中的行的信息
            var checkStatus = table.checkStatus('info'),
                //返回行的value
                data = checkStatus.data;

            if (data.length > 0) {
                layer.confirm('确定删除选中的用户？', {icon: 3, title: '提示信息'}, function (index) {
                    //layui中找到CheckBox所在的行，并遍历找到行的顺序
                    $("div.layui-table-body table tbody input[name='layTableCheckbox']:checked").each(function () { // 遍历选中的checkbox
                        n = $(this).parents("tbody tr").index();  // 获取checkbox所在行的顺序
                        //移除行
                        $("div.layui-table-body table tbody ").find("tr:eq(" + n + ")").remove();
                        //如果是全选移除，就将全选CheckBox还原为未选中状态
                        $("div.layui-table-header table thead div.layui-unselect.layui-form-checkbox").removeClass("layui-form-checked");
                    });
                    layer.close(index);
                })
            } else {
                layer.msg("请选择需要删除的行");
            }
        });//批量删除操作结束
    
 </script>

我发现了layui的数据表格的表格行数据加载不是直接加载在table标签中，而是放在额外的div容器中，
所以在选择的时候我就直接选择了复选框checkbox所在的容器去进行删除，初学者，所以代码会有点冗余复杂，望大家多多见谅
实现后还有一个小bug，点击全选按钮之后取消进行的多选，再取消几个的多选，就会删除全部数据，并不会保留没有勾选的数据行，以后会改进
在这里插入图片描述

全部代码如下：

HTML页面代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>数据展示</title>
  <link rel="stylesheet" href="layui/css/layui.css" type="text/css">
  <style>
  label.layui-form-label {
    
    text-align: left;
  }
  </style>
</head>
<body>
<!--总体页面-->
<fieldset class="layui-elem-field">
  <legend style="text-align: center">
    <h1>学生信息数据列表</h1>
  </legend>
  <div class="layui-field-box">
    <!--查询表单-->
    <div class="layui-row">
      <div class="layui-col-md8 ">
        <form action="#1" class="layui-form">
          <div class="layui-inline">
            姓名
            <div class="layui-input-inline">
              <input type="text" name="" autocomplete="off" class="layui-input layui-inputxs">
            </div>
            年龄
            <div class="layui-input-inline">
              <input type="text" name="" autocomplete="off" class="layui-input">
            </div>
            邮箱
            <div class="layui-input-inline">
              <input type="text" name="" autocomplete="off" class="layui-input