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

最新推荐文章于 2025-07-23 14:14:09 发布

原创最新推荐文章于 2025-07-23 14:14:09 发布 · 3.1k 阅读

3 ·

CC 4.0 BY-SA版权

layui 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了两种在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);
	}
});