zoukankan      html  css  js  c++  java
  • 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> 包裹,否则无法读取到模板
  • 相关阅读:
    周总结(第十一周)
    周总结(第十周)
    周总结(第九周)
    周总结(第八周)
    周总结(第七周)
    周总结(第六周)
    周总结(第5周)
    周总结(第四周)
    周记
    补周记
  • 原文地址:https://www.cnblogs.com/lgx5/p/14198499.html
Copyright © 2011-2022 走看看