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