欧美videos另类精品-欧美videos另类极品-欧美vide-欧美va在线视频-欧美va在线观看-欧美va在线播放免费观看

根據(jù)json文件生成動(dòng)態(tài)菜單

2018-5-31 seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，請(qǐng)點(diǎn)這里

                [plain] view plaincopy
                
                <span style="font-family:SimSun;font-size:16px;">admin.json</span>

[plain] view plain copy

[

 {

 "image": "glyphicon glyphicon-home",//菜單前的圖標(biāo)

 "name": "設(shè)備管理",

 "submenu": [

 {

 "image": "glyphicon glyphicon-cloud",

 "name": "設(shè)備分類(lèi)",

 "submenu": [

 {

 "image": "glyphicon glyphicon-off",

 "name": "電源管理",

 "url": "html/Node/creditCardPower.html"

 },

 {

 "image": "glyphicon glyphicon-lock",

 "name": "門(mén)禁管理",

 "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": "系統(tǒng)設(shè)置",

 "submenu": [

 {

 "image": "glyphicon glyphicon-heart",

 "name": "用戶(hù)管理",

 "submenu": [

 {

 "image": "glyphicon glyphicon-align-justify",

 "name": "用戶(hù)列表",

 "url": "html/User/userList.html"

 },

 {

 "image": "glyphicon glyphicon-random",

 "name": "組織機(jī)構(gòu)",

 "url": "html/dept/framework.html"

 }

 ]

 },

 {

 "image": "glyphicon glyphicon-wrench",

 "name": "設(shè)備管理",

 "submenu": [

 {

 "image": "glyphicon glyphicon-edit",

 "name": "設(shè)備參數(shù)",

 "url": "html/Device/DeviceList.html"

 },

 {

 "image": "glyphicon glyphicon-edit",

 "name": "物品庫(kù)",

 "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": "設(shè)備日志",

 "url": "html/Log/hardwarelog.html"

 }

 ]

 },

 {

 "image":"glyphicon glyphicon-list",

 "name":"設(shè)備管理",

 "submenu":[

 {

 "image":"glyphicon glyphicon-list-alt",

 "name":"設(shè)備管理",

 "url":"html/mechanism/mechanism.html"

 }

 ]

 }

]

2、讀取json文件的service層實(shí)現(xiàn)

[java] view plain copy

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;

 }

 /**

 * 讀取文件類(lèi)容為字符串

 * @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對(duì)應(yīng)的代碼片段

[java] view plain copy

@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";//根據(jù)文件名判斷讀取具體json文件

 } else {

 model = new ModelAndView("headerUser");

 jsonFileName = "user.json";//根據(jù)文件名判斷讀取具體json文件



 }



 String menue = readJsonServiceImpl.getData(jsonFileName);



 model.addObject("menue", menue);

 return model;



 }

4、html頁(yè)面將jsonarray轉(zhuǎn)換成js對(duì)象

[javascript] view plain copy

$(function() {

 var menue = JSON.parse('<%=request.getAttribute("menue")%>');

 console.info(menue);

 createMenu(menue);//調(diào)用下邊的方法生成動(dòng)態(tài)菜單

5、對(duì)js對(duì)象遍歷 $.append動(dòng)態(tài)添加到對(duì)應(yīng)頁(yè)面

[javascript] view plain copy

function createMenu(menue){

 /* 一級(jí)菜單 */

 $.each(menue,function(i,v){

 var menu1 = '<li class="active"><a href="javaScript:;">';

 /* menu1 += ''; */

 menu1 += '' + '';

 menu1 += '' + v.name + '';

 menu1 += '</a>';

 menu1 += '<ul class="nav nav-second-level nps collapse in">';



 /* 二級(jí)菜單 */

 $.each(v.submenu,function(j,vJ){

 var menu2 = '<li class="active">';

 menu2 += '<a href="javaScript:;" class="">';

 /* menu2 += ''; */

 menu2 += '' + '';

 menu2 += vJ.name + '';

 menu2 += '</a>';

 menu2 += '<ul class="nav nav-third-level nps collapse in">';



 /* 三級(jí)菜單 */

 if(vJ.submenu){

 $.each(vJ.submenu,function(k,vk){

 var menu3 = '<li>';

 menu3 += '<a href="javascript:openUrl(\'' + vk.url + '\')">';

 /* menu3 += ''; */

 menu3 += ''+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 += ''; */

 menu4 += ''+vJ.name;

 menu4 += '</a>';

 menu4 += '</li>';



 menu2 = menu4;

 });

 }

 menu1 += menu2;

 });



 $("#side-menu").append(menu1);

 });



 }

6、效果如下圖

藍(lán)藍(lán)設(shè)計(jì)( m.73404.com.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

« 【UI設(shè)計(jì)】透明UI界面設(shè)計(jì) 自我超越之旅的小記錄2018528 »

分類(lèi)

日歷

鏈接

個(gè)人資料

藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.73404.com.cn

存檔