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

客官°小女子只卖身不卖艺 2022-05-16 15:47 474阅读 0赞

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

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

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