layui动态渲染⽣成左侧3级菜单的⽅法（根据后台返回数
据）
本⼈在做管理后台事⽤到了左侧的导航列表，但是管理后台进来的菜单是根据不同账户的权限，显⽰不同的菜单。这时候需要动态的渲染左侧的列表。但是1.0版本只是更新到2级菜单，不满⾜如下图的3级菜单需求，只能⾃⼰动⼿，改造源码
话不多说，上代码：
1.html部分，我需要⼀个容器⽤于渲染菜单
<div class="layui-side layui-bg-black" id="admin-side">
<div class="layui-side-scroll">
<ul class="layui-nav layui-nav-tree" id="nav" lay-filter="demo"></ul>
</div>
</div>
接下来是插件以及相关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>
//监听选中页签添加样式
base: '../layui/' //navbar组件js所在⽬录
}).use('navbar', function() {
var navbar = layui.navbar();
navbar.set({
elem: '#nav',
url: "../layui/nav2.json" //数据源地址，我⽤了本地写的json数据
});
//下⾯的部分不是必须的
<('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.place("//", "");
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");
}
});
}
}
});
});
</script>
重点来了：navbar,js
/**
* navbar.js
* @author 御风 <1945199284@qq>
*/
layui.define(['element', 'common'], function (exports) {
"use strict";
var $ = layui.jquery,
layer = parent.layer === undefined ? layui.layer : parent.layer,
element = layui.element,
common = layuimon,
cacheName = 'tb_navbar';
var Navbar = function () {
/**
* 默认配置
*/
elem: undefined, //容器
data: undefined, //数据源
url: undefined, //数据源地址
type: 'GET', //读取⽅式
cached: false, //是否使⽤缓存
spreadOne: false //设置是否只展开⼀个⼆级菜单
};
this.v = '1.0.0';
};
//渲染
der = function () {
var _that = this;
var _config = _fig;
if (typeof (_config.elem) !== 'string' && typeof (_config.elem) !== 'object') {
common.throwError('Navbar error: elem参数未定义或设置出错，具体设置格式请参考⽂档API.'); }
var $container;
if (typeof (_config.elem) === 'string') {
$container = $('' + _config.elem + '');
}
if (typeof (_config.elem) === 'object') {
$container = _config.elem;
}
if ($container.length === 0) {
common.throwError('Navbar error：不到elem参数配置的容器，请检查.');
}
if (_config.data === undefined && _config.url === undefined) {
common.throwError('Navbar error：请为Navbar配置数据源.')
}
if (_config.data !== undefined && typeof (_config.data) === 'object') {
var html = getHtml(_config.data);
$container.html(html);
element.init();
_fig.elem = $container;
} else {
if (_config.cached) {
var cacheNavbar = layui.data(cacheName);
if (cacheNavbar.navbar === undefined) {
$.ajax({
type: _pe,
url: _config.url,
async: false, //_config.async,
dataType: 'json',
success: function (result, status, xhr) {
//添加缓存
layui.data(cacheName, {
key: 'navbar',
value: result
});
var html = getHtml(result);
$container.html(html);
element.init();
},
error: function (xhr, status, error) {
common.msgError('Navbar error:' + error);
},
complete: function (xhr, status) {
_fig.elem = $container;
}
});
} else {
var html = getHtml(cacheNavbar.navbar);
$container.html(html);
element.init();
_fig.elem = $container;
}
} else {
//清空缓存
layui.data(cacheName, null);
$.ajax({
type: _pe,
url: _config.url,
async: false, //_config.async,
dataType: 'json',
success: function (result, status, xhr) {
var html = getHtml(result);
$container.html(html);
element.init();
},
error: function (xhr, status, error) {
common.msgError('Navbar error:' + error);
},
complete: function (xhr, status) {
_fig.elem = $container;
}
});
}
}
//只展开⼀个⼆级菜单
if (_config.spreadOne) {
var $ul = $container.children('ul');
$ul.find('li.layui-nav-item').each(function () {
$(this).on('click', function () {
$(this).siblings().removeClass('layui-nav-itemed');  });
});
}
return _that;
};
/**
* 配置Navbar
* @param {Object} options
*/
Navbar.prototype.set = function (options) {
var that = this;
$.extend(true, fig, options);
return that;
};
/**
* 绑定事件
* @param {String} events
* @param {Function} callback
*/
= function (events, callback) {
var that = this;
var _con = fig.elem;
if (typeof (events) !== 'string') {
common.throwError('Navbar error：事件名配置出错，请参考API⽂档.');
}
var lIndex = events.indexOf('(');
var eventName = events.substr(0, lIndex);
var filter = events.substring(lIndex + 1, events.indexOf(')'));
if (eventName === 'click') {
if (_con.attr('lay-filter') !== undefined) {
_con.children('ul').find('li').each(function () {
var $this = $(this);
if ($this.find('dl').length > 0) {
var $dd = $this.find('dd').each(function () {
$(this).on('click', function () {
var $a = $(this).children('a');
var href = $a.data('url');
var icon = $a.children('i:first').data('icon');
var title = $a.children('cite').text();
var data = {
elem: $a,
field: {
href: href,
icon: icon,
title: title
}
}
callback(data);
});
});
} else {
$('click', function () {
var $a = $this.children('a');
var href = $a.data('url');
var icon = $a.children('i:first').data('icon');
var title = $a.children('cite').text();
var data = {
elem: $a,
field: {
href: href,
icon: icon,
title: title
}
}
callback(data);
});
}
});
}
}
};
/**
* 清除缓存
*/
Navbar.prototype.cleanCached = function () {
layui.data(cacheName, null);
};
/**
* 获取html字符串
* @param {Object} data
*/
function getHtml(data) {
var ulHtml = '<ul class="layui-nav layui-nav-tree beg-navbar">';
for (var i = 0; i < data.length; i++) {
if (data[i].spread) {
ulHtml += '<li class="layui-nav-item layui-nav-itemed">';
} else {
ulHtml += '<li class="layui-nav-item">';
}
if (data[i].children !== undefined && data[i].children !== null && data[i].children.length > 0) {
ulHtml += '<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" >' + data[i].title;  ulHtml += '<span class="layui-nav-more"></span>';
ulHtml += '</a>';
ulHtml += '<dl class="layui-nav-child">';
//⼆级菜单
for (var j = 0; j < data[i].children.length; j++) {
//是否有孙⼦节点
if (data[i].children[j].children !== undefined && data[i].children[j].children !== null && data[i].children[j].children.length > 0) {
ulHtml += '<dd>';
ulHtml += '<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" >' + data[i].children[j].title;  ulHtml += '<span class="layui-nav-more"></span>';
ulHtml += '</a>';
//三级菜单
ulHtml += '<dl class="layui-nav-child">';
var grandsonNodes = data[i].children[j].children;
for (var k = 0; k < grandsonNodes.length; k++) {
ulHtml += '<dd>';
ulHtml += '<a href="'+ grandsonNodes[k].href +'" rel="external nofollow" >' + grandsonNodes[k].title + '</a>';
ulHtml += '</dd>';
}
ulHtml += '</dl>';
ulHtml += '</dd>';
}else{
ulHtml += '<dd>';
ulHtml += '<a href="'+data[i].children[j].href+'" rel="external nofollow" >' + data[i].children[j].title;
ulHtml += '</a>';
ulHtml += '</dd>';
}
//ulHtml += '<dd title="' + data[i].children[j].title + '">';
}
layui下载
ulHtml += '</dl>';
} else {
var dataUrl = (data[i].href !== undefined && data[i].href !== '') ? 'data-url="' + data[i].href + '"' : '';
//ulHtml += '<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" ' + dataUrl + '>';
ulHtml += '<a href="' + data[i].href + '" rel="external nofollow" ' + dataUrl + '>';
if (data[i].icon !== undefined && data[i].icon !== '') {
if (data[i].icon.indexOf('fa-') !== -1) {
ulHtml += '<i class="fa ' + data[i].icon + '" aria-hidden="true" data-icon="' + data[i].icon + '"></i>';
} else {
ulHtml += '<i class="layui-icon" data-icon="' + data[i].icon + '">' + data[i].icon + '</i>';
}
}
ulHtml += '<cite>' + data[i].title + '</cite>';
ulHtml += '</a>';
}
ulHtml += '</li>';
}
ulHtml += '</ul>';
return ulHtml;
}
var navbar = new Navbar();
exports('navbar', function (options) {
return navbar.set(options);
});
});
公共配置common.js
/**
* common.js
* @author 御风 <1945199284@qq>
*/
layui.define(['layer'], function(exports) {
"use strict";
var $ = layui.jquery,
layer = layui.layer;
var common = {
/**
* 抛出⼀个异常错误信息
* @param {String} msg
*/
throwError: function(msg) {
throw new Error(msg);
return;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。