easyui-accordion动态生成菜单的实现

暑假无聊，突然想起期末的模拟项目还没做完，当时就准备把菜单做成动态的，可惜因为某些原因没有完成，既然记起了就花点时间做了吧，以免我忘了


首先看完成的效果：



需求：一级菜单在登陆成功后就加载，二级菜单需用户点击一级菜单时才加载。其中第一个一级菜单下的二级菜单也在登陆成功后加载。

easyui版本：1.43。

下面是前台代码：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<script type="text/javascript">
    $(function() {
        $.ajax({
            type : 'POST',
            dataType : "json",
            url : '${pageContext.request.contextPath}/menuAction!getParentMenu.action',
            success : function(data) {
                $.each(data, function(i, n) {//加载父类节点即一级菜单
                    if (i == 0) {//显示第一个一级菜单下的二级菜单
                        $('#layout_west_accordion').accordion('add', {
                            title : n.text,
                            iconCls : n.iconCls,
                            selected : true,
                            content : '<div style="padding:10px"><ul name="'+n.text+'"></ul></div>',
                        });
                    } else {
                        $('#layout_west_accordion').accordion('add', {
                            title : n.text,
                            iconCls : n.iconCls,
                            selected : false,
                            content : '<div style="padding:10px"><ul name="'+n.text+'"></ul></div>',
                        });
                    }

                });
            }
        });
        //异步加载子节点，即二级菜单
        $('#layout_west_accordion').accordion({
            onSelect : function(title, index) {
                $("ul[name='" + title + "']").tree({
                    url : '${pageContext.request.contextPath}/menuAction!getMenuTree.action',
                    queryParams : {
                        text : title
                    },
                    animate : true,
                    lines : true,//显示虚线效果  
                    onClick: function(node){// 在用户点击一个子节点即二级菜单时触发addTab()方法,用于添加tabs
                        if(node.url){//判断url是否存在，存在则创建tabs
                            addTab(node);
                        }
                    }
                });
            }
        });
    });
</script>
<div id="layout_west_accordion" class="easyui-accordion" data-options="fit:true,border:false,nimate:true,lines:true">
    <div title="搜索菜单" data-options="iconCls:'icon-search',collapsed:false,collapsible:false" style="padding: 10px;">
        <input id="layout_west_sc" class="easyui-searchbox" data-options="prompt:'请输入你需要的菜单'" style="width: 180px; height: 25px;">
    </div>
</div>

我后台用的java，框架用的SSH，一个aciotn用于获取一级菜单，一个action用于获取二级菜单，代码就不贴了很简单，这里贴下菜单表：