您的位置:首页 > 产品设计 > UI/UE

关于将Layui的模板引擎放入到弹框中,弹出!

2018-01-10 11:47 274 查看
    没有采用jq的封装,所以看起来有点不优雅,实现后的效果:



第一步,把下面代码放入到HTML的末尾

<div class="tablexs" style="display: none;" id="tablexs"></div>

<!-- 详情模板 -->
<script id="tablexs_text" type="text/html">
<table class="layui-table">
<colgroup>
<col width="130">
<col width="200">
<col width="130">
<col>
</colgroup>
<tbody>
{{# layui.each(d.list, function(index, row){ }}
<tr>
<td align="right" class="qiand">{{ row.namex }}</td>
{{# if(row.valuex != null){ }}
<td>{{ row.valuex }}</td>
{{# } else {}}
<td></td>
{{# } }}
<td align="right" class="qiand">{{ row.namey }}</td>
{{# if(row.valuey != null){ }}
<td>{{ row.valuey }}</td>
{{# } else {}}
<td></td>
{{# } }}
</tr>
{{# }); }}

{{# if(d.length === 0){ }}
<tr><td colspan="4">无数据</td></tr>
{{# } }}
</tbody>
</table>
</script>

第二步,引入JS方法,//弹出框 _title抬头标题,_area_arr弹出框宽高数组,_id唯一性,_mb是模板的ID(这个地方传ID不要给双引号),listdata是从后台取过来的数据,安装自己的需要重新组合了一下。
function xq(_title,_area_arr,_id,_mb,listdata){
//弹出框
layer.open({
type: 1,
title:_title,
area: _area_arr, //宽高['620px', '285px']
content:$("#"+_id)
});

//获取模板
var getTpl = _mb.innerHTML

layui.use('laytpl', function(){
var laytpl = layui.laytpl;

//渲染模板
laytpl(getTpl).render(listdata, function(html){
document.getElementById(_id).innerHTML = html;
});

});

}

第三步,引入JS
//重组数据
var listdata = {"list":[{"namex":"用户账号","valuex":data.yhdh,"namey":"姓名","valuey":data.xm},{"namex":"上次登录时间","valuex":dateFormat(data.scdlsj),"namey":"上次登录IP","valuey":data.scdlip},{"namex":"部门名称","valuex":data.bmmc,"namey":"角色","valuey":data.rname},{"namex":"状态","valuex":dazt(),"namey":"","valuey":""}]
}

xq("详情",['620px','235px'],"tablexs",tablexs_text,listdata);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: