layui数据表格根据字段生成自定义样式

layui数据表格根据字段生成自定义样式

• 1.根据文字的值不一样显示不同的样式
• • 2.根据数字的值不一样显示不同的文字
  • • 3.表格显示图片
    • • • 4.表格里间加按钮
        • • 5 设置背景颜色文字颜色

1.根据文字的值不一样显示不同的样式

{
    field: 'checkState', title: '奖励状态',
    templet: function (d) {
        if (d.checkState == "已通过") {
            return '<span style="color:#008000;">' + d.checkState + '</span>'
        }
        if (d.checkState == "未通过") {
            return '<span style="color:#c00;">' + d.checkState + '</span>'
        }
        if (d.checkState == "待审核") {
            return '<span style="color:#FF4500;">' + d.checkState + '</span>'
        }
        if (d.checkState == "未提交") {
            return '<span style="color:#000000;">' + d.checkState + '</span>'
        }
    }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

2.根据数字的值不一样显示不同的文字

2.1只是文字

	{field: 'state', title: '状态',templet:function (d) {
	    if(d.state=='1') return '可用'
	    else return '不可用'
	}}
	
2.2 设置文字样式

	{field: 'state',width:'7.4%', align: 'center', title: '是否授权',
		templet : function(data) {// 替换数据
			if(data.state==1){
				 return "授权";  
		   }else if(data.state==0){
		  	return '<span style="color: #c00;">'+'未授权'+'</span>';
		   }
	   }
	}
	

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

3.表格显示图片

{field: 'imgUrl', title: '图片', width: 160,templet: function(d){
    return '<img src="'+d.imgUrl+'" alt="" width="160px" height="80px"/></div>';
}}

• 1
• 2
• 3
• 4
• 5

4.表格里间加按钮

	引入的javascript
<script type="text/html" id="toolbartopheadUrl">
	 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detailheadUrl">查看</a>
</script>

	Html页面
{field:'btn', width:'5%', title: '头像',align:'center',toolbar:'#toolbartopheadUrl'}

	JS监听
if (obj.event === 'detailheadUrl') {
   	var tu = data.headUrl;
    if(tu=="" || tu==null){
  		layer.msg('未上传图片');
    }else{	
        var img = '<img  src=' + '"' + tu + '"' + ' width="200px" height="200px" />';
        layer.tab({
            area: ['200px', '250px'],
            tab: [{
                title: '图片',
                content: img
            }]
        });
    }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24

5 设置背景颜色文字颜色

{field: 'orPrice', title: '订单总价', width: 100,style:"color: red;"}