类型:String,默认值:无
在默认情况下,单元格的内容是完全按照数据接口返回的content原样输出的,如果你想对某列的单元格添加链接等其它元素,你可以借助该参数来轻松实现。这是一个非常实用且强大的功能,你的表格内容会因此而丰富多样。
templet 提供了三种使用方式,请结合实际场景选择最合适的一种:
- 如果自定义模版的字符量太大,我们推荐你采用【方式一】;
- 如果自定义模板的字符量适中,或者想更方便地调用外部方法,我们推荐你采用【方式二】;
- 如果自定义模板的字符量很小,我们推荐你采用【方式三】
方式一:绑定模版选择器。
table.render({ cols: [[ {field:'title', title: '文章标题', 200, templet: '#titleTpl'} //这里的templet值是模板元素的选择器 ,{field:'id', title:'ID', 100} ]] }); 等价于: <th lay-data="{field:'title', 200, templet: '#titleTpl'}">文章标题</th> <th lay-data="{field:'id', 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 }} (该额外字段为 layui 2.2.0 新增) 由于模板遵循 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>
方式二:函数转义。自 layui 2.2.5 开始,templet 开始支持函数形式,函数返回一个参数 d,包含接口返回的所有字段和数据。如下所示:
table.render({ cols: [[ {field:'title', title: '文章标题', 200 ,templet: function(d){ return 'ID:'+ d.id +',标题:<span style="color: #c00;">'+ d.title +'</span>' } } ,{field:'id', title:'ID', 100} ]] });
方式三:直接赋值模版字符。事实上,templet 也可以直接是一段 html 内容,如:
templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>'
注意:这里一定要被一层 <div></div> 包裹,否则无法读取到模板