layui表格使用templet模板。

  • Post author:
  • Post category:其他


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>



版权声明:本文为qq_33769914原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。