layui数据表格批量删除(个人笔记)

实现思路

首先监听复选框,使用obj.tr返回当前行jquery节点对象,此行下有该节点的下标属性;判断复选框全选和多选:
当复选框多选,将点击后的复选框的jquery的节点对象push进array数组,反选则获取反选复选框代表的节点对象,取到该节点对象下标属性值,此时再与array中数组的每一项复选框行节点的下标属性值坐判断是否相等,如果相等则删除该节点对象,此时数组剩余的节点对象就是复选框选中的节点对象。
当复选框全选,则将array的所有节点对象删除,将获取到的全选节点对象push进数组,通过slice删除。

			 var array = [];
            table.on('checkbox(test3)', function (obj) {
                // console.log(obj.tr) //得到当前行元素对象
                var tr = obj.tr; //得到当前点击复选框的行元素对象
                if (obj.type == 'all') { //点击全选按钮触发此处
                    var len = array.length;
                    array.splice(0, len); //全选后删除数组项,重新添加全选的dom元素
                    array.push(obj.tr.prevObject[0]);
                }
                else {
                    if (obj.checked) { //多选框被选中则添加dom元素到数组
                        array.push(tr);
                    } else {//取消多选框的选中则在数组中删除自己
                        var indexs = obj.tr[0].rowIndex;  //获取取消选中的元素对象下标
                        array.forEach((item, index) => {
                            //当数组中任意一个元素的rowIndex值与取消复选框的元素对象属性rowIndex的下标值相等,则在数组中删除该元素
                            if (item[0].rowIndex == indexs) {
                                array.splice(index, 1);
                            }
                        })
                    }
                }
                table.on('toolbar(test3)', function (obj) {
                    var checkStatus = table.checkStatus(obj.config.id);
                    // console.log(checkStatus);
                    switch (obj.event) {
                        case 'add':
                            layer.msg('添加');
                            break;
                        case 'delete':
                            layer.msg('删除');

                            array.forEach((item) => {
                                item.remove(); //删除dom结构
                                // obj.checked = 'false';
                            })
                            break;
                        case 'update':
                            layer.msg('编辑');
                            break;
                    };
                });
            })
        })
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui 表格中,可以通过监听复选框的选择来实现批量操作等功能。具体实现步骤如下: 1. 在表格中添加复选框列,并设置lay-skin属性为primary,表示使用layui的复选框。 ``` <table class="layui-table" lay-data="{...}"> <colgroup> ... <col width="50"> </colgroup> <thead> ... <th lay-data="{field:'checkbox', width:50, templet:'#checkboxTpl'}"></th> </thead> <tbody> ... </tbody> </table> <script type="text/html" id="checkboxTpl"> <input type="checkbox" lay-skin="primary"> </script> ``` 2. 在JavaScript代码中监听复选框的选择事件,可以使用layui的form模块来实现。需要注意的是,由于表格是动态生成的,所以需要使用layui的form.render()方法重新渲染表单元素。 ``` layui.use(['table', 'form'], function(){ var table = layui.table, form = layui.form; // 监听复选框选择 table.on('checkbox(test)', function(obj){ console.log(obj.checked); // 当前是否选中状态 console.log(obj.data); // 原始数据 console.log(obj.type); // 类型,如果行选则为:row,如果全选则为:all,如果取消选择则为:uncheck console.log(table.checkStatus('test').data); // 获取选中行的数据 }); // 重新渲染表单元素 form.render(); }); ``` 3. 表格中如果存在分页,则需要在分页时重新渲染表单元素。 ``` table.on('page(test)', function(){ form.render(); }); ``` 以上就是监听表格复选框选择的实现方法。需要注意的是,表格中的复选框列必须有唯一的字段名,否则无法在JavaScript代码中获取选中行的数据

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值