2021年8月30日

layui表格table渲染render修改某单元格样式


layer是不错的弹窗插件,并且逐渐开始覆盖到整个ui的控件,在平时的切图项目中也经常使用到,比如layer的表格动态渲染,这种情况下如果要给单元格写个事件就变得麻烦了,参阅了官方的文档资料,layui表格table渲染render修改某单元格样式,方法如下:


table.init('projects_order', {
limit: 10000,
done:function(res){
console.log(res);
res.data.forEach(function (item,index) {
//如果是置顶,修改这行文字颜色
if(item.x3 == 388611){
$(".layui-table-body tbody tr[data-index='"+index+"'] td[data-field='x3']").css({'backgroundColor': "#72ff00" });
}

});
}
});

 

附网上的写法2


layui.use(['table', 'jquery'], function () {
var table = layui.table,
$ = layui.$;
table.render({
elem: '#list',
url: "{:url('XXX/index')}", //数据接口
title: '列表',
toolbar: 'true',
defaultToolbar: ['filter', 'print', 'exports'],
page: true,
loading: true,
limit: 20,
limits: [10, 20, 50, 100],
cols: [[
{type: 'checkbox', fixed: 'left'},
{type:'numbers', title: '序号',width:60,fixed:'left'},
{field: 'title', title: '标题'},
{field: 'name', title: '分类', },
{field: 'time', title: '时间', sort: true},
{fixed: 'right', width: 165, align: 'center', toolbar: '#barDemo',title:'操作'}
]]
,done:function (res) {
res.data.forEach(function (item,index) {
//如果是置顶,修改这行文字颜色
if(item.istop == 2){
$(".layui-table-body tbody tr[data-index='"+index+"']").css({'color': "#e31d3b" });
}

});
}
});
});

标签:, ,

微信扫一扫二维码访问


16年前端经验
加微信好友直接沟通
了解《我的十年》