使用ajax+js編寫響應菜單

頁面先導包吧JQuery、bootstrap等 看看效果：

Dao方法是直接查詢 跳過 MenuService

    /**
     * 獲取所有菜單列表
     * @return
     */
    public List<Menu> getAll() {
        return menudao.getAll();
    }

Controller

    @RequestMapping(value="menudata",method=RequestMethod.POST)
    @ResponseBody
    public List<Menu> getMenuData(){
        //查詢信息返回JSON 傳到頁面
        List<Menu> menulist=menuservice.getAll();
        return menulist;
    }

接着就是JSP頁面

<nav class="navbar-default sidebar" role="navigation">
    <div class="sidebar-nav navbar-collapse">
        <ul class="nav metismenu sidebar-menu" id="side-menu">
            <!-- 菜單在這裏顯示 -->
        </ul>
    </div>
</nav>

ajax代碼

<script>
        $(document).ready(function() {
                            $.ajax({
                                url : '${pageContext.request.contextPath}/menudata',
                                method : 'post',
                                dataType : 'json',
                                data : {
                                    data : (new Date()).getTime()
                                },
                                success : function(ret) {
                                    if (ret) {
                                        if (ret.length) {
                                            var root = $('.sidebar-menu');
                                            for (var i = 0; i < ret.length; i++) {
                                                var id = ret[i].id;
                                                var item = '';
                                                if (ret[i].pId == '0') {
                                                    var ul = '<ul class="nav nav-second-level">';
                                                    var li = '';
                                                    for (var j = 0; j < ret.length; j++) {
                                                        if (ret[j].pId != '0'
                                                                && ret[i].id == ret[j].pId) {
                                                            li += '<li><a href="${pageContext.request.contextPath}/'+ret[j].menu_action+'" target="main"><i class="'+ret[j].menu_icon+'"></i>'
                                                                    + ret[j].name
                                                                    + '</a></li>';
                                                        }

                                                    }
                                                    ul += li + '</ul>';
                                                    item = '<li>'
                                                            + '<a href="#" >'
                                                            + '<i class="'+ret[i].menu_icon+'"></i> <span class="nav-label">'
                                                            + ret[i].name
                                                            + '</span> <span class="fa arrow"></span>'
                                                            + '</a>'
                                                            + ul
                                                            + '</li>';
                                                }
                                                root.append(item);
                                            }
                                            $('#side-menu').metisMenu();
                                        }
                                        }
                                    },
                                    error:function(ret){
                                        var item='';
                                        item="<span style='color:red;'>無數據，請聯繫管理員！！！</span>"
                                        var root = $('.sidebar-menu');
                                        root.append(item);
                                        $('#side-menu').metisMenu();
                                    }
                            })
                        })
    </script>

最後這裏$(‘#side-menu’).metisMenu(); 是需要一個js文件

<%
    String path=request.getContextPath();
    String basePath=request.getScheme()+"//"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<script type="text/javascript" src="<%=path %>/bootstrap/js/metisMenu.min.js"></script>

metisMenu.min.js代碼

/*
 * metismenu - v1.1.3
 * Easy menu jQuery plugin for Twitter Bootstrap 3
 * https://github.com/onokumus/metisMenu
 *
 * Made by Osman Nuri Okumus
 * Under MIT License
 */
!function(a,b,c){function d(b,c){this.element=a(b),this.settings=a.extend({},f,c),this._defaults=f,this._name=e,this.init()}var e="metisMenu",f={toggle:!0,doubleTapToGo:!1};d.prototype={init:function(){var b=this.element,d=this.settings.toggle,f=this;this.isIE()<=9?(b.find("li.active").has("ul").children("ul").collapse("show"),b.find("li").not(".active").has("ul").children("ul").collapse("hide")):(b.find("li.active").has("ul").children("ul").addClass("collapse in"),b.find("li").not(".active").has("ul").children("ul").addClass("collapse")),f.settings.doubleTapToGo&&b.find("li.active").has("ul").children("a").addClass("doubleTapToGo"),b.find("li").has("ul").children("a").on("click."+e,function(b){return b.preventDefault(),f.settings.doubleTapToGo&&f.doubleTapToGo(a(this))&&"#"!==a(this).attr("href")&&""!==a(this).attr("href")?(b.stopPropagation(),void(c.location=a(this).attr("href"))):(a(this).parent("li").toggleClass("active").children("ul").collapse("toggle"),void(d&&a(this).parent("li").siblings().removeClass("active").children("ul.in").collapse("hide")))})},isIE:function(){for(var a,b=3,d=c.createElement("div"),e=d.getElementsByTagName("i");d.innerHTML="<!--[if gt IE "+ ++b+"]><i></i><![endif]-->",e[0];)return b>4?b:a},doubleTapToGo:function(a){var b=this.element;return a.hasClass("doubleTapToGo")?(a.removeClass("doubleTapToGo"),!0):a.parent().children("ul").length?(b.find(".doubleTapToGo").removeClass("doubleTapToGo"),a.addClass("doubleTapToGo"),!1):void 0},remove:function(){this.element.off("."+e),this.element.removeData(e)}},a.fn[e]=function(b){return this.each(function(){var c=a(this);c.data(e)&&c.data(e).remove(),c.data(e,new d(this,b))}),this}}(jQuery,window,document);

到這裏就可以了 後續問題以後再寫，我要下班了，哈哈哈