針對Layui數據表格單擊tr行選中當前行的單選框或者複選框功能

1、table單擊tr行勾選checkbox功能:

//單擊行勾選checkbox事件
        var tableDiv;
        $(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 & trs.length===1) {
                checkCell.click();
            }
            checkCell.click();
        });
        $(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
            e.stopPropagation();
        });

2、單擊table表格tr行勾選radio功能:

//點擊整行表格中的tr將選中單元格的單選框按鈕
    $('.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();
    });

然後可直接將選中行的值填充到表單中去:

table.on('radio(orderbodyTab)', function(obj){
        var datas=obj.data;
        $('input[name="orderNo"]').val(datas.orderNo);
        ......
});

以上兩種方法都可作爲通用js方法,dom查找比較原生,希望各位有更好的方法多交流。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章