声明:这里非常感谢闲心大神,开源了非常好用的前端UI框架,layui,如有侵权请联系我。当然闲心在2.0版本的layuiAdmin已经支持了,不过是收费版的,需要的同学可以自行购买,网址:http://www.layui.com/admin/pro/
本人在做管理后台事用到了左侧的导航列表,但是管理后台进来的菜单是根据不同账户的权限,显示不同的菜单。这时候需要动态的渲染左侧的列表。但是1.0版本只是更新到2级菜单,不满足如下图的3级菜单需求,只能自己动的手,改造源码
话不多说,上代码:
<强> html 1.部分,我需要一个容器用于渲染菜单
& lt; div class=" layui-side layui-bg-black " id=癮dmin-side”比;
& lt; div类=發ayui-side-scroll”比;
& lt; ul类=" layui-nav layui-nav-tree " id="导航" lay-filter=把菔尽弊４? lt;/ul>
& lt;/div>
& lt;/div>
接下来是插件以及相关JS, css引入,注意:路径问题,换成自己本地的路径
& lt;链接rel="样式表" href=" https://www.yisu.com/layui/css/layui.css " rel=巴獠縩ofollow”比;
& lt;脚本src=" https://www.yisu.com/lib/jquery-1.12.2.js " type=" text/javascript " charset=皍tf - 8”祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/layui/layui.js "祝辞& lt;/script>
<强> 2. js部分
& lt; script>//监听选中页签添加样式
layui.config ({
基础:“. ./layui/'//导航组件js所在目录
})。使用(“导航”,函数(){
var导航=layui.navbar ();
navbar.set ({
elem: #导航,
url:“. ./layui/nav2。json "//数据源地址,我用了本地写的json数据
});
navbar.render ();//下面的部分不是必须的
navbar.on(点击(演示),函数(数据){
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=window.location.href url。替换("//"," ");
var relUrl=url.substring (url.lastIndexOf (“/? + 1);//去掉参数部分
如果(relUrl.indexOf (“& # 63;”) !=1) {
relUrl=relUrl.split (“& # 63;”) [0];
}
$ (" # leftNavbar”)。每个(函数(){
var=这个;
如果($ ().attr (“href”)==relUrl) {
(美元).parent () .addClass (“layui-this”);
(美元).parents(李:eq (0)) .addClass (“layui-nav-itemed”);=$ var节点().parents(“李:eq (0)”)。找到(“.layui-nav-more”);
如果节点。长度比;0) {
节点。每个(函数(){
如果美元(这).parents (dd: eq (0))。找到(“(href=" + relUrl +
“']”)。长度比;0) {
(美元).parent () .parent () .addClass (“layui-nav-itemed”);
}
});
}
}
});
});
& lt;/script>
<强>重点来了:导航,js
/* *
* navbar.js
* @author御风& lt; 1945199284 @qq.com>
*/layui.define(“元素”,“共同”,函数(出口){
“使用严格的”;
var=layui.jquery美元,
层=父母。层===定义& # 63;layui。层:parent.layer,
元素=layui.element,
常见=layui.common,
cacheName=皌b_navbar”;
var导航=function () {/* *
*默认配置
*/这一点。配置={
elem:未定义的,//容器
数据:未定义的,//数据源
url:定义,//数据源地址
类型:‘得到’,//读取方式
缓存:假的,//是否使用缓存
spreadOne:假//设置是否只展开一个二级菜单
}；
这一点。v=?.0.0”;
}；//渲染
Navbar.prototype。渲染=function () {
var _that=;
var _config=_that.config;
如果(typeof (_config.elem) !=='字符串',,typeof (_config.elem) !=='对象'){
常见的。throwError(“导航错误:elem参数未定义或设置出的错,具体设置格式请参考文档API。”);
}
var $容器;
如果(typeof (_config.elem)==='字符串'){
$=$ (" + _config容器。elem +”);
}
如果(typeof (_config.elem)==='对象'){
容器美元=_config.elem;
}
如果容器($。长度===0){
常见的。throwError(“导航错误:找不到elem参数配置的容器,请检查。”);
}
如果(_config。未定义的& & _config data=https://www.yisu.com/zixun/==rl===未定义){
常见的。throwError(“导航错误:请为导航配置数据源。)
}
如果(_config。数据!==未定义的,,typeof (_config.data)==='对象'){
var html=getHtml (_config.data);
美元container.html (html);
element.init ();
_that.config。elem=$容器;
其他}{
如果(_config.cached) {
var cacheNavbar=layui.data (cacheName);
如果(cacheNavbar。导航条===未定义){
. ajax({美元
类型:_config.type,
url: _config.url,
异步:假的,//_config.async,
数据类型:json,
成功:函数(因此,地位,xhr) {//添加缓存
layui。数据(cacheName, {
关键:“导航”,
价值:结果
});
var html=getHtml(结果);
美元container.html (html);
element.init ();
},
错误:函数(xhr、状态、错误){
常见的。msgError('导航错误:' +错误);
},
完成:函数(xhr、状态){
_that.config。elem=$容器;
}
});
其他}{
var html=getHtml (cacheNavbar.navbar);
美元container.html (html);
element.init ();
_that.config。elem=$容器;
}
其他}{//清空缓存
layui。数据(cacheName, null);
. ajax({美元
类型:_config.type,
url: _config.url,
异步:假的,//_config.async,
数据类型:json,
成功:函数(因此,地位,xhr) {
var html=getHtml(结果);
美元container.html (html);
element.init ();
},
错误:函数(xhr、状态、错误){
常见的。msgError('导航错误:' +错误);
},
完成:函数(xhr、状态){
_that.config。elem=$容器;
}
});
}
}//只展开一个二级菜单
如果(_config.spreadOne) {
var ul=container.children美元(“ul”);
美元ul.find (“li.layui-nav-item”)。每个(函数(){
(美元)。(“点击”,函数(){
美元(这).siblings () .removeClass (“layui-nav-itemed”);
});
});
}
返回_that;
}；/* *
*配置导航
* @param}{对象选择
*/Navbar.prototype。设置=function(选项){
var=这个;
that.config。数据=https://www.yisu.com/zixun/undefined;
美元。扩展(真的,。配置选项);
返回;
}；
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
