admin.json文件(可以无限添加子菜单)
admin.json
[
{
"image": "glyphicon glyphicon-home",//菜单前的图标
"name": "设备管理",
"submenu": [
{
"image": "glyphicon glyphicon-cloud",
"name": "设备分类",
"submenu": [
{
"image": "glyphicon glyphicon-off",
"name": "电源管理",
"url": "html/Node/creditCardPower.html"
},
{
"image": "glyphicon glyphicon-lock",
"name": "门禁管理",
"url": "html/Guard/guardList.html"
},
{
"image": "glyphicon glyphicon-folder-open",
"name": "物品管理",
"url": "html/goods/goodsList.html"
},
{
"image": "glyphicon glyphicon-facetime-video",
"name": "视频管理",
"url": "html/monitor/monitorList.html"
}
]
}
]
},
{
"image": "glyphicon glyphicon-cog",
"name": "系统设置",
"submenu": [
{
"image": "glyphicon glyphicon-heart",
"name": "用户管理",
"submenu": [
{
"image": "glyphicon glyphicon-align-justify",
"name": "用户列表",
"url": "html/User/userList.html"
},
{
"image": "glyphicon glyphicon-random",
"name": "组织机构",
"url": "html/dept/framework.html"
}
]
},
{
"image": "glyphicon glyphicon-wrench",
"name": "设备管理",
"submenu": [
{
"image": "glyphicon glyphicon-edit",
"name": "设备参数",
"url": "html/Device/DeviceList.html"
},
{
"image": "glyphicon glyphicon-edit",
"name": "物品库",
"url": "html/equgoods/equGoodsList.html"
}
]
}
]
},
{
"image": "glyphicon glyphicon-list",
"name": "日志管理",
"submenu": [
{
"image": "glyphicon glyphicon-list-alt",
"name": "登入日志",
"url": "html/Log/loginlog.html"
},
{
"image": "glyphicon glyphicon-tag",
"name": "设备日志",
"url": "html/Log/hardwarelog.html"
}
]
},
{
"image":"glyphicon glyphicon-list",
"name":"设备管理",
"submenu":[
{
"image":"glyphicon glyphicon-list-alt",
"name":"设备管理",
"url":"html/mechanism/mechanism.html"
}
]
}
]
2、读取json文件的service层实现
package com.dskj.service.impl;
import java.io.File;
import java.util.Scanner;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.core.io.Resource;
import org.springframework.stereotype.Service;
import com.dskj.common.util.StringUtil;
import com.dskj.service.ReadJsonService;
@Service
public class ReadJsonServiceImpl implements ReadJsonService{
@Value(value="classpath:json/admin.json")
private Resource dataAdmin;
@Value(value="classpath:json/user.json")
private Resource dataUser;
public String getData(String fileName){
if(StringUtil.isEmpty(fileName)){
throw new NullPointerException();
}
String jsonData = null;
try {
File file = null; if(fileName.equals("admin.json")){
file = dataAdmin.getFile();
}else{
file = dataUser.getFile();
}
jsonData = this.jsonRead(file);
} catch (Exception e) {
e.printStackTrace();
}
return jsonData;
}
/**
* 读取文件类容为字符串
* @param file
* @return
*/
private String jsonRead(File file){
Scanner scanner = null;
StringBuilder buffer = new StringBuilder();
try {
scanner = new Scanner(file, "utf-8");
while (scanner.hasNextLine()) {
buffer.append(scanner.nextLine());
}
} catch (Exception e) {
} finally {
if (scanner != null) {
scanner.close();
}
}
return buffer.toString();
}
}
3、controller对应的代码片段
@RequestMapping("")
public ModelAndView main() {
ModelAndView model = null;
String jsonFileName = null;
SysUser currentUser = (SysUser) ContextUtil.getSession().getAttribute("currentUser");
if ("admin".equals(currentUser.getUsername())) {
model = new ModelAndView("header1");
jsonFileName = "admin.json";//根据文件名判断读取具体json文件
} else {
model = new ModelAndView("headerUser");
jsonFileName = "user.json";//根据文件名判断读取具体json文件
}
String menue = readJsonServiceImpl.getData(jsonFileName);
model.addObject("menue", menue);
return model;
}
4、html页面 将jsonarray转换成js对象
$(function() {
var menue = JSON.parse('<%=request.getAttribute("menue")%>');
console.info(menue);
createMenu(menue);//调用下边的方法生成动态菜单
5、对js对象遍历 $.append动态添加到对应页面
function createMenu(menue){
/* 一级菜单 */
$.each(menue,function(i,v){
var menu1 = '<li class="active"><a href="javaScript:;">';
/* menu1 += '<span class="glyphicon glyphicon-home"></span>'; */
menu1 += '<span class=' + '\'' + v.image + '\'' + '>' + '</span>';
menu1 += '<span style="margin-left: 10px;">' + v.name + '</span><span class="fa arrow"></span>';
menu1 += '</a>';
menu1 += '<ul class="nav nav-second-level nps collapse in">';
/* 二级菜单 */
$.each(v.submenu,function(j,vJ){
var menu2 = '<li class="active">';
menu2 += '<a href="javaScript:;" class="">';
/* menu2 += '<span class="glyphicon glyphicon-cloud" style="margin-right: 10px;"></span>'; */
menu2 += '<span class=' + '\'' + vJ.image + '\'' + 'style=' + '\'' + 'margin-right: 10px;' + '\'' + '>' + '</span>';
menu2 += vJ.name + '<span class="fa arrow "></span>';
menu2 += '</a>';
menu2 += '<ul class="nav nav-third-level nps collapse in">';
/* 三级菜单 */
if(vJ.submenu){
$.each(vJ.submenu,function(k,vk){
var menu3 = '<li>';
menu3 += '<a href="javascript:openUrl(\'' + vk.url + '\')">';
/* menu3 += '<span style="margin-right: 10px;" class="glyphicon glyphicon-off">'; */
menu3 += '<span stype=' + '\'' + 'margin-right: 10px;' + '\'' + 'class=' + '\'' + vk.image + '\'' + '';
menu3 += '</span>'+vk.name;
menu3 += '</a>';
menu3 += '</li>';
menu2 += menu3;
});
}else{
$.each(v.submenu,function(j,vJ){
var menu4 = '<li>';
menu4 += '<a href="javascript:openUrl(\'' + vJ.url + '\')">';
/* menu3 += '<span style="margin-right: 10px;" class="glyphicon glyphicon-off">'; */
menu4 += '<span stype=' + '\'' + 'margin-right: 10px;' + '\'' + 'class=' + '\'' + vJ.image + '\'' + '';
menu4 += '</span>'+vJ.name;
menu4 += '</a>';
menu4 += '</li>';
menu2 = menu4;
});
}
menu1 += menu2;
});
$("#side-menu").append(menu1);
});
}
6、效果如下图