ExtJS4.2 根据数据库记录构建树形菜单

背景：最近用ExtJS4.2做一个系统，需要在前端展示资源菜单，为树形结构，该树形结构是从数据库动态加载的。

ExtJS的树形结构大致有两种情况：

1.静态树形结构，此处不多说，看API就能简单明白；

2.动态加载，ExtJS的特性是根据父节点ID来查询子节点，从而动态更新树形菜单，这里有一个缺陷，或许是我孤陋寡闻不知道，那就是无法根据数据库节点信息自动构建成为一棵树，记得zTree插件就有这个功能。

那么，我希望能够根据数据库树节点信息自动的构建成一棵树，就需要自己去写个小算法在后台拼接成ExtJS需要的数据结构。

代码部分：

1.节点pojo，必要属性有：节点ID（id）、父节点ID（parentId)、文本信息（text）、孩子（children），其他属性，比如节点url，顺序order等根据自己需要设置。

public class Resource {
private Integer id;
private String text;
private Integer parentId;
private Boolean expanded;
private List<Resource> children = new ArrayList<Resource>();
　　
}

2.根据查询出来的节点List集合拼装成为前端展示需要的结构，这里写了个静态方法。

public static final <T> List<T> buildTree(List<T> nodes) {
if(null == nodes || nodes.size() == 0) return null;

Map<Integer, T> resources = new HashMap<Integer, T>();
List<T> result = new ArrayList<T>();

try {
for(int i=0; i<nodes.size(); i++) {
T node = nodes.get(i);
Method getId = node.getClass().getMethod("getId");
Integer id = (Integer) getId.invoke(node);
resources.put(id, node);
}

for (Map.Entry<Integer, T> e : resources.entrySet()) {
T node = e.getValue();
Method getparentId = node.getClass().getMethod("getParentId");
Integer parentId = (Integer) getparentId.invoke(node);
if(parentId == 0) {
result.add(node);
} else {
T parent = resources.get(parentId);
if( null != parent) {
@SuppressWarnings("unchecked")
List<T> children = (List<T>) parent.getClass().getMethod("getChildren").invoke(parent);
children.add(node);
}
}
}
} catch (Exception e) {
e.printStackTrace();
}
return result;
}

3.数据库记录。



4.ExtJS前端代码。

Ext.onReady(function() {
var store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'your url'
},
root: {
text: '系统菜单',
id: 0,
expanded: true
}
});
var treePanel = Ext.create('Ext.tree.Panel', {
title: '树形菜单',
width: 300,
height: 350,
margin: '50 0 0 500',
store: store,
rootVisible: false,
useArrows: true,
renderTo: Ext.getBody()
});
});

5.效果图。



6.完毕。