有2种实现方式,各有利弊
1.
监听表格行点击,触发复选点击事件,同时阻止事件的冒泡
问题:layui的行点击事件不会触发了
$(document).on("click", ".layui-table-body table.layui-table tbody tr", function() {
var index = $(this).attr('data-index');
var tableBox = $(this).parents('.layui-table-box');
//存在固定列
if(tableBox.find(".layui-table-fixed.layui-table-fixed-l").length > 0) {
tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
} else {
tableDiv = tableBox.find(".layui-table-body.layui-table-main");
}
var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
if(checkCell.length > 0) {
checkCell.click();
}
});
//阻止事件向上冒泡
$(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function(e) {
e.stopPropagation();
});
2.在行点击事件中触发 复选框点击 并阻止冒泡
问题:如果点击复选框则会触发2次点击事件,目前的办法是让复选再次触发点击事件,执行3次点击事件
//行点击事件
layui.table.on('row(testItemsGrid)', function(obj) {
childTestItemsGrid.lastCheckRow = obj;
checkRowAndCheckBox(obj);
});
//选中行同时选中复选框
var checkRowAndCheckBox = function(obj) {
//选中行同步选中复选按钮
var tr = obj.tr;
//行点击会向他上层元素冒泡相同的事件,在这里阻止上层的点击事件防止重复触发点击事件
var selectDiv = tr.find("div.layui-unselect");
var div = selectDiv.find("i");
var trDiv = tr.find("div.laytable-cell-1-0-0");
trDiv.click(function(e) {
layui.stope(e);
//更新缓存中的状态
var status = tr.find("div.layui-form-checked").length;
status = status > 0 ? true : false;
var start = tr.selector.indexOf("data-index=") + 12;
var index = tr.selector.substring(start, tr.selector.length - 2);
testItemGrid.table.cache.testItemsGridId[index].LAY_CHECKED = status;
});
div.click();
};
//复选框监听
layui.table.on('checkbox(testItemsGrid)', function(obj) {
console.log(obj.checked); //当前是否选中状态
console.log(obj.data); //选中行的相关数据
console.log(obj.type); //如果触发的是全选,则为:all,如果触发的是单选,则为:one
if(obj.type != 'all') {
checkRowAndCheckBox(testItemGrid.lastCheckRow);
}
});