<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • 根據(jù)json文件生成動(dòng)態(tài)菜單

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

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

    [plain] view plain copy
    1. <span style="font-family:SimSun;font-size:16px;">admin.json</span>  
    [plain] view plain copy
    1. <span style="font-family:SimSun;font-size:16px;">[  
    2.     {  
    3.         "image": "glyphicon glyphicon-home",//菜單前的圖標(biāo)  
    4.         "name": "設(shè)備管理",  
    5.         "submenu": [  
    6.             {  
    7.                 "image": "glyphicon glyphicon-cloud",  
    8.                 "name": "設(shè)備分類",  
    9.                 "submenu": [  
    10.                     {  
    11.                         "image": "glyphicon glyphicon-off",  
    12.                         "name": "電源管理",  
    13.                         "url": "html/Node/creditCardPower.html"  
    14.                     },  
    15.                     {  
    16.                             "image": "glyphicon glyphicon-lock",  
    17.                         "name": "門禁管理",  
    18.                         "url": "html/Guard/guardList.html"  
    19.                     },  
    20.                     {  
    21.                         "image": "glyphicon glyphicon-folder-open",  
    22.                         "name": "物品管理",  
    23.                         "url": "html/goods/goodsList.html"  
    24.                     },  
    25.                     {  
    26.                         "image": "glyphicon glyphicon-facetime-video",  
    27.                         "name": "視頻管理",  
    28.                         "url": "html/monitor/monitorList.html"  
    29.                     }  
    30.                 ]  
    31.             }  
    32.         ]  
    33.     },  
    34.     {  
    35.         "image": "glyphicon glyphicon-cog",  
    36.         "name": "系統(tǒng)設(shè)置",  
    37.         "submenu": [  
    38.             {  
    39.                 "image": "glyphicon glyphicon-heart",  
    40.                 "name": "用戶管理",  
    41.                 "submenu": [  
    42.                     {  
    43.                         "image": "glyphicon glyphicon-align-justify",  
    44.                         "name": "用戶列表",  
    45.                         "url": "html/User/userList.html"  
    46.                     },  
    47.                     {  
    48.                         "image": "glyphicon glyphicon-random",  
    49.                         "name": "組織機(jī)構(gòu)",  
    50.                         "url": "html/dept/framework.html"  
    51.                     }  
    52.                 ]  
    53.             },  
    54.             {  
    55.                 "image": "glyphicon glyphicon-wrench",  
    56.                 "name": "設(shè)備管理",  
    57.                 "submenu": [  
    58.                     {  
    59.                         "image": "glyphicon glyphicon-edit",  
    60.                         "name": "設(shè)備參數(shù)",  
    61.                         "url": "html/Device/DeviceList.html"  
    62.                     },  
    63.                     {  
    64.                         "image": "glyphicon glyphicon-edit",  
    65.                         "name": "物品庫(kù)",  
    66.                         "url": "html/equgoods/equGoodsList.html"  
    67.                     }  
    68.                 ]  
    69.             }  
    70.         ]  
    71.     },  
    72.     {  
    73.         "image": "glyphicon glyphicon-list",  
    74.         "name": "日志管理",  
    75.         "submenu": [  
    76.             {  
    77.                 "image": "glyphicon glyphicon-list-alt",  
    78.                 "name": "登入日志",  
    79.                 "url": "html/Log/loginlog.html"  
    80.             },  
    81.             {  
    82.                 "image": "glyphicon glyphicon-tag",  
    83.                 "name": "設(shè)備日志",  
    84.                 "url": "html/Log/hardwarelog.html"  
    85.             }  
    86.         ]  
    87.     },  
    88.     {  
    89.         "image":"glyphicon glyphicon-list",  
    90.         "name":"設(shè)備管理",  
    91.         "submenu":[  
    92.             {  
    93.             "image":"glyphicon glyphicon-list-alt",  
    94.             "name":"設(shè)備管理",  
    95.             "url":"html/mechanism/mechanism.html"  
    96.             }  
    97.         ]  
    98.     }  
    99. ]</span>  

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

    [java] view plain copy
    1. <span style="font-size:16px;">package com.dskj.service.impl;  
    2.   
    3. import java.io.File;  
    4. import java.util.Scanner;  
    5. import org.springframework.beans.factory.annotation.Value;  
    6. import org.springframework.core.io.Resource;  
    7. import org.springframework.stereotype.Service;  
    8.   
    9. import com.dskj.common.util.StringUtil;  
    10. import com.dskj.service.ReadJsonService;  
    11.   
    12. @Service  
    13. public class ReadJsonServiceImpl implements ReadJsonService{  
    14.     <span style="color:#ff0000;">@Value(value="classpath:json/admin.json")</span>  
    15.     private Resource dataAdmin;      
    16.     <span style="color:#ff0000;">@Value(value="classpath:json/user.json")</span>  
    17.     private Resource dataUser;    
    18.       
    19.     public String getData(String fileName){       
    20.         if(StringUtil.isEmpty(fileName)){  
    21.             throw new NullPointerException();  
    22.         }  
    23.           
    24.         String jsonData = null;  
    25.           
    26.         try {  
    27.             File file = null;     if(fileName.equals("admin.json")){  
    28.                 file = dataAdmin.getFile();  
    29.             }else{  
    30.                 file = dataUser.getFile();  
    31.             }  
    32.               
    33.             jsonData = this.jsonRead(file);  
    34.               
    35.         } catch (Exception e) {  
    36.            e.printStackTrace();  
    37.         }    
    38.         return jsonData;         
    39.     }  
    40.     /** 
    41.      * 讀取文件類容為字符串 
    42.      * @param file 
    43.      * @return 
    44.      */  
    45.       private String jsonRead(File file){  
    46.             Scanner scanner = null;  
    47.             StringBuilder buffer = new StringBuilder();  
    48.             try {  
    49.                 scanner = new Scanner(file, "utf-8");  
    50.                 while (scanner.hasNextLine()) {  
    51.                     buffer.append(scanner.nextLine());  
    52.                 }  
    53.             } catch (Exception e) {  
    54.                   
    55.             } finally {  
    56.                 if (scanner != null) {  
    57.                     scanner.close();  
    58.                 }  
    59.             }  
    60.             return buffer.toString();  
    61.         }  
    62. }</span>  

    3、controller對(duì)應(yīng)的代碼片段

    [java] view plain copy
    1. <span style="font-size:16px;">@RequestMapping("")  
    2.     public ModelAndView main() {  
    3.         ModelAndView model = null;  
    4.         String jsonFileName = null;  
    5.           
    6.         SysUser currentUser = (SysUser) ContextUtil.getSession().getAttribute("currentUser");  
    7.         if ("admin".equals(currentUser.getUsername())) {  
    8.             model = new ModelAndView("header1");  
    9.             jsonFileName = "<span style="color:#ff0000;">admin.json</span>";//根據(jù)文件名判斷讀取具體json文件  
    10.         } else {  
    11.             model = new ModelAndView("headerUser");  
    12.             jsonFileName = "<span style="color:#ff0000;">user.json</span>";</span>/<span style="font-size:16px;">/根據(jù)文件名判斷讀取具體json文件  
    13.   
    14.         }  
    15.           
    16.         String menue = <span style="color:#3333ff;">readJsonServiceImpl.getData</span>(jsonFileName);  
    17.           
    18.         model.addObject("menue", menue);  
    19.         return model;  
    20.   
    21.     }</span>  

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

    [javascript] view plain copy
    1. <span style="font-size:16px;">$(function() {  
    2.     var menue = JSON.parse('<span style="color:#ff0000;"><%=request.getAttribute("menue")%></span>');  
    3.     console.info(menue);  
    4.     createMenu(menue);//調(diào)用下邊的方法生成動(dòng)態(tài)菜單</span>  

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

    [javascript] view plain copy
    1. <span style="font-size:16px;">function createMenu(menue){  
    2.             /* 一級(jí)菜單 */  
    3.             $.each(menue,function(i,v){  
    4.                 var menu1 = '<li class="active"><a href="javaScript:;">';  
    5.                 /* menu1 += '<span class="glyphicon glyphicon-home"></span>'; */  
    6.                 menu1 += '<span class=' + '\'' + v.image + '\'' + '>' + '</span>';  
    7.                 menu1 += '<span style="margin-left: 10px;">' + v.name + '</span><span class="fa arrow"></span>';  
    8.                 menu1 += '</a>';  
    9.                 menu1 += '<ul class="nav nav-second-level nps collapse in">';  
    10.                   
    11.                  /* 二級(jí)菜單  */  
    12.                     $.each(v.submenu,function(j,vJ){                      
    13.                         var menu2 = '<li class="active">';  
    14.                         menu2 +=        '<a href="javaScript:;" class="">';  
    15.                         /* menu2 +=         '<span class="glyphicon glyphicon-cloud" style="margin-right: 10px;"></span>'; */  
    16.                         menu2 +=            '<span class=' + '\'' + vJ.image + '\'' + 'style=' + '\'' + 'margin-right: 10px;' + '\'' + '>' + '</span>';  
    17.                         menu2 +=             vJ.name + '<span class="fa arrow "></span>';  
    18.                         menu2 +=        '</a>';  
    19.                         menu2 +=                '<ul class="nav nav-third-level nps collapse in">';                             
    20.                               
    21.                         /* 三級(jí)菜單 */  
    22.                         if(vJ.submenu){  
    23.                             $.each(vJ.submenu,function(k,vk){  
    24.                                 var menu3 = '<li>';  
    25.                                 menu3 +=        '<a href="javascript:openUrl(\'' + vk.url + '\')">';  
    26.                                 /* menu3 +=             '<span style="margin-right: 10px;" class="glyphicon glyphicon-off">'; */  
    27.                                 menu3 +=            '<span stype=' + '\'' + 'margin-right: 10px;' + '\'' + 'class=' + '\'' + vk.image + '\'' + '';  
    28.                                 menu3 +=            '</span>'+vk.name;  
    29.                                 menu3 +=        '</a>';  
    30.                                 menu3 +=    '</li>';  
    31.                                   
    32.                                 menu2 += menu3;  
    33.                                       
    34.                             });  
    35.                         }else{  
    36.                             $.each(v.submenu,function(j,vJ){  
    37.                                 var menu4 = '<li>';  
    38.                                 menu4 +=        '<a href="javascript:openUrl(\'' + vJ.url + '\')">';  
    39.                                 /* menu3 +=             '<span style="margin-right: 10px;" class="glyphicon glyphicon-off">'; */  
    40.                                 menu4 +=            '<span stype=' + '\'' + 'margin-right: 10px;' + '\'' + 'class=' + '\'' + vJ.image + '\'' + '';  
    41.                                 menu4 +=            '</span>'+vJ.name;  
    42.                                 menu4 +=        '</a>';  
    43.                                 menu4 +=    '</li>';  
    44.                                       
    45.                                  menu2 = menu4;   
    46.                             });  
    47.                         }  
    48.                             menu1 += menu2;  
    49.                     });  
    50.                       
    51.                     $("#side-menu").append(menu1);  
    52.                 });  
    53.                   
    54.             }</span>  

    6、效果如下圖

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

    日歷

    鏈接

    個(gè)人資料

    存檔

    主站蜘蛛池模板: 久久精品国产黑森林| 综合国产精品第一页| 精品人妻伦九区久久AAA片69| 无码日韩人妻精品久久蜜桃| 91午夜精品亚洲一区二区三区| 久久香蕉超碰97国产精品| 久久99精品国产麻豆不卡| 国产精品臀控福利在线观看| 亚洲av永久无码精品网站 | 国产精品成人不卡在线观看| 亚洲精品白浆高清久久久久久| 国产精品视频色视频| 欧美国产亚洲精品高清不卡| 国产精品久线在线观看| 少妇人妻偷人精品无码视频| 婷婷国产成人精品一区二| 国产精品 视频一区 二区三区| 久久国产精品久久国产精品| 国产精品1区2区| 国产精品亚洲精品日韩已满| 中文字幕在线亚洲精品| 亚洲国产精品人人做人人爽| 国产精品成人A区在线观看| 亚洲欧洲精品成人久久曰影片| 久久久久久国产精品免费免费| 国产精品99久久久久久猫咪 | 三上悠亚久久精品| 亚洲av永久无码精品网站| 亚洲精品成人网久久久久久| 欧洲精品一区二区三区在线观看 | 久久精品国产只有精品2020| 国产短视频精品一区二区三区| 国产精品9999久久久久| 久久精品国产久精国产思思| 久久丫精品国产亚洲av| 精品无码一区二区三区爱欲| 精品少妇无码AV无码专区| 久久综合精品国产二区无码| 久久精品国产亚洲AV无码麻豆| 国产精品美女一区二区视频| 99精品国产在热久久无毒不卡 |