hi,你好!欢迎访问本站!登录
当前位置:首页 - 学无止境 - 正文 前路浩浩荡荡,万事尽可期待!

layui数据表格templet - 自定义列模板

2021-07-23学无止境南夏104°c
A+ A-

方式一:绑定模版选择器。

table.render({
cols: [[
{field:'title', title: '文章标题', width: 200, templet: '#titleTpl'} //这里的templet值是模板元素的选择器
,{field:'id', title:'ID', width:100}
]]
});

等价于:
<th lay-data="{field:'title', width: 200, templet: '#titleTpl'}">文章标题</th>
<th lay-data="{field:'id', width:100}">ID</th>

下述是templet对应的模板,它可以存放在页面的任意位置。模板遵循于 laytpl 语法,可读取到返回的所有数据

<script type="text/html" id="titleTpl">
<a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
</script>

注意:上述的 {{d.id}}、{{d.title}} 是动态内容,它对应数据接口返回的字段名。除此之外,你还可以读取到以下额外字段:
     序号:{{ d.LAY_INDEX }} 
     当前列的表头信息:{{ d.LAY_COL }} (layui 2.6.8 新增)

由于模板遵循 laytpl 语法(建议细读 laytpl文档 ),因此在模板中你可以写任意脚本语句(如 if else/for等):
<script type="text/html" id="titleTpl">
{{#  if(d.id < 100){ }}
<a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
{{#  } else { }}
{{d.title}}(普通用户)
{{#  } }}
</script>



  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
layui数据表格templet - 自定义列模板

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
未定义标签

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>