layui 数据表格复选框实现单选功能

原创
2023/05/17 17:23
阅读数 1.4K
一、点击选中(单选)
//单击行勾选checkbox事件
    $(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 trs = tableDiv.find(".layui-unselect.layui-form-checkbox.layui-form-checked").parent().parent().parent();
           for(var i = 0;i<trs.length;i++){
              var ind = $(trs[i]).attr("data-index");
              if(ind!=index){
              var checkCell = tableDiv.find("tr[data-index=" + ind + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
                if (checkCell.length>0) {
                    checkCell.click();
                }
              }
           }
        //选中单击行
       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();
    });

 

二、点击选中(多选)
//单击行勾选checkbox事件
$(document) .on( "click", ".layui-table-body table.layui-table tbody tr", function() { var obj = event ? event.target : event.srcElement; var tag = obj.tagName; 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(); })

 

三、点击选中(多选)

$(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();
        }
        //选中背景色
        $(this).siblings().css("background-color", "#FFFFFF");
        $(this).css("background-color", "#F2F2F2");
    });
 
    $(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
        e.stopPropagation();
    });
    
    
    
四、  Layui Table 点击行时选中单选框

//注:test是table原始容器的属性 lay-filter="对应的值"
layui.table.on('row(i_Layer_SearchResult_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");
});

 


五、Layui Table 点击行时选中复选框

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

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部