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用于获取二级菜单，代码就不贴了很简单，这里贴下菜单表：

PS.学校的项目没得源码了哈，大家可以搜一搜孙宇 easyui 我就是参考他的项目学习的easyui的！！

2018年4月20日更新，一次返回菜单josn，js加载方法...返回的菜单json格式参考：

http://www.jeasyui.net/demo/tree_data2.json

	$.ajax({
		type : 'GET',
		dataType : "json",
		url : '/menu/getMenu',
		success : function(data) {
			$.each(data, function(i, n) {// 加载父类节点及一级菜单
				var id = n.id;
				$('#layout_west_accordion').accordion('add', {
					title : n.text,
					iconCls : n.iconCls,
					selected : true,
					content : '<div style="padding:10px"><ul id="tree-'+ id + '" name="'+n.text+'"></ul></div>'
				});
				// 解析整个页面
				$.parser.parse();
				// 第二层生成树节点
				if (!n.children || n.children.length == 0) {
					return true;
				}
				$("#tree-" + id).tree({
					data : n.children,
					//animate : true,
					lines : true,// 显示虚线效果
					onClick : function(node) {
						if (node.attributes) {
							var tabTitle = node.text;
							var url = node.attributes.url;
							var openMode = node.attributes.openMode;
							var icon = node.iconCls;
							var pid = node.id;
							addTab(tabTitle, url, openMode,icon, pid);
						}
					}
				});
			});
		}
	});

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

猜你喜欢