java adminlte 使用_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 = $('

');

}else{

html = $('

');

}

$(".sidebar .sidebar-menu").append(html);

html = $(' '+menu.name+'

$('[menu-id="'+i+'"]').append(html);

chidLen = menu.child.length;

for (var j=0;j

child = menu.child[j];

if(i==0&&j==0){

html = $('

'+child.name+'');

}else{

html = $('

'+child.name+'');

}

$('[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();

})