当前位置:   article > 正文

adminlte生成php,adminlte的动态菜单实现,通过jquery来获取菜单json解析生成菜单

adminlte 数据库菜单

menu.json动态菜单json文件,可以controller动态生成

[{

"menuId": 1,

"parentId": 0,

"parentName": null,

"name": "系统管理",

"url": null,

"perms": null,

"type": 0,

"icon": "fa fa-cog",

"orderNum": 0,

"open": null,

"list": [{

"menuId": 101,

"parentId": 1,

"parentName": null,

"name": "系统设置",

"url": "/sys/main.html",

"perms": null,

"type": 1,

"icon": "fa fa-user",

"orderNum": 1,

"open": null,

"list": null

}]

},{

"menuId": 2,

"parentId": 0,

"parentName": null,

"name": "用户管理",

"url": null,

"perms": null,

"type": 0,

"icon": "fa fa-user",

"orderNum": 0,

"open": null,

"list": [{

"menuId": 201,

"parentId": 1,

"parentName": null,

"name": "用户设置",

"url": "/sys/menu.html",

"perms": null,

"type": 1,

"icon": "fa fa-user",

"orderNum": 1,

"open": null,

"list": null

}]

},{

"menuId": 3,

"parentId": 0,

"parentName": null,

"name": "权限管理",

"url": null,

"perms": null,

"type": 0,

"icon": "fa fa-user",

"orderNum": 0,

"open": null,

"list": [{

"menuId": 301,

"parentId": 3,

"parentName": null,

"name": "权限设置1",

"url": "/sys/menu1.html",

"perms": null,

"type": 1,

"icon": "fa fa-user",

"orderNum": 1,

"open": null,

"list": null

},{

"menuId": 302,

"parentId": 3,

"parentName": null,

"name": "权限设置2",

"url": "/sys/menu2.html",

"perms": null,

"type": 1,

"icon": "fa fa-user",

"orderNum": 1,

"open": null,

"list": null

}]

},{

"menuId": 4,

"parentId": 0,

"parentName": null,

"name": "PKSLO",

"url": null,

"perms": null,

"type": 0,

"icon": "fa fa-user",

"orderNum": 0,

"open": null,

"list": [{

"menuId": 403,

"parentId": 4,

"parentName": null,

"name": "控制面板",

"url": "/pkslo/dashboard.html",

"perms": null,

"type": 1,

"icon": "fa fa-user",

"orderNum": 1,

"open": null,

"list": null

},{

"menuId": 404,

"parentId": 4,

"parentName": null,

"name": "指标添加",

"url": "/pkslo/appList.html",

"perms": null,

"type": 1,

"icon": "fa fa-user",

"orderNum": 1,

"open": null,

"list": null

}]

},{

"menuId": 5,

"parentId": 0,

"parentName": null,

"name": "系统设置5",

"url": "/sys/main5.html",

"perms": null,

"type": 1,

"icon": "fa fa-user",

"orderNum": 1,

"open": null,

"list": null

}]

说明一下,type为0是菜单目录,type为1是菜单链接。

初始化菜单的initMenu()方法,由document.redy来调用。

function initMenu() {

var vmenuhtml = "";

$.getJSON("/json/menu_user.json",function(data){

//alert(JSON.stringify(data));

$.each(data,function(i,item){

var tprocess = process(item);

vmenuhtml = vmenuhtml + tprocess;

});

//alert(vmenuhtml)

//console.log(vmenuhtml);

$('.sidebar .sidebar-menu').append(vmenuhtml);

})

}

$(document).ready(function(){

initMenu();

//openCurrentMenu();

});

处理节点数据的重头方法来了,毕竟丑陋,别笑。

function process(item) {

if (item.type == 0) {

//菜单目录处理

let tsubicon0 = '';

if (item.icon != "") {

tsubicon0 = '';

}

let tsubname0 = '';

if (item.name != "") {

tsubname0 = '' + item.name + '';

}

// let t00 = '

' + tsubicon0 + tsubname0 + '';

let t00 = '

' + tsubicon0 + tsubname0 + '';

let t01 = '

  • ';

let t02 = '';

if (item.list != '') {

// 目录含有子菜单的处理

$.each(item.list, function(i,subitem){

let t0t = process(subitem);

t02 = t02 + t0t;

});

}

let t03 = '

';

let t0all = t00 + t01 + t02 + t03;

return t0all;

} else if (item.type == 1) {

// 菜单连接处理

let tsubicon1 = '';

if (item.icon != "") {

tsubicon1 = '';

}

let tsubname1 = '';

if (item.name != "") {

tsubname1 = '' + item.name + '';

}

// let t11 = '

' + tsubicon1 + tsubname1 + '';

let t11 = '

' + tsubicon1 + tsubname1 + '';

return t11;

}

}

36561f42e079fd0ea19ab34387f93fd2.png

附件:

starter02.js

$(document).ready(function(){

initMenu();

openCurrentMenu();

});

$(function (){

//alert("alert2");

});

$(document).ajaxComplete(function(){

//openCurrentMenu();

});

function openCurrentMenu() {

//var currentUrl = '';

//currentUrl = window.location.pathname

//alert(currentUrl);

$('.sidebar-menu').tree();

$('.sidebar-menu').filter(".menu-open").removeClass("menu-open");

$('.sidebar-menu').filter(".active").removeClass("active");

var a;

$('.sidebar-menu a').each(function(i){

if($(this).attr('href')==window.location.pathname) {

a=$(this);

}

});

a.parent().addClass("active");

a.parent().parent().parent().addClass("active");

a.parent().parent().parent().addClass("menu-open");

}

function initMenu() {

var vmenuhtml = "";

$.getJSON("/json/menu_user.json",function(data){

//alert(JSON.stringify(data));

$.each(data,function(i,item){

var tprocess = process(item);

vmenuhtml = vmenuhtml + tprocess;

});

//alert(vmenuhtml)

//console.log(vmenuhtml);

$('.sidebar .sidebar-menu').append(vmenuhtml);

})

}

function process(item) {

if (item.type == 0) {

//菜单目录处理

let tsubicon0 = '';

if (item.icon != "") {

tsubicon0 = '';

}

let tsubname0 = '';

if (item.name != "") {

tsubname0 = '' + item.name + '';

}

let t00 = '

' + tsubicon0 + tsubname0 + '';

let t01 = '

  • ';

let t02 = '';

if (item.list != '') {

// 目录含有子菜单的处理

$.each(item.list, function(i,subitem){

let t0t = process(subitem);

t02 = t02 + t0t;

});

}

let t03 = '

';

let t0all = t00 + t01 + t02 + t03;

return t0all;

} else if (item.type == 1) {

// 菜单连接处理

let tsubicon1 = '';

if (item.icon != "") {

tsubicon1 = '';

}

let tsubname1 = '';

if (item.name != "") {

tsubname1 = '' + item.name + '';

}

let t11 = '

' + tsubicon1 + tsubname1 + '';

return t11;

}

}

后面添加了

$(document).ajaxComplete(function(){

openCurrentMenu();

});

主要是完成

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/2023面试高手/article/detail/540973
推荐阅读
相关标签
  

闽ICP备14008679号