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