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

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