easyui 生成 多级 菜单树 01

这篇博客，算是 爬坑总结，如果想直接看成功 的方案，请看 下一篇博客。

本来打算复制数据的，但是看了一下，数据没啥用，还特别多，如果你真的需要看这些数据，可以单独找我，QQ：1286238812 ,备注 csdn easyui tree . 放心，这些数据 不涉及公司机密。

数据结构如图下：

然后，先说，最开始 想通过 js 生成 菜单树的思路。

在 打算 在 页面 的js 中，通过 ajax 请求，获取 所有 菜单结构数据的集合，通过 js 来 循环遍历，生成带有多级菜单结构的树。 因为这个算是错误案例，所以不贴代码，只粘图

js 代码如图下：

basejs.jsp ，即为项目 的引入 文件，文件内容全部是引入的js ,以及 css 样式。

get MenuList 方法，为 访问后台数据，拼接html 代码的方法。

具体方法如下：

function createMenuListParent(resourceData,html,ticket){
	for(var [key,value] of resourceData){
		if(value.children.length > 0){
			html.push("");
			html.push("<li>");
			html.push("<span>" + value.name + "</span>");
			html.push("<ul>");
			var childrenList = value.children;
			for(var child of childrenList){
				createMenuListChild(child,html,ticket);
			}
			html.push("");
			html.push("</ul>");
			html.push("</li>");
		}else{
			html.push("<li>");
			var url = assemblyUrl(value, ticket);
			html.push("");
			html.push("<a href='###' onclick='addFrameTab(\""+ value.name +"\", \""+ url +"\")'>");
			html.push("<span style='cursor:pointer;'>" + value.name + "</span>");
			html.push("</a>");
			html.push("");
			html.push("");
			html.push("</li>");
		}
	}
}

function createMenuListChild(resourceData,html,ticket){
	if(resourceData.children !=null && resourceData.children.length > 0){
		html.push("");
		html.push("<li>");
		html.push("<span>" + resourceData.name + "</span>");
		html.push("<ul>");
		for(var child of resourceData.children){
			createMenuListChild(child,html,ticket);
		}
		html.push("");
		html.push("</ul>");
		html.push("</li>");
	}else{
		html.push("");
		html.push("<li>");
		var url = assemblyUrl(resourceData, ticket);
		html.push("");
		html.push("<a href='###' onclick='addFrameTab(\""+ resourceData.name +"\", \""+ url +"\")'>");
		html.push("<span style='cursor:pointer;'>" + resourceData.name + "</span>");
		html.push("</a>");
		html.push("");
		html.push("");
		html.push("</li>");
	}
}


function getMenuList(roleId, sysId, ticket) {
	$.ajax({
		"dataType" : 'json',
		"type" : 'POST',
		"url" : basePath + '/pages/frame/getResourceZTreeByRoleId',
		"data" : {
			'sysId' : sysId,
			'roleId' : roleId
		},
		"async" :true,
		"success" : function(response) {
			if (response.isSuccess == "true") {
				var html = [];
				var resourceData = new Map();
				var resourceListData = new Map();
				var resourceList = response.aaData;
				if (resourceList != null) {
					for (var i = 0; i < resourceList.length; i++) {
						var resource = resourceList[i];
						resourceListData.set(resource.id, resource);
					}
				}
				if (resourceList != null) {
					for (var i = 0; i < resourceList.length; i++) {
						var resource = resourceList[i];
						
						if (resource.parentResourceId == null || resource.parentResourceId == "") {
							if(resource.children === undefined || resource.children == 0){
								resource.children = [];
							}
							resourceData.set(resource.id, resource);
						}else{
							var parentResource = resourceData.get(resource.parentResourceId);
							if (parentResource != null) {
								parentResource.children.push(resource);
							}else{
								var parentResource2 = resourceListData.get(resource.parentResourceId);
								if(parentResource2.children === undefined || parentResource2.children.length == 0){
									parentResource2.children = [];
								}
								 
								parentResource2.children.push(resource);
							}
						}
					}
				}
				if(resourceData.size > 0){
					createMenuListParent(resourceData,html,ticket);
				}else{
					html.push("<li iconCls=\"\">");
					html.push("<span>无权限</span> ");
					html.push("<ul>");
					html.push("");
					html.push("</ul>");
					html.push("</li>");   
				}
				
				var defaultResourceName = null;
				var defaultResourceUrl = null;
				//var resources = resourceData.values();
				
				$("#dtree").html(html.join(""));
				console.log(html.join(""));
				//addFrameTab(defaultResourceName, defaultResourceUrl);
			} else {
				alertMsg('alertModal', 'alertMsg', response.msg);
				window.location.href = basePath + response.url;
			}
		},
		"error" : function(response) {
			window.location.href = basePath ;
		}
	});
}

