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

实现效果: 单击行,自动选中或取消勾选

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

//单击行勾选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

你可能感兴趣的:(Layui)