layui给数据表格某列添加样式的三种方法
layui给数据表格列添加样式的方式目前我就发现三种方式,如下是给表格的列“类型”添加字体颜色的三种方式。
一、方式一(最简单的方法)
如下给列“类型”添加了字体颜色#f67d06
layList.tableList('userList',"{:Url('getlist')}",function () {
return [
{field: 'type', title: '类型' ,style:'color: #f67d06;'},
{field: 'title', title: '标题' },
{field: 'balance', title: '余量',sort:true,event:'balance'},
{field: 'number', title: '奖励',sort:true},
{field: 'mark', title: '备注'},
{field: 'nickname', title: '微信昵称/操作者'},
{field: 'add_time', title: '时间',align:'center'},
];
});
二、方式二(利用template)
可以在script标签里写html代码,什么a标签,span标签,class和style都可以写。
layList.tableList('userList',"{:Url('getlist')}",function () {
return [
{field:'type',title: '类型',templet: '#typecolor'}",
{field: 'title', title: '标题' },
{field: 'balance', title: '余量',sort:true,event:'balance'},
{field: 'number', title: '奖励',sort:true},
{field: 'mark', title: '备注'},
{field: 'nickname', title: '微信昵称/操作者'},
{field: 'add_time', title: '时间',align:'center'},
];
});
<script type="text/html" id="typecolor">
<a href="https://blog.csdn.net/weixin_43687896/article/details/84344089" class="background" target="_blank" style="color:#f67d06;">{{ d.username }}</a>
</script>
三、方式三(在数据返回前做好处理,也就是写入html代码)
页面不做任何处理
layList.tableList('userList',"{:Url('getlist')}",function () {
return [
{field: 'type', title: '类型'},
{field: 'title', title: '标题' },
{field: 'balance', title: '余量',sort:true,event:'balance'},
{field: 'number', title: '奖励',sort:true},
{field: 'mark', title: '备注'},
{field: 'nickname', title: '微信昵称/操作者'},
{field: 'add_time', title: '时间',align:'center'},
];
});
在模型里处理要返回的数据(在数据上拼接html代码)
$list[$key]['type'] = "<span style='color: #f67d06;'>".$list[$key]['type']."</span>";