assemblyUrl 方法是，拼接 url + ticket (ticket 为 登录验证生成的随机数) ，生成访问路径 的方法。

$("#dtree") ，是 上一篇博客介绍的 tree

当前ajax 请求，对应的后台方法是：

public ResourceForm getResourceZTreeByRoleId(HttpServletRequest request,HttpServletResponse response, ResourceForm form) throws Exception{
		try {
			String ticket = (String) request.getSession().getAttribute("ticket");
			Map<String,Object> resourceCondition = new HashMap<String,Object>();
			resourceCondition.put("sysId", form.getSysId());
			resourceCondition.put("roleId", form.getRoleId());
			List<SysResource> resourceList = sysResourceService.getResourceListByRoleId(resourceCondition);
			for(SysResource list : resourceList){
				list.setComponent(this.sysComponentService.getComponentById(list.getComponentId()));
				list.setSystem(this.sysSystemService.getSystemById(list.getSystemId()));
			}
			MenuResourceList.put(ticket, resourceList);
			form.setAaData(resourceList);
			form.setIsSuccess(SUCCESS);
		} catch (Exception e) {
			form.setIsSuccess(FAILURE);
			form.setMsg((e instanceof WebgateException) ? "" : e.getMessage());
		}
		return form;
	}

其中，sysId , 为，系统ID。 菜单树结构，必须属于某个系统。

roleId ,为，角色ID。根据角色，显示 菜单链接。

这个js 方法，生成的 html 如下：

<li><span>系统管理</span><ul><li><span>系统信息</span><ul><li><span>三级菜单</span><ul><li><a href='###' onclick='addFrameTab("四级菜单", "http://127.0.0.1:8080/webgate/pages/system/form/index?ticket=1489622475604_0.5272848774602615&pt_rtype=m")'><span style='cursor:pointer;'>四级菜单</span></a></li></ul></li></ul></li><li><a href='###' onclick='addFrameTab("资源信息", "http://127.0.0.1:8080/webgate/pages/resource/form/index?ticket=1489622475604_0.5272848774602615&pt_rtype=m")'><span style='cursor:pointer;'>资源信息</span></a></li><li><span>账户信息</span><ul><li><a href='###' onclick='addFrameTab("三级菜单2", "http://127.0.0.1:8080/webgate/pages/system/form/index?ticket=1489622475604_0.5272848774602615&pt_rtype=m")'><span style='cursor:pointer;'>三级菜单2</span></a></li></ul></li><li><a href='###' onclick='addFrameTab("角色信息", "http://127.0.0.1:8080/webgate/pages/role/form/index?ticket=1489622475604_0.5272848774602615&pt_rtype=m")'><span style='cursor:pointer;'>角色信息</span></a></li><li><a href='###' onclick='addFrameTab("组件信息", "http://127.0.0.1:8080/webgate/pages/component/form/index?ticket=1489622475604_0.5272848774602615&pt_rtype=m")'><span style='cursor:pointer;'>组件信息</span></a></li><li><a href='###' onclick='addFrameTab("模块信息", "http://127.0.0.1:8080/webgate/pages/module/form/index?ticket=1489622475604_0.5272848774602615&pt_rtype=m")'><span style='cursor:pointer;'>模块信息</span></a></li><li><a href='###' onclick='addFrameTab("功能信息", "http://127.0.0.1:8080/webgate/pages/function/form/index?ticket=1489622475604_0.5272848774602615&pt_rtype=m")'><span style='cursor:pointer;'>功能信息</span></a></li></ul></li><li><a href='###' onclick='addFrameTab("一级菜单", "http://127.0.0.1:8080/webgate/pages/system/form/index?ticket=1489622475604_0.5272848774602615&pt_rtype=m")'><span style='cursor:pointer;'>一级菜单</span></a></li>

此html 拼接到页面上，显示的是错误的。错误原因，上一篇博客已经说过：http://blog.csdn.net/u012246342/article/details/62443719

但是，如果把这段html，直接复制到 页面上，并不通过js 加载，样式就是正确的。详情请看上一篇博客。

下一篇博客来写，正确的 生成 easyui 树菜单 的方法。