layui+树结构表格+动态单元格加背景色
Html:
js:
layui.config({
base: '../../Content/module/'
}).extend({
treetable: 'treetable-lay/treetable'
}).use(['table', 'laydate', 'layer', 'treetable'], function () {
var $ = layui.jquery;
var table = layui.table;
var laydate = layui.laydate;
var layer = layui.layer;
var treetable = layui.treetable;
var renderTable = function () {
//范围
var FanW = $("#str1").val();
var year = (new Date().getFullYear() - 1);
var EnergyType = 7;
var Data = [];
//数据
$.ajax({
type: "post",
url: '/Energy_PH/GetDataN',
async: false,
dataType: "json",
data: "year=" + year + "&FanW=" + FanW + "&EnergyType=" + EnergyType,
success: function (result) {
// var data2 = JSON.parse(result); ////将传递过来的json字符串转化为对象
// Data.push(data2.data);
Data.push(result.data);
console.log(result.data);
}
});
treetable.render({
treeColIndex: 0, //树形图表显示在第几列
treeSpid: -1, //最上级的父级id
treeIdName: 'id',
treePidName: 'pid',
treeDefaultClose: true, //是否默认折叠
treeLinkage: false, //父级展开时是否自动展开所有子级
elem: '#table1',
page: false,
//标题栏
cols: [[
{ field: 'MeteringName', title: '计量点' },
{ field: 'MeteringValue1', title: '1月' },
{ field: 'MeteringValue2', title: '2月' },
{ field: 'MeteringValue3', title: '3月' },
//{ field: 'MeteringValue4', title: '4月' },
{
field: 'MeteringValue4',templet: function (d) {
if (d.MeteringName == "状态") {
if (d.MeteringValue4 > 10&&d.MeteringValue4<80) {
return '' + d.MeteringValue4 + '';
} else if (d.MeteringValue4 > 50&&d.MeteringValue4<80) {
return '' + d.MeteringValue4 + '';
}
} else {
return '' + d.MeteringValue4 + '';
}
}, title: '4月'
},
{ field: 'MeteringValue5', title: '5月' },
{ field: 'MeteringValue6', title: '6月' },
{ field: 'MeteringValue7', title: '7月' },
{ field: 'MeteringValue8', title: '8月' },
{ field: 'MeteringValue9', title: '9月' },
{ field: 'MeteringValue10', title: '10月' },
{ field: 'MeteringValue11', title: '11月' },
{ field: 'MeteringValue12', title: '12月' }]],
//数据
data: Data[0],
done: function (res) {
// layer.closeAll('loading');
res.data.forEach(function (item, index) {
if (item.MeteringName == "状态") {
var tr = $('#table1').next('.treeTable').find('.layui-table-body tbody tr[data-index="' + index + '"] td');
tr.each(function () {
var text = $(this).text();
if (text > 30&&text<50) {
$(this).css('background-color', 'rgba(251,230,160,0.5)');
} else if (text>50&&text < 80) {
$(this).css('background-color', 'red');
}
});
}
});
}
});
};
renderTable();
$('#btn-expand').click(function () {
treetable.expandAll('#table');
});
$('#btn-fold').click(function () {
treetable.foldAll('#table');
});
$('#btn-refresh').click(function () {
renderTable();
});
$('#reload').click(function () {
renderTable();
});
});
json:数据格式
{
"count": 5,
"data": [
{
"id": 19,
"pid": -1,
"MeteringName": "无油压缩空气",
"MeteringValue1": "",
"MeteringValue2": "",
"MeteringValue3": "",
"MeteringValue4": "34.0000",
"MeteringValue5": "77.0000",
"MeteringValue6": "67.0000",
"MeteringValue7": "",
"MeteringValue8": "",
"MeteringValue9": "",
"MeteringValue10": "",
"MeteringValue11": "",
"MeteringValue12": ""
},
{
"id": 20,
"pid": 19,
"MeteringName": "1#制氮机",
"MeteringValue1": "",
"MeteringValue2": "",
"MeteringValue3": "",
"MeteringValue4": "56.0000",
"MeteringValue5": "36.0000",
"MeteringValue6": "45.0000",
"MeteringValue7": "",
"MeteringValue8": "",
"MeteringValue9": "",
"MeteringValue10": "",
"MeteringValue11": "",
"MeteringValue12": ""
},
{
"id": 21,
"pid": 19,
"MeteringName": "2#制氮机",
"MeteringValue1": "",
"MeteringValue2": "",
"MeteringValue3": "",
"MeteringValue4": "66.0000",
"MeteringValue5": "89.0000",
"MeteringValue6": "67.0000",
"MeteringValue7": "",
"MeteringValue8": "",
"MeteringValue9": "",
"MeteringValue10": "",
"MeteringValue11": "",
"MeteringValue12": ""
},
{
"id": 22,
"pid": 19,
"MeteringName": "车间",
"MeteringValue1": "",
"MeteringValue2": "",
"MeteringValue3": "",
"MeteringValue4": "",
"MeteringValue5": "",
"MeteringValue6": "",
"MeteringValue7": "",
"MeteringValue8": "",
"MeteringValue9": "",
"MeteringValue10": "",
"MeteringValue11": "",
"MeteringValue12": ""
},
{
"id": 0,
"pid": -1,
"MeteringName": "状态",
"MeteringValue1": "66.0000",
"MeteringValue2": "1.0000",
"MeteringValue3": "0.0000",
"MeteringValue4": "34.0000",
"MeteringValue5": "45.0000",
"MeteringValue6": "67.0000",
"MeteringValue7": "23.0000",
"MeteringValue8": "45.0000",
"MeteringValue9": "66.0000",
"MeteringValue10": "58.0000",
"MeteringValue11": "29.0000",
"MeteringValue12": "80.0000"
}
],
"code": "0",
"msg": "ok"
}
效果：
table.init('demo', {
limit: 30, //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
//支持所有基础参数
done: function (res) {
var that = this.elem.next();
res.data.forEach(function (item, index) {
//debugger;
if (item.ti == "状态") {
var tr = that.find("[data-index=" + index + "]").children();
tr.each(function () {
var b = $(this).text();
if (b >= 10 && b < 20) {
$(this).css("background-color", "#FFD700");
$(this).css("color", "#fff");
}
else if (b >= 20) {
$(this).css("background-color", "red");
$(this).css("color", "#fff");
}
})
}
})
}
});