layui表格使用templet模板。

           table.render({
                       elem: '#test',
                       data: data,
                       limit: 20,
                       cols: [
                           [{
                               type: 'checkbox'
                           }, {
                               title: '题目',
                               templet: '#testliblist',
                               minWidth: 500
                           }, {
                               field: 'grade',
                               title: '错因',
                               minWidth: 80
                           }, {
                               field: 'subject',
                               title: '学科',
                               minWidth: 80
                           }, {
                               field: 'studysection',
                               title: '试题来源',
                               minWidth: 100
                           }, {
                               field: 'questiontype',
                               title: '做题时间',
                               minWidth: 100,
                               templet: function(res) {

                    return res.optime.substring(0, 10);
                             }
                           }]
                       ],

                         page: false
                   });
               }

表格中使用templet有两种方式。

1.常见的下面的那种，只是简单的给接口传来的数据转换成我们想要显示的格式。或者是传的图片的src。我们加上img标签修饰。

2。如果是那种样式样式内容并且由好多接口参数组成的一列。就要使用html的模板了，像上面的题目，直接用了模板的id标识。然后在写模板就行

layui表格使用templet模板。

注意：上述的 {{d.id}}、{{d.title}} 是动态内容，它对应数据接口返回的字段名。除此之外，你还可以读取到以下额外字段：
序号：{{ d.LAY_INDEX }} （该额外字段为 layui 2.2.0 新增）

由于模板遵循 laytpl 语法（建议细读 laytpl文档 ），因此在模板中你可以写任意脚本语句（如 if else/for等）：

这里的d就是接口数组的一个。他会循环的。所以这里不用你再循环了。

{{# if(d.id < 100){ }}

<a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>

{{# } else { }}

{{d.title}}(普通用户)

{{# } }}

</script>

秒客网

layui表格使用templet模板。

相关文章