如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
-
<span style="font-family:SimSun;font-size:16px;">admin.json</span>
-
<span style="font-family:SimSun;font-size:16px;">[
-
{
-
"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"
-
}
-
]
-
}
-
]</span>
2、讀取json文件的service層實現
-
<span style="font-size:16px;">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{
-
<span style="color:#ff0000;">@Value(value="classpath:json/admin.json")</span>
-
private Resource dataAdmin;
-
<span style="color:#ff0000;">@Value(value="classpath:json/user.json")</span>
-
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;
-
}
-
-
-
-
-
-
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();
-
}
-
}</span>
3、controller對應的代碼片段
-
<span style="font-size:16px;">@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 = "<span style="color:#ff0000;">admin.json</span>";
-
} else {
-
model = new ModelAndView("headerUser");
-
jsonFileName = "<span style="color:#ff0000;">user.json</span>";</span>/<span style="font-size:16px;">/根據文件名判斷讀取具體json文件
-
-
}
-
-
String menue = <span style="color:#3333ff;">readJsonServiceImpl.getData</span>(jsonFileName);
-
-
model.addObject("menue", menue);
-
return model;
-
-
}</span>
4、html頁面 將jsonarray轉換成js對象
-
<span style="font-size:16px;">$(function() {
-
var menue = JSON.parse('<span style="color:#ff0000;"><%=request.getAttribute("menue")%></span>');
-
console.info(menue);
-
createMenu(menue);
5、對js對象遍歷 $.append動態添加到對應頁面
-
<span style="font-size:16px;">function createMenu(menue){
-
-
$.each(menue,function(i,v){
-
var menu1 = '<li class="active"><a href="javaScript:;">';
-
-
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=' + '\'' + 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 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 + '\')">';
-
-
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);
-
});
-
-
}</span>
6、效果如下圖
藍藍設計( m.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
