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标识。然后在写模板就行
注意:上述的 {
{d.id}}、{
{d.title}} 是动态内容,它对应数据接口返回的字段名。除此之外,你还可以读取到以下额外字段:
序号:{
{ d.LAY_INDEX }} (该额外字段为 layui 2.2.0 新增)
由于模板遵循 laytpl 语法(建议细读
laytpl文档
),因此在模板中你可以写任意脚本语句(如 if else/for等):
这里的d就是接口数组的一个。他会循环的。所以这里不用你再循环了。
<script type=”text/html” id=”
testliblist
“>
{
{# if(d.id < 100){ }}
<a href=”/detail/{
{d.id}}” class=”layui-table-link”>{
{d.title}}</a>
{
{# } else { }}
{
{d.title}}(普通用户)
{
{# } }}
</script>