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






 

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>'
        }
    }
}

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>';
       }
     }
  }

3.表格显示图片

{field: 'imgUrl', title: '图片', width: 160,templet: function(d){
    return '<img src="'+d.imgUrl+'" alt="" width="160px" height="80px"/></div>';
}}
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
            }]
        });
    }
}
5 设置背景颜色文字颜色
{field: 'orPrice', title: '订单总价', width: 100,style:"color: red;"}