layui 表格颜色

acc的痛

于 2024-10-25 11:02:43 发布

阅读量1.1k

点赞数 11

CC 4.0 BY-SA版权

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/weixin_58507189/article/details/143206599

表格有时需要根据数值来变换需要的颜色,以下是几种实现方式和效果

1.字体颜色

可以用 templet进行return 标签来设置字体颜色

例如:

{
	field: '字段', title: '是否延误', align: "center", width: 80, templet: function (d) {
	return d.字段 == true ? "<span style='color:red'>是</span>" : "否";
},	}

2.单元格颜色简单版

同上使用templet设置背景颜色

例如:

{
	field: '字段', title: '计划交期', width: 80, align: "center", templet:
	function (d) {
	if (!!d.F_Plan_Delivery && d.needchangecolor==1) {
	return "<div style='color:#000;background-color:red;'>" + layui.util.toDateString(d.字段, 'yyyy-MM-dd') + "</div>";
	}
	else if (!!d.字段 && d.needchangecolor== 0) {
	return layui.util.toDateString(d.字段, 'yyyy-MM-dd');
	}
	else {
	return "";
	}
	}
}

3.单元格颜色进阶版

使用layui表格的done ,可以实现整个格单元格填充

例如:

done: function (res, curr, count){
                var YellowTitles = ["字段1", "字段2"];
                YellowTitles.forEach(function (field, j) {
                    var color = "rgb(237,125,49)";
                    $('div[lay-id="currentTableId"]').find('th[data-field="' + field + '"]').css("background", color).css("color", "black");
                });

 }