Layui数据表格多选表格行实现批量删除_layui form批量删除获取行选中id

作者：从前慢现在也慢 | 2024-02-17 06:05:15

踩

layui form批量删除获取行选中id

参考自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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

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


        //    批量删除，
        $("#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>       
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

我发现了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">
            </div>
          </div>
          <div class="layui-inline">
            <div class="layui-input-inline">
              <button type="button" name="" class="layui-btn" id="search">查询</button>
            </div>
          </div>
        </form>
      </div>
      <div class="layui-col-md4">
        <div class="layui-btn-container">
          <button type="button" class="layui-btn layui-btn-warm" id="delSelect">
            <i class="layui-icon layui-icon-delete"></i>
            批量删除
          </button>
          <button type="button" class="layui-btn" id="addNewInfo">
            <i class="layui-icon layui-icon-add-1"></i>
            添加
          </button>

        </div>
      </div>
    </div>
    <!--展示表格-->
    <table class="layui-table" lay-filter="test" lay-data="{id: 'info'}" id="info"></table>
  </div>
</fieldset>

<!--添加数据-->
<fieldset class="layui-elem-field" id="editPage" style="display: none;">
  <legend style="text-align: center">
    学生信息数据添加
  </legend>
  <div class="layui-field-box">
    <form action="#2" class="layui-form">
      <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <input type="text" name="" autocomplete="off" class="layui-input">
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">年龄</label>
        <input type="text" name="" autocomplete="off" class="layui-input">
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">生日</label>
        <input type="text" name="" autocomplete="off" class="layui-input">
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <input type="text" name="" autocomplete="off" class="layui-input">
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">自我介绍</label>
        <textarea name="introduceSelf" id="" class="layui-textarea" lay-verify="required"></textarea>
      </div>
    </form>
  </div>
</fieldset>

<!--工具条，// 注意：属性 lay-event="" 是模板的关键所在，值可随意定义。-->
<script type="text/html" id="actionBar">
<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 src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.all.js"></script>
<script src="js/layTable.js"></script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

功能实现layTable.js代码

layui.use(['table', 'jquery'], function() {
  let table = layui.table
  let $ = layui.jquery

  let tableIns = table.render({
    elem: '#info'
    , url: 'info.json'
    , cols: [
      [{
        type: 'checkbox',
        fixed: 'left'
      }, {
        field: 'id',
        title: '编号',
        sort: 'true'
      }, {
        field: 'name',
        title: '用户名',
        edit: 'text',
        width: 120
      }, {
        field: 'age',
        title: '年龄',
        sort: true
      }, {
        field: 'email',
        title: '邮箱',
        edit: 'text'
      }, {
        field: 'birthday',
        title: '生日',
        sort: true
      }, {
        field: 'details',
        title: '简介',
      }, {
        fixed: 'right',
        title: '操作',
        toolbar: '#actionBar',
        width: 150
      }]
    ]
    , page: {
      layout: ['prev', 'page', 'next', 'count']
    }
    , title: '学生信息表'
    , height: 425
    , id: 'info'
    , loading: true
  })//table设置基本参数

  //监听行工具事件
  table.on('tool(test)', function(obj) {
    let data = obj.data
    //获得当前行的DOM
    let 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)
      })
    }
  })  //监听行工具事件结束

  //添加按钮的事件
  $('#addNewInfo').on('click', function() {
    let newInfo = layer.open({
      title: '编辑'
      , content: $('#editPage')//页面选择器
      , type: 1//页面选择器
      , area: ['500px']
      , btn: ['确认添加', '取消']
      , yes: function(index, layero) {
        //按钮【按钮一，默认成功】的回调
        layer.msg('提交成功', {icon: 1, time: 2000}, function() {
          layer.close(newInfo)
        })
      }
      , btn2: function(index, layero) {
        //按钮【按钮二】的回调
      }
      , cancel: function() {
        //右上角关闭回调
        // return false 开启该代码可禁止点击该按钮关闭
      }
    })
  })

  //    批量删除，
  $('#delSelect').on('click', function() {
    //获得表格CheckBox已经选中的行的信息
    let 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('请选择需要删除的行')
    }
  })//批量删除操作结束
//查询功能
  $('button#search').click(function() {
    layer.msg('该功能还在开发中...', {icon: 5})
  })
})//layui.use函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

json数据

{
  "code": "0",
  "msg": "",
  "count": "10",
  "data": [
    {
      "id": 935,
      "name": "江秀兰",
      "age": 4147017943049006,
      "birthday": "2014-03-16",
      "email": "m.idssl@rpbzxwrpky.cn",
      "details": "宋勇"
    },
    {
      "id": 970,
      "name": "毛敏",
      "age": 5116280338762030,
      "birthday": "2005-03-18",
      "email": "k.gohawnq@qjfetr.mx",
      "details": "贾明"
    },
    {
      "id": 369,
      "name": "孙娜",
      "age": 2763152458425208,
      "birthday": "1998-03-02",
      "email": "l.qit@rjhxeh.cd",
      "details": "杨平"
    },
    {
      "id": 13,
      "name": "曹伟",
      "age": 1356633505556362,
      "birthday": "1978-05-19",
      "email": "o.lwwbwkldet@jqgjfju.pg",
      "details": "崔平"
    },
    {
      "id": 320,
      "name": "史强",
      "age": 4886544367125658,
      "birthday": "1997-11-26",
      "email": "s.ufyr@xoeidymzv.bh",
      "details": "康敏"
    },
    {
      "id": 857,
      "name": "魏明",
      "age": 1449925015594196,
      "birthday": "1993-09-18",
      "email": "w.qstjngqsdu@jvteksoh.tv",
      "details": "江秀兰"
    },
    {
      "id": 474,
      "name": "邹静",
      "age": 88275121412674,
      "birthday": "1976-07-11",
      "email": "c.enymriu@ytgj.aw",
      "details": "石艳"
    },
    {
      "id": 710,
      "name": "龚静",
      "age": 4284522719231460,
      "birthday": "1976-08-21",
      "email": "o.tltwsvwi@xjtuubpe.sr",
      "details": "夏娟"
    },
    {
      "id": 957,
      "name": "蒋军",
      "age": 1316806026130408,
      "birthday": "2017-10-26",
      "email": "z.wfeu@optqumd.ke",
      "details": "石芳"
    },
    {
      "id": 583,
      "name": "阎伟",
      "age": 2813604300486156,
      "birthday": "1991-11-02",
      "email": "r.hpdl@kqvr.tf",
      "details": "姚刚"
    }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

这是第一次写博客，写的不好还请多多见谅

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/100737