关于将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);
第一步,把下面代码放入到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);
相关文章推荐
- 关于handlebars.js模板引擎
- 关于模板引擎handlebars.js基本用法
- 关于如何将action中的信息已弹框的形式在jsp页面弹出
- 关于thinkphp模板引擎中变量输入的思考
- //layui的模板引擎和分页组合用
- JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
- //layui的模板引擎和分页组合用
- thinkphp—关于模板时间的获取(模板引擎是Smarty),该如何操作
- layui分页和模板引擎
- 关于模板引擎2--望批评指正
- layui模板引擎和Tab标签一起使用
- 关于前段模板引擎
- 详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
- Layui laytpl模板引擎的学习
- 关于js模板引擎 arttemplate 的使用
- 关于js artTemplate模板引擎多数据注入的理解,与应用。
- layui源码详细分析系列之模板引擎
- 关于模板引擎handlebars.js基本用法
- 关于 underscore 中模板引擎的应用演示样例
- 关于expres模板引擎,Function,with