Layui通过template实现对单元格样式的改变
1. Layui通过template实现对单元格样式的改变
ListR为数据集合
点击查看代码
function Escape(ListR) {
var ListData = [];
ListData.push({ type: 'checkbox', fixed: 'left' })
//获取系统参数表数据
MaterialTypeArr = [@Html.Raw(DataManager.GetJsonData("MaterialType"))]
ListR.forEach(function (element) {
if (element.Isvisible != 0) {
var hide;
var templet;
if (element.FieldName == "MaterialPrice") {
templet = function (d) {
res = d.Price+="￥"
return res
}
}
if (element.FieldName == "SupplierID") {
hide = true;
}
if (element.FieldName == "SupplierName") {
hide = true;
}
if (element.FieldName == "MaterialType") {
templet = function (d) {
res = MaterialTypeArr.find(item => item.value == d.MaterialType).text
return res
}
}
if (element.FieldName == "AuditStatus") {
templet = function (d) {
if (d.AuditStatus === '正常') {
return '<span style="color:#41ed78;font-weight:600">' + d.AuditStatus + '</span>';
}
else if (d.AuditStatus === '待审核') {
return '<span style="color:#fedc5e;font-weight:600">' + d.AuditStatus + '</span>';
}
else if (d.AuditStatus === '禁用') {
return '<span style="color:#ff4444;font-weight:600">' + d.AuditStatus + '</span>';
}
}
}
ListData.push({
field: element.FieldName,
title: element.Displaytext,
width: element.Width,
templet: templet,
hide: hide
})
}
})
return ListData
}
2. Layui通过Jquery, 监听表格行单击事件,单击表格行后勾选复选框
点击查看代码
// 表格单击行勾选复选框
$(document).on("click", ".layui-table-body table.layui-table tbody tr", function (e) {
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();
});