layui中的tpljs实现的左侧菜单动态无限极渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<style type="text/css">
.box{border:1px solid #ccc;margin:2px;padding:5px;margin-left:20px;}
ul li{
list-style-type: disc;
}
ul li li li{
padding-left: 5px;
}
</style>
<body>
<div class="layui-container">
<div id="view"></div>
</div>
<script id="demo" type="text/html">
{{# var fn = function(a){ var result=""; result=layui.laytpl(childtpl.innerHTML).render(a); return result; }; }}
<h3>{{ d.title }}</h3>
<div class="box">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
{{# layui.each(d.list, function(index, item){ }}
<li class="layui-nav-item">
<a href="javascript:;">{{item.modname}}</a>
{{# if(item.child!=null){ }} {{ fn(item.child) }} {{# } }}
</li>
{{# }); }} {{# if(d.list.length === 0){ }} 无数据 {{# } }}
</div>
</ul>
</script>
<script id="childtpl" type="text/html">
{{# var fn = function(a){ var result=""; result=layui.laytpl(childtpl.innerHTML).render(a); return result; }; }}
<ul class="layui-nav-child">
{{# layui.each(d, function(index, item){ }}
<li class="layui-nav-item">
<a href="javascript:;">{{item.modname}}</a>
{{# if(item.child!=null){ }} {{ fn(item.child) }} {{# } }}
</li>
{{# }); }}
</ul>
</script>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
layui.use(["laytpl", "element"], function() {
var laytpl = layui.laytpl,
$ = layui.jquery,
element = layui.element;
var data = {
"title": "Layui常用模块",
"list": [
{ "modname": "弹层", "alias": "layer", "site": "layer.layui.com" },
{
"modname": "表单",
"alias": "form",
"site": "layui.com",
child: [{
"modname": "子表单",
"alias": "c-form",
child: [
{ "modname": "孙-竖排表单", "alias": "s-V-form" },
{
"modname": "孙-横排表单",
"alias": "s-H-form",
child: [
{ "modname": "孙-孙-竖排表单","alias": "s-V-form" }
]
}
]
}]
}, { "modname": "弹层", "alias": "layer", "site": "layer.layui.com" }, {
"modname": "表单",
"alias": "form",
"site": "layui.com",
child: [{
"modname": "子表单",
"alias": "c-form",
child: [
{ "modname": "孙-竖排表单", "alias": "s-V-form" }, { "modname": "孙-横排表单", "alias": "s-H-form" }
]
}]
}
]
}
var getTpl = demo.innerHTML,
view = document.getElementById('view');
laytpl(getTpl).render(data, function(html) {
view.innerHTML = html;
element.render();
});
});
</script>
</body>
</html>
本文原作者:https://fly.layui.com/jie/45471/