layui数据表格批量删除

Posted 2020-12-18 superfeeling

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