给layui的列设置背景色,以及字体颜色
1、字体颜色设置,最简单的办法style:'color: #f6d06',{field: 'rongQiJiHuaCha',title: '容器',align:'center', width:'60',style:'color: #f67d06;', totalRow: true}2、给列设置背景色done: function (res, curr, count) {var that = this
·
1、字体颜色设置,最简单的办法
style:'color: #f6d06'
,{field: 'rongQiJiHuaCha',title: '容器',align:'center', width:'60',style:'color: #f67d06;', totalRow: true}
2、给列设置背景色
done: function (res, curr, count) {
var that = this.elem.next();
res.data.forEach(function (item, index) {
// 所需的条件
if(item.shouldMonth > 0){
// 添加颜色--#1E9FFF ;'threeMonth'根据需要填充背景色的field进行更改
that.find(".layui-table-box tbody tr[data-index='" + index + "'] td[data-field='threeMonth']").css("background-color", "#1E9FFF");
}
});}
表格渲染代码
/* 疑问:想在最后加一列备注,合并4行,但是失败,样式会乱,如果加在供应商名称后,就没问题*/
table.render({
elem: '#tableList'
,url:'${pageContext.request.contextPath }/kanban/piLiangChaiXiangKanBan.do'
,id :'contentTable'
,totalRow: true //开启合计行
,page : false
,height : 600
,cols: [
[
{title:'序号',width: 50,type:'numbers', align:'center', rowspan: 4}
,{field: 'customer_name', title:'供应商名称', width:'150', align:'center', rowspan: 4, totalRowText: '合计:'}
,{title:'倒箱品库存现况', align:'center', colspan: 14}
,{title:'倒箱品作业现况', align:'center', colspan: 6}
],
[
{title:'库存', align:'center', rowspan: 2, colspan: 2}
,{title:'日发货计划', align:'center', colspan: 8}
,{title:'下趟数', align:'center', colspan: 4}
,{title:'今日计划', align:'center', rowspan: 2, colspan: 2}
,{title:'完成数', align:'center', rowspan: 2, colspan: 2}
,{title:'未完成', align:'center', rowspan: 2, colspan: 2}
],
[
{title:'计划总数', align:'center', colspan: 2}
,{title:'已发货', align:'center', colspan: 2}
,{title:'未发货', align:'center', colspan: 2}
,{title:'差额', align:'center', colspan: 2}
,{title:'计划总数', align:'center', colspan: 2}
,{title:'差额', align:'center', colspan: 2}
],
[
{field: 'wuLiaoKuCun',title: '物料',align:'center', width:'80', totalRow: true}
,{field: 'rongQiKuCun',title: '容器',align:'center', width:'60', totalRow: true}
,{field: 'wuLiaoJiHuaFaHuo',title: '物料',align:'center', width:'80', totalRow: true}
,{field: 'rongQiJiHuaFaHuo',title: '容器',align:'center', width:'60', totalRow: true}
,{field: 'wuLiaoYiFa',title: '物料',align:'center', width:'80', totalRow: true}
,{field: 'rongQiYiFa',title: '容器',align:'center', width:'60', totalRow: true}
,{field: 'wuLiaoWeiFa',title: '物料',align:'center', width:'80', totalRow: true}
,{field: 'rongQiWeiFa',title: '容器',align:'center', width:'60', totalRow: true}
,{field: 'wuLiaoJiHuaCha',title: '物料',align:'center', width:'80', totalRow: true}
,{field: 'rongQiJiHuaCha',title: '容器',align:'center', width:'60',style:'color: #f67d06;', totalRow: true}
,{field: 'wuLiaoXiaGeJiHua',title: '物料',align:'center', width:'80', totalRow: true}
,{field: 'rongQiXiaGeJiHua',title: '容器',align:'center', width:'60', totalRow: true}
,{field: 'wuLiaoXiaGeJiHuaCha',title: '物料',align:'center', width:'80', totalRow: true}
,{field: 'rongQiXiaGeJiHuaCha',title: '容器',align:'center', width:'60', totalRow: true}
,{field: 'wuLiaoChaiJiHua',title: '物料',align:'center', width:'80', totalRow: true}
,{field: 'rongQiChaiJiHua',title: '容器',align:'center', width:'60', totalRow: true}
,{field: 'wuLiaoChaiYiZuo',title: '物料',align:'center', width:'80', totalRow: true}
,{field: 'rongQiChaiYiZuo',title: '容器',align:'center', width:'60', totalRow: true}
,{field: 'wuLiaoChaiWeiZuo',title: '物料',align:'center', width:'80',style:'color: #f67d06;', totalRow: true}
,{field: 'rongQiChaiWeiZuo',title: '容器',align:'center', width:'60',style:'color: #f67d06;', totalRow: true}
]
]
,done : function(res, curr, count){
$('th').css({
'background-color': '#009688', 'color': '#fff','font-weight':'bold'
});
var divArr = $(".layui-table-total div.layui-table-cell");
$.each(divArr,function (index,item) {
var _div = $(item);
var content = _div.html();
content = content.replace(".00","");
_div.html(content);
});
var that = this.elem.next();
res.data.forEach(function (item, index) {
// 所需的条件
if(item.wuLiaoJiHuaCha > 0){
// 添加颜色--#1E9FFF ;'threeMonth'根据需要填充背景色的field进行更改
that.find(".layui-table-box tbody tr[data-index='" + index + "'] td[data-field='wuLiaoJiHuaCha']").css("background-color", "#1E9FFF");
}
if(item.wuLiaoChaiWeiZuo > 0){
// 添加颜色--#1E9FFF ;'threeMonth'根据需要填充背景色的field进行更改
that.find(".layui-table-box tbody tr[data-index='" + index + "'] td[data-field='wuLiaoChaiWeiZuo']").css("background-color", "#1E9FFF");
}
});
}
});
效果截图
更多推荐
已为社区贡献1条内容
所有评论(0)