layui表格-template模板的三種用法

問題情境：

layui中將數據庫數據通過layui table渲染到前端表格，非常簡單，但是如果數據庫存儲的信息不能被直接展示，項目中該頁面有好幾個這樣的字段，會員類型，支付類型，會員時長還有平台類型；例如數據庫有一個類型字段：1和2,1表示鑽石會員，2表示至尊會員，前端顯然不能直接顯示1和2，而是應該根據后端返回的數字進行判斷，展示相應的內容。layui table的自定義模板功能能非常方便地解決這個問題；

 

 

方法一：函數轉義

所謂函數轉義，就是在表格cols的對應列中直接寫一段函數：

{ field: 'vip_type', title: '會員類型' , templet: function (d) {
    if(d.vip_type == 1){
        res = "鑽石會員"
    }else{
        res = "至尊會員"
    }
        return res;
    }
}, 

這樣的寫法，簡單直接，缺點是復用性差，有可能導致代碼冗余。

方法二：綁定模板選擇器

下述是templet對應的模板，它可以存放在頁面的任意位置。模板遵循於 laytpl 語法，可讀取到返回的所有數據。

<script type="text/html" id="typeTpl">
    {{#  if(d.vip_type ==1 ){ }}
    <p>鑽石會員</p>
    {{#  } else { }}
    <p>至尊會員</p>
    {{#  } }}
</script>

table.render中的對應列templet內容中直接引用上面的模板即可

{
    field: 'vip_type',
    title: '會員類型',
    templet: '#typeTpl'
}

這樣的話，如果有多處表格使用同一個模板，代碼復用性將得到加強。

方法三：直接賦值模版字符

templet: '<div><a href="" class="layui-table-link">{{d.title}}</a></div>'
 
注意：這里一定要被一層 <div></div> 包裹，否則無法讀取到模板

 

 write by:tuantuan