laytpl实现左侧菜单动态无限极渲染

最新推荐文章于 2023-07-12 09:28:15 发布

程序辕日记

最新推荐文章于 2023-07-12 09:28:15 发布

阅读量903

点赞数

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/

程序辕日记

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
laytpl实现左侧菜单动态无限极渲染

layui中的tpljs实现的左侧菜单动态无限极渲染<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="layui/css/layui.css"> &l...
复制链接

扫一扫