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查找比較原生,希望各位有更好的方法多交流。