easyui 生成 多级 菜单树 01
这篇博客，算是 爬坑总结，如果想直接看成功 的方案，请看 下一篇博客。
本来打算复制数据的，但是看了一下，数据没啥用，还特别多，如果你真的需要看这些数据，可以单独找我，QQ：1286238812 ,备注 **** 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.****.net/u012246342/article/details/62443719
但是，如果把这段html，直接复制到 页面上，并不通过js 加载，样式就是正确的。详情请看上一篇博客。
下一篇博客来写，正确的 生成 easyui 树菜单 的方法。