1.數據庫中存放數據的格式,一般是在字典中。這裏我特意分了兩張表來測試demo,更清楚。
a.一張是父節點的表
b.一張是最後的子節點的表
2.具體代碼的編寫(基於java)
@RequestMapping("testtree")
@ResponseBody
public List<Map<String,Object>> testtree(){
List<Map<String,Object>> areaList = fortestService.getTree();//父節點表
List<Map<String, Object>> treeList = new ArrayList<Map<String, Object>>();
//用了存放父節點的Map
Map<String, Object> node = new HashMap<String, Object>();
for (Map<String,Object> area : areaList) {
//第一個節點 if((area.get("TREE_PARENT_ID").toString()).equals("1")) {
//節點id
node.put("id", area.get("TREE_ID").toString());
//節點名字
node.put("text", area.get("TREE_NAME").toString());
//拼裝子節點,採用的是遞歸的方法
node.put("children", buildTree(area.get("TREE_ID").toString(), areaList));
//默認樹的狀態關閉
node.put("state", "closed");
treeList.add(node);
return treeList;
}
}
return null;
}
private List<Map<String, Object>> buildTree(Object parentId,
List<Map<String,Object>> areaList) {
List<Map<String, Object>> alists = new ArrayList<Map<String, Object>>();//父節點表
//拼裝子節點
for (Map<String, Object> alist : areaList) { if(parentId.equals(
alist.get("TREE_PARENT_ID").toString())) {
Map<String, Object> node = new HashMap<String, Object>();
//子節點id
node.put("id", alist.get("TREE_ID").toString());
//節點的父節點
node.put("parentId", alist.get("TREE_PARENT_ID").toString());
//節點名字
node.put("text", alist.get("TREE_NAME").toString());
List<Map<String, Object>> children = buildTree(
alist.get("TREE_ID").toString(), areaList);
//開始拼裝最終的子節點
List<Map<String, Object>> liLast = fortestService.getLilast();//子節點表
for (Map<String,Object> s : liLast) {
Map<String, Object> node_ = new HashMap<String, Object>();//存放葉子節點
if((alist.get("TREE_ID").toString()).equals(s.get("TREE_ID").toString())){
node_.put("id", s.get("ID").toString());
node_.put("text", s.get("NAME").toString());
node_.put("parentId", s.get("TREE_ID").toString());
children.add(node_);
}
}
node.put("children", children);
//默認樹的狀態關閉
node.put("state", "closed");
alists.add(node);
}
}
return alists;
}
3.代碼看需求不同,實現也不同,但是大體的思想是一樣的,一般都是用遞歸的方法來實現,注意的是,確定第一個節點,和葉子節點的信息。將這裏的信息存放到List中以json的格式返回前臺。在上篇中的js中接收就可以得到一個簡單的樹形結構。