AdminLTE实现动态菜单
前言
本篇内容基于上一篇AdminLTE实现局部刷新，在完成局部刷新后，不满足其左侧菜单栏的写死状态，希望后期能从数据库读取动态生成，故有了本篇尝试。
正文
目前依旧是在adminlte.js中做的修改。菜单JSON样式
var menuJson=[{
"name": "用户管理",
"controller":"#",
"child": [{
"name": "用户概览",
"controller":"user/home.do",
},{
"name": "添加用户",
"controller":"user/add.do",
}]
},{
"name": "文章管理",
"controller":"#",
"child": [{
"name": "文章概览",
"controller":"post/home.do",
},{
"name": "添加文章",
"controller":"post/add.do",
}]
}];
菜单初始化方法menuInit
这里面涉及到对菜单的拼接填充等操作 function menuInit() {
var menu = null;
var html = null;
var chidLen = null;
var child = null;
for (var i = 0; i < menuJson.length; i++) {
menu = menuJson[i];
if(i==0){
html = $(' <li menu-id="' + i + '" class="active treeview "><li>');
}else{
html = $(' <li menu-id="' + i + '" class="treeview "><li>');
}
$(".sidebar .sidebar-menu").append(html);
html = $(' <a href="'+menu.controller+'"> <i class="fa fa-dashboard"></i> <span>'+menu.name+'</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul menuUl-id="'+i+'" class="treeview-menu"> </ul>');
$('[menu-id="'+i+'"]').append(html);
chidLen = menu.child.length;
for (var j=0;j<chidLen;j++){
child = menu.child[j];
if(i==0&&j==0){
html = $('<li class="active"><a href="javascript:void(0);" menu-controller="'+child.controller+'"><i class="fa fa-circle-o"></i> '+child.name+'</a></li>');
}else{
html = $('<li class=""><a href="javascript:void(0);" menu-controller="'+child.controller+'"><i class="fa fa-circle-o"></i> '+child.name+'</a></li>');
}
$('[menuUl-id="'+i+'"]').append(html);
}
}
$(Selector.data).each(function () {
Plugin.call($(this))
})
$(".sidebar-menu li:first ul li:first a").click();
}
菜单初始化方法menuInit调用位置
该出是替换了原本菜单的初始化方法。可通过查询 Tree Data API 到达。 // Tree Data API
// =============
$(window).on('load', function () {
menuInit();
})
后记
关键代码已全部贴出，一般略微看看是可以自己写出来的。最后的代码demo是用于给伸手党哒。为照顾纯前端同学，地址已改为纯前端实现。-2017-08-21
DEMO下载
tip：若评论后看不到，刷新下就可以了。[ttr2v]
[/ttr2v]
源码加群也可直接获取啦：
预览
除特别注明外，本站所有文章均为 windcoder 原创，转载请注明出处来自： adminlteshixiandongtaicaidan
Loading comments...
预览
111
看看怎么样
看看怎么样
学习下，多谢！
学习下，多谢！
看起来很简单！
学习
zdh39077 thx,正需要