从数据库动态加载菜单

思路：将菜单图片、URL、名称等信息存放在数据库，从数据库动态加载菜单到页面上

一、数据库设计

系统菜单表

column	type	comment
id	int	菜单编号
menu_name	varchar	一级菜单名
menu_num	varchar	所属的一级菜单编号
picture	varchar	菜单图片
url	varchar	菜单链接
is_use	int	是否使用
sort	int	排序

二、Controller层获取数据

    /**
     * 加载菜单
     */
    @RequestMapping("/getMenu")
    public String getMenu(HttpSession session, HttpServletResponse response, HttpServletRequest request)
            throws IOException {
            // 查询一级菜单
            List<Menu> selectMenu = menuService.selectMenu();
            // 存放菜单列表
            List<Menu> menus = new ArrayList<Menu>();

            for (Menu menu : selectMenu) {
                Menu menu = new MenuParam();
                menu.setId(menu.getId());
                menu.setMenuName(menu.getMenuName());
                menu.setMenuNum(menu.getMenuNum());
                menu.setPicture(menu.getPicture());
                menu.setUrl(menu.getUrl());
                Integer sort = menu.getSort();
                if (sort == 1) {
                    menu.setIsOpen(true);
                }
                // 根据一级菜单编号查询二级菜单个数
                int secondMenuCnt = menuService.selectMenuCount(menu.getId());
                // 存储二级菜单
                List<Menu> secondList = new ArrayList<Menu>();
                if (secondMenuCnt > 0) {
                    // 存在二级菜单，根据一级菜单编号查询二级菜单详情
                    List<Menu> secondMenu = menuService.selectMenuByStair(map);
                    for (Menu menu2 : secondMenu) {
                        MenuParam second = new MenuParam();
                        second.setId(menu2.getId());
                        second.setMenuName(menu2.getMenuName());
                                second.setSecondMenuNum(menu2.getStairMenuNum());
                        second.setMenuPic(menu2.getMenuPic());
                        second.setMenuUrl(menu2.getMenuUrl());
                        Integer secondSort = menu2.getMenuSort();
                        if (secondSort == 1) {
                            second.setIsCurrent(true);
                        }
                        secondList.add(second);
                    }
                }
                menuParam.setSecondMenuList(secondList);
                menus.add(menuParam);
            }
            JSONObject json = new JSONObject();
            json.put("secondList", menus);
            String menuData = json.toString();
            session.setAttribute("menus", menuData);
            return "index";
        }
    }

三、jsp页面

<div id="menu" style="display: none;">${menus}</div>
<div id="body">
        <!-- 存放菜单导航栏的div -->    
        <div class="panel">
            <ul class="panel-body">

            </ul>
        </div>
        <!-- 点击左侧菜单加载页面 -->     
        <div id="main">
            <div id="mainBody">

            </div>
        </div>
    </div>
    <script src="<%=request.getContextPath()%>/js/menu.js"></script>

四、js动态加载菜单列表

新建一个menu.js文件，使用JS脚本渲染菜单

var list = $("#menu").html();
var menu = eval( "(" + list + ")" );
var length = menu.secondList.length;
for (var j = 0; j<length;j++) {
    $(".panel-body").append("<li><a href='#'  class='item'><span class='iconLeft'><img src='"+menu.secondList[j].picture+"' style='margin-right:10px;margin-top:-4px'></span>"+menu.secondList[j].menuName+"<span class='iconRight normal' ></span></a><dl class='child' id='"+menu.secondList[j].id+"'>"+
                    "</dl></li> ")

    var menu2=menu.secondList[j].setSecondMenuList;
    $("#"+menu.secondList[j].id+"").html("");
    for(var i = 0; i < menu2.length; i++){
        $("#"+menu.secondList[j].id+"").append('<dd><a href="#" data-href="'+menu2[i].url+'">'+menu2[i].menuName+'</a></dd>');
    }

}

五、效果图