使用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);

到这里就可以了 后续问题以后再写，我要下班了，哈哈哈