使用模板引擎遍历左侧导航栏

分享 未结 2 148
MrRainbow
悬赏:80飞吻
接触layui还不是太久,大家多多指教[哈哈]

JS代码部分:
/*
* 遍历导航栏
*/
window.navMeun = function(){
var navUrl = "../layuiadmin/json/nav.json";
admin.req({
url: navUrl
,type: 'get'
,done: function(res){
//开始模板引擎
var data = {
list: res.list
};
var getTpl = document.getElementById('navMeun').innerHTML;
laytpl(getTpl).render(data, function(html){
//"LAY-system-side-menu"为导航栏容器ul上的id
document.getElementById('LAY-system-side-menu').innerHTML = html;
});
//重新渲染nav || 这里要引入layui的element.js哦,不然你重新渲染方法会报错的哈
element.render('nav');
//End
}
});
};
二:模板代码
<!-- 遍历导航栏 -->
<script id="navMeun" type="text/html">
{{# layui.each(d.list, function(index, item){ }}
<li data-name="component" class="layui-nav-item">
<a href="javascript:;" lay-tips="{{ item.menuName }}" lay-direction="2">
<i class="layui-icon {{ item.imagePath }}"></i>
<cite>{{ item.menuName }}</cite>
</a>
<dl class="layui-nav-child">
<!-- 这里为二级子栏目 -->
{{# layui.each(item.subMenus, function(index, item){ }}
<dd data-name="{{ item.menuName }}">
<a lay-href="{{ item.menuUrl }}">{{ item.menuName }}</a>
</dd>
{{# }); }}
</dl>
</li>
{{# }); }}
</script>
三:呈现渲染结果的容器(也就是导航栏的容器ul)
<ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu" lay-filter="layadmin-system-side-menu"></ul>
四:效果图





五:json截图




(备注:我用的是layuiAdmin[哈哈]
回帖