layui循环遍历数据_layui.laytpl渲染模板，遍历、输出、判断

事先引用加载layui的laytpl模块，此处不作说明

1.定义容器(用于填充渲染后的script)

2.定义script模板

角色类别:

请选择角色类别

{{# layui.each(d.roleTypeList, function(index, item){ }}

{{# if(d.roleType == item.dicVal ){ }}

{{ item.dicName}}

{{# }else{ }}

{{ item.dicName}}

{{# } }}

{{# }); }}

3.laytpl动态绑定渲染script

// 此处模拟展示data数据

{

"roleTypeList" : [

{"dicVal" : "01" , "dicName" : "管理员"},

{"dicVal" : "02" , "dicName" : "游客"},

{"dicVal" : "03" , "dicName" : "普通用户"},

],

"id" : 7,

"roleType" : "03"

}

var scriptHtml = document.getElementById("myModal").innerHTML;

var view = document.getElementById("view");

// 通过data数据渲染script模板

laytpl(scriptHtml).render(data, function (html) {

view.innerHTML = html;

});

// layui弹框,类似model模态框

layer.open({

type: 1,

title: '弹框名称',

offset: '20px',

area: ['500px', '330px'],

closeBtn: false,

content: $("#view")

})

form.render('select'); // layui中动态设置html的某个类型标签时，需要layui.render('type')刷新

4.效果图

总结:

laytpl标签: {{# }}

参数格式:

{

"field" : "值",

"keyList" : [

{"field":"值1"},

{"field":"值2"}

]

}

// 模板中使用d表示传入参数

1.输出字段,不转义html

{{ d.field }}

2.输出字段,转义html

{{= d.field }}

3.js表达式

{{# if(d.field=="XXX"){ }}

// 输出值

{{# } }}

4.遍历集合

{{# layui.each(d.keyList, function(index, item){ }}

{{# item.field }}

{{# }); }}