1. 程式人生 > 實用技巧 >layui表格-template模板的三種用法

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

方法1:函式轉義

所謂函式轉義,就是在表格cols的對應列中直接寫一段函式:

1 { field: 'vip_type', title: '會員型別' , templet: function (d) {
2     if(d.vip_type == 1){
3         res = "鑽石會員"
4     }else{
5         res = "至尊會員"
6     }
7         return res;
8     }
9 }

這樣的寫法,簡單直接,缺點是複用性差,有可能導致程式碼冗餘。

方法2:繫結模板選擇器

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

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

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

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

這樣的話,如果有多處表格使用同一個模板,程式碼複用性將得到加強。

方法3:直接賦值模版字元

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