根據json文件生成動態菜單 - 設計每日一貼---北京蘭亭妙微/UI設計公司

<address id="ttjl9"></address>

<noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>

<form id="ttjl9"></form>

<em id="ttjl9"><span id="ttjl9"></span></em>

<address id="ttjl9"></address>

<noframes id="ttjl9"><form id="ttjl9"></form>

根據json文件生成動態菜單

2018-5-31 seo達人

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

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

[plain] view plain copy

<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層實現

[java] view plain copy

<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;

    }

    /**

     * 讀取文件類容為字符串

     * @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();

        }

}</span>

3、controller對應的代碼片段

[java] view plain copy

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

        } 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對象

[javascript] view plain copy

<span style="font-size:16px;">$(function() {

    var menue = JSON.parse('<span style="color:#ff0000;"><%=request.getAttribute("menue")%></span>');

    console.info(menue);

    createMenu(menue);//調用下邊的方法生成動態菜單</span>

5、對js對象遍歷 $.append動態添加到對應頁面

[javascript] view plain copy

<span style="font-size:16px;">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);

                });



            }</span>

6、效果如下圖

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

« 【UI設計】透明UI界面設計自我超越之旅的小記錄2018528 »

分類

日歷

鏈接

個人資料

藍藍設計的小編 http://www.syprn.cn

存檔

亚洲va欧美va天堂v国产综合