1.定义容器(用于填充渲染后的script)
<div id="view" style="display: none;"></div>
2.定义script模板
<script type="text/html" id="myModal">
<div style="padding: 20px;">
<form id="userForm" class="layui-form" lay-filter="editWin">
<input type="hidden" id="uid" name="uid" value={
{=d.id}}>
<div class="layui-form-item">
<label class="layui-form-label">角色类别:</label>
<div class="layui-input-block">
<select id="roleTypeSelect" class="layui-select">
<option value="-1">请选择角色类别</option>
{
{# layui.each(d.roleTypeList, function(index, item){ }}
{
{# if(d.roleType == item.dicVal ){ }}
<option value="{
{ item.dicVal}}" selected="selected">{
{ item.dicName}}</option>
{
{# }else{ }}
<option value="{
{ item.dicVal}}" >{
{ item.dicName}}</option>
{
{# } }}
{
{# }); }}
</select>
</div>
</div>
</form>
</div>
</script>
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.layui模板语法laytpl如下
参考地址
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 }}
{
{# }); }}