根据json文件生成动态菜单

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zkfvip_001/article/details/80511771

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、效果如下图


展开阅读全文
博主设置当前文章不允许评论。

没有更多推荐了,返回首页