jQuery-EasyUI异步加载树形菜单

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控件里了