layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)

layui动态渲染生成左侧动态渲染生成左侧3级菜单的方法级菜单的方法(根据后台返回数据根据后台返回数据)

今天小编就为大家分享一篇layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)，具有很好的参考价值，

希望对大家有所帮助。一起跟随小编过来看看吧

声明：这里非常感谢闲心大神，开源了非常好用的前端UI框架，layui，如有侵权请联系我。当然闲心在2.0版本的layuiAdmin

已经支持了，不过是收费版的，需要的同学可以自行购买，网址：http://www.layui.com/admin/pro/

本人在做管理后台事用到了左侧的导航列表，但是管理后台进来的菜单是根据不同账户的权限，显示不同的菜单。这时候需要

动态的渲染左侧的列表。但是1.0版本只是更新到2级菜单，不满足如下图的3级菜单需求，只能自己动手，改造源码

话不多说，上代码：

接下来是插件以及相关JS,css引入 ，注意：路径问题，换成自己本地的路径

<link rel="stylesheet" href="../layui/css/layui.css" rel="external nofollow" >

<script src="../lib/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>

<script src="../layui/layui.js"></script>

2.js部分部分

<script>

//监听选中页签添加样式

layui.config({

base: '../layui/' //navbar组件js所在目录

}).use('navbar', function() {

//下面的部分不是必须的

navbar.on('click(demo)', function(data) {

console.log(data.elem);

console.log(data.field.title);//标题

console.log(data.field.icon);//图标

console.log(data.field.href);//调转地址

layer.msg(data.field.href);

});

//给选中的页签添加选中样式（解决刷新失效问题）

$("#leftNavbar a").each(function () {

var that = this;

if ($(that).attr("href") == relUrl) {

$(that).parent().addClass("layui-this");

$(that).parents("li:eq(0)").addClass("layui-nav-itemed");

var nodes = $(that).parents("li:eq(0)").find("a .layui-nav-more");

if (nodes.length > 0) {

nodes.each(function () {

if ($(this).parents("dd:eq(0)").find("[href='" + relUrl +

"']").length > 0) {

});

</script>