layui数据表格单击行勾选（多选或者单选行）选项的功能

最新推荐文章于 2024-09-26 16:43:06 发布

没有名字随便喊

最新推荐文章于 2024-09-26 16:43:06 发布

阅读量9.3k

点赞数 1

分类专栏： Layui 文章标签： layui web前端

Layui 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

实现效果：单击行，自动选中或取消勾选

–对于复选框按钮点击行的选中功能：

//单击行勾选checkbox事件
$('.DetailDiv').on("click",".layui-table-body table.layui-table tbody tr", function () {
	/*当单击表格行时,把单选按钮设为选中状态*/
	var tableDiv;
    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();
    }
});

//对td的单击事件进行拦截停止，防止事件冒泡再次触发上述的单击事件 
$('.DetailDiv').on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
    e.stopPropagation();
});

–对于单选框按钮点击行的选中功能：

$('.DetailDiv').on("click",".layui-table-body table.layui-table tbody tr", function () {
	/*当单击表格行时,把单选按钮设为选中状态*/
	var tableDiv;
	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.layui-table-cell div.layui-form-radio I");
	if (checkCell.length>0) {
		checkCell.click();
	}
});
	//对td的单击事件进行拦截停止，防止事件冒泡再次触发上述的单击事件  将此代码在页面初始化后执行一次即可以。
	$('.DetailDiv').on("click", "td div.layui-table-cell div.layui-form-radio", function (e) {
		e.stopPropagation();
	});

参考原文原文：https://blog.csdn.net/damosk/article/details/79609272