zfxcms ^回到顶部

您的当前位置:首页 > web资讯 > layui点击行选中复选框和单选框

layui点击行选中复选框和单选框

所属分类: UI框架   2021-10-21 15:23:32  编辑:admin  浏览次数 277 次

话不多说上代码:选中复选框

$(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();

    }

});

//对td的单击事件进行拦截停止,防止事件冒泡再次触发上述的单击事件(Table的单击行事件不会拦截,依然有效)

$(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {

    e.stopPropagation();

});


选中单选框

layui.table.on('row(Table_Filter)', function (obj) {    //选中行样式

    obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');    //选中radio样式

    obj.tr.find('i[class="layui-anim layui-icon"]').trigger("click");

});


Web文章检索

Web文章目录