專案中UI需要用到樹形結構顯示內容， 後來儘管不需要做了， 不過還是自己做著玩玩， mark一下， 免得以後專案中用到。
實現樹形結構在此使用的是jquery的dynatree.js。 關於dynatree的使用可以參考：http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html#h4.2
對於樹形結構， 這裡不做太多介紹， 樹一般需要一個根節點， 根節點下面可以有很多子節點或者葉子節點， 子結點也可以包含葉子結點或者子節點。 我們在設計表結構的時候可以考慮自連接操作， 實現節點之間的關聯， 表結構如下：
我們想要實現的資料結構如下。
對應的資料如下：
節點名稱節點編號當前節點對應的父節點當前節點是否為葉子節點當前節點是否有子節點當前節點如果包含子節點情況下子節點的清單對於程式設計， 主要分成兩個步驟：
遞迴將資料存儲到自訂結構中；對結構進行json處理， json串應該滿足相關的結構， 即類似JSONObject{JSONArray[...]}相關模式， 可以查看上方連結瞭解詳情。代碼如下：
1.TreeUtil：實現遞迴對節點關係獲取以及json轉換；
1 public without sharing class TreeUtil { 2 3 // map to hold roles with Id as the key 4 private static Map treeMap; 5 6 // map to hold child roles with parentRoleId as the key 7 private static Map > parentNodeToChildNodeMap; 8 9 10 private static List nodes{get;set;} 11 12 private static JSONGenerator gen {get; set;} 13 14 private static Tree__c rootNode{get;set;} 15 16 static { 17 initTreeDatas; 18 } 19 20 public static void initTreeDatas { 21 treeMap = new Map([SELECT IsLeafNode__c, ParentNode__c, Id, Name FROM Tree__c order by ParentNode__c]); 22 parentNodeToChildNodeMap = new Map>; 23 for(Tree__c tree : treeMap.values) { 24 List tempList; 25 if(parentNodeToChildNodeMap.containsKey(tree.ParentNode__c)) { 26 tempList = parentNodeToChildNodeMap.get(tree.ParentNode__c); 27 tempList.add(tree); 28 parentNodeToChildNodeMap.put(tree.ParentNode__c,tempList); 29 } else { 30 tempList = new List; 31 tempList.add(tree); 32 if(tree.ParentNode__c != null) { 33 parentNodeToChildNodeMap.put(tree.ParentNode__c,tempList); 34 } else { 35 rootNode = tree; 36 } 37 } 38 } 39 } 40 41 42 private static void convertNodeToJSON(NodeWrapper nw){ 43 gen.writeStartObject; 44 if(!nw.isLeafNode) { 45 gen.writeStringField('title', nw.nodeName); 46 gen.writeStringField('key', nw.nodeId); 47 gen.writeBooleanField('unselectable', false); 48 gen.writeBooleanField('expand', true); 49 gen.writeBooleanField('isFolder', true); 50 if (nw.hasChildNodes) { 51 gen.writeFieldName('children'); 52 gen.writeStartArray; 53 for (NodeWrapper r : nw.childNodes) { 54 convertNodeToJSON(r); 55 } 56 gen.writeEndArray; 57 } 58 } else { 59 gen.writeStringField('title', nw.nodeName); 60 gen.writeStringField('key', nw.nodeId); 61 } 62 gen.writeEndObject; 63 } 64 65 public static NodeWrapper createNode(Tree__c tree) { 66 NodeWrapper n = new NodeWrapper; 67 n.nodeName = tree.Name; 68 n.nodeId = tree.Id; 69 n.parentNodeId = tree.ParentNode__c; 70 71 if(tree.IsLeafNode__c) { 72 n.isLeafNode = true; 73 n.hasChildNodes = false; 74 } else { 75 List nwList = new List; 76 if(parentNodeToChildNodeMap.get(tree.Id) != null) { 77 n.hasChildNodes = true; 78 n.isLeafNode = false; 79 for(Tree__c tempTree : parentNodeToChildNodeMap.get(tree.Id)) { 80 nwList.add(createNode(tempTree)); 81 } 82 n.childNodes = nwList; 83 } 84 85 } 86 return n; 87 } 88 89 90 public static String getTreeAndSubTrees { 91 gen = JSON.createGenerator(true); 92 NodeWrapper node = createNode(rootNode); 93 gen.writeStartArray; 94 convertNodeToJSON(node); 95 gen.writeEndArray; 96 return gen.getAsString; 97 } 98 99 100 public class NodeWrapper { 101 102 //current node name 103 public String nodeName{get;set;} 104 105 //current node id 106 public String nodeId{get;set;} 107 108 //if current node isn't root,set it's parent parentNodeId 109 public String parentNodeId{get;set;} 110 111 //if this node set as a parent node,does it has child node 112 public Boolean hasChildNodes{get;set;} 113 114 //if current node is leaf node,set to true 115 public Boolean isLeafNode{get;set;} 116 117 118 //all of child nodes of current node 119 public List childNodes{get;set;} 120 121 public NodeWrapper { 122 hasChildNodes = false; 123 } 124 } 125 126 }2.TreeController:調用TreeUtil實現資料獲取
1 public class TreeController { 2 3 public Boolean selectable {get; set;} 4 5 public String selectNodeKeys {get; set;} 6 7 public TreeViewController{ 8 selectable = false; 9 selectNodeKeys = 'No value selected'; 10 } 11 12 public String JsonData {get; set;} 13 14 public String getJsonString { 15 if (JsonData == null){ 16 JsonData = TreeUtil.getTreeAndSubTrees; 17 } 18 return JsonData; 19 } 20 21 }3.TreeComponent:通過jquery的dyna tree 庫實現樹形結構實現
1 2 3 4 5 6 7 8 9 10 11 12 41 42 43 444.TreeView.page:調用component實現顯示
1 2 3 45 Value: 6
7 8 9
效果展示：
總結：實現樹形結構可以有多種js庫選擇， 後臺大部分需要做的就是拼json串， 通過指定的要求實現前臺的展示， 瞭解樹形結構如何設計更加重要。