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

声明：这里非常感谢闲心大神，开源了非常好用的前端UI框架，layui，如有侵权请联系我。当然闲心在2.0版本的layuiAdmin已经支持了，不过是收费版的，需要的同学可以自行购买，网址：http://www.layui.com/admin/pro/

本人在做管理后台事用到了左侧的导航列表，但是管理后台进来的菜单是根据不同账户的权限，显示不同的菜单。这时候需要动态的渲染左侧的列表。但是1.0版本只是更新到2级菜单，不满足如下图的3级菜单需求，只能自己动手，改造源码

话不多说，上代码：

1.html部分，我需要一个容器用于渲染菜单

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

2.js部分

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

layui.config({

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

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

var navbar = layui.navbar();

navbar.set({

elem: '#nav',

url: "../layui/nav2.json" //数据源地址，我用了本地写的json数据

});

navbar.render();

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

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);

});

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

var url = window.location.href.replace("//", "");

var relUrl = url.substring(url.lastIndexOf("/") + 1);

//去掉参数部分

if (relUrl.indexOf("?") != -1) {

relUrl = relUrl.split("?")[0];

}

$("#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) {

$(this).parent().parent().addClass("layui-nav-itemed");

}

});

}

}

});

});

重点来了：navbar,js

/**

* navbar.js

* @author 御风 <1945199284@qq.com>

*/

layui.define(['element', 'common'], function (exports) {

"use strict";

var $ = layui.jquery,

layer = parent.layer === undefined ? layui.layer : parent.layer,

element = layui.element,

common = layui.common,

cacheName = 'tb_navbar';

var Navbar = function () {

/**

* 默认配置

*/

this.config = {

elem: undefined, //容器

data: undefined, //数据源</