layui 表格选中行同时选中复选框

本文介绍了两种在layui表格中实现选中行时同时选中复选框的方法。第一种是监听表格行点击并阻止事件冒泡,但会导致layui的行点击事件不触发。第二种是在行点击事件中触发复选框点击,但可能引发复选框点击事件被触发两次的问题,解决方案是通过复选框再次触发点击事件,从而执行三次点击事件。

有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);
	}
});
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值