jQuery-EasyUI异步加载树形菜单

为什么80%的码农都做不了架构师？>>>   

1】把tree定义在一个空<ul>元素

<div>
	<ul id="layout_west_tree"></ul>
</div>

2】使用Javascript加载数据

<script type="text/javascript">
	var layout_west_tree;
	var layout_west_tree_url = '${pageContext.request.contextPath}/resourceController/tree';
	}
	$(function() {
		layout_west_tree = $('#layout_west_tree').tree({
			url : layout_west_tree_url,
			parentField : 'pid',
			lines : true,
			onClick : function(node) {
             /*根据点击的资源，添加选项卡*/
			},
			
			onLoadSuccess : function(node, data) {//返回的JSON数据（data）从这里接收
				parent.$.messager.progress('close');
			}
		});
	});
</script>

3】resourceController中的tree方法

@RequestMapping("/tree")
@ResponseBody
public List<Tree> tree(HttpSession session) {
    //获取当前账户的用户信息(包括ID/登录名/用户可以访问的资源地址列表)
	SessionInfo sessionInfo = (SessionInfo) session.getAttribute(ConfigUtil.getSessionInfoName());
	return resourceService.tree(sessionInfo);
}

4】resourceService的tree方法

public List<Tree> tree(SessionInfo sessionInfo) {
		List<Tresource> l = null;
		List<Tree> lt = new ArrayList<Tree>();

		Map<String, Object> params = new HashMap<String, Object>();
		params.put("resourceTypeId", "0");// 菜单类型的资源

		if (sessionInfo != null) {
			params.put("userId", sessionInfo.getId());// 自查自己有权限的资源
			l = resourceDao.find("select distinct t from Tresource t join fetch t.tresourcetype type join fetch t.troles role join role.tusers user where type.id = :resourceTypeId and user.id = :userId order by t.seq", params);
		} else {
			l = resourceDao.find("select distinct t from Tresource t join fetch t.tresourcetype type where type.id = :resourceTypeId order by t.seq", params);
		}

		if (l != null && l.size() > 0) {
			for (Tresource r : l) {
				Tree tree = new Tree();
				BeanUtils.copyProperties(r, tree);
				if (r.getTresource() != null) {
					tree.setPid(r.getTresource().getId());
				}
				tree.setText(r.getName());
				tree.setIconCls(r.getIcon());
				Map<String, Object> attr = new HashMap<String, Object>();
				attr.put("url", r.getUrl());
				tree.setAttributes(attr);
				lt.add(tree);
			}
		}
		
		 log.info("debug级别的日志输出----"+JSON.toJSONString(lt));  
		return lt;
	}

5】返回的JSON数据如下：

[
    {
        "attributes": {},
        "checked": false,
        "iconCls": "plugin",
        "id": "xtgl",
        "state": "open",
        "text": "系统管理"
    },
    {
        "attributes": {
            "url": "/chartController/userCreateDatetimeChart"
        },
        "checked": false,
        "iconCls": "chart_curve",
        "id": "userCreateDatetimeChart",
        "pid": "chart",
        "state": "open",
        "text": "用户图表"
    },
    {
        "attributes": {
            "url": "/resourceController/manager"
        },
        "checked": false,
        "iconCls": "database_gear",
        "id": "zygl",
        "pid": "xtgl",
        "state": "open",
        "text": "资源管理"
    },
    {
        "attributes": {
            "url": "/roleController/manager"
        },
        "checked": false,
        "iconCls": "tux",
        "id": "jsgl",
        "pid": "xtgl",
        "state": "open",
        "text": "角色管理"
    },
    {
        "attributes": {
            "url": "/userController/manager"
        },
        "checked": false,
        "iconCls": "status_online",
        "id": "yhgl",
        "pid": "xtgl",
        "state": "open",
        "text": "用户管理"
    },
    {
        "attributes": {
            "url": "/bugController/manager"
        },
        "checked": false,
        "iconCls": "bug",
        "id": "buggl",
        "pid": "xtgl",
        "state": "open",
        "text": "BUG管理"
    },
    {
        "attributes": {
            "url": "/druidController/druid"
        },
        "checked": false,
        "iconCls": "server_database",
        "id": "sjygl",
        "pid": "xtgl",
        "state": "open",
        "text": "数据源管理"
    }
]

6】返回的JSON，通过onLoadSuccess方法接收，数据就装填进Tree控件里了

转载于:https://my.oschina.net/zion/blog/821550