码迷,mamicode.com
首页 > 其他好文 > 详细

layui数据表格批量删除

时间:2020-07-26 00:58:53      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:row   元素   返回   思路   length   批量删除   item   nbsp   spl   

实现思路
首先监听复选框,使用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;
                    };
                });
            })
        })

 

layui数据表格批量删除

标签:row   元素   返回   思路   length   批量删除   item   nbsp   spl   

原文地址:https://www.cnblogs.com/superfeeling/p/13377677.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!