OrgChart(組織機構圖) - Flex

前段時間，用Flex寫了個OrgChart，截圖以下 


iLog有個很不錯的，但是收錢，799美刀。你能夠看這裏 http://visudemos.ilog.com/webdemos/orgchart/orgchart.html 。 

俺農村來的，比較窮，最終仍是本身「創造」了一個。 

其實算法仍是很就簡單地，核心就是遞歸算法。 

我寫的那個是隻能接受XML的。 

核心代碼： 

Java代碼  

1. /** 
2.          * create nodes, 
3.          * calculate depth. 
4.          * */  
5.         private function _createSubNodes(data:ICollectionView, parentNode:IOrgChartNode):void{  
6.             for(var cursor:IViewCursor = data.createCursor(); !cursor.afterLast; cursor.moveNext()){  
7.                   
8.                 var node:IOrgChartNode = _createNode(cursor.current, parentNode);  
9.                   
10.                 if(_treeDataDesciptor.isBranch(cursor.current, data)   
11.                     &&  _treeDataDesciptor.getChildren(cursor.current, data).length != 0){  
12.                       
13.                     var __tmp:ICollectionView = _treeDataDesciptor.getChildren(cursor.current, data);  
14.                     _createSubNodes(__tmp, node);  
15.                 }  
16.             }     
17.         }  
18.         private var _maxX:Number=0;  
19.         /** 
20.          * Wrap data with IOrgChartNode 
21.          * */  
22.         private function _createNode(data:Object, parentNode:IOrgChartNode):IOrgChartNode{  
23.               
24.             var node:IOrgChartNode = new DefaultOrgChartNode();  
25.               
26.             node.addEventListener(MouseEvent.CLICK, nodeClick);  
27.             node.addEventListener(MouseEvent.MOUSE_OVER, nodeMouseOver);  
28.             node.addEventListener(MouseEvent.ROLL_OVER, nodeRollOver);  
29.             node.addEventListener(MouseEvent.MOUSE_OUT, nodeMouseOut);  
30.               
31.             node.parentNode = parentNode;  
32.             node.data = data;  
33.               
34.                         node.width = hItemWidth;  
35.             node.height = hItemHeight;  
36.               
37.               
38.             //起始時，根節點在最左邊  
39.             if(parentNode == null){  
40.                 node.x = 0;  
41.                 node.y = 0;  
42.                 //_maxX = node.width + _horizonalSpacing;  
43.             }else{  
44.                 if(node.previousSibling == null){  
45.                     //與父節點在同一中軸線上  
46.                     //trace(node);  
47.                     node.x = parentNode.x + (parentNode.width - node.width)/2;                    
48.                     _maxX = node.x + node.width;  
49.                 }else{  
50.                       
51.                         node.x = _maxX + _horizonalSpacing;   
52.                         _maxX = node.x + node.width;  
53.                 }  
54.                 //移動父節點  
55.                 updateParentNodePosition(node.parentNode );               
56.                 node.y = parentNode.y + parentNode.height + _verticalSpacing;  
57.             }  
58.               
59.             _nodes.addItem(node);  
60.               
61.             return node;  
62.         }  
63.         /** 
64.          * 遞歸移動全部父節點的位置。 
65.          * */  
66.         private function updateParentNodePosition(node:IOrgChartNode):void{  
67.             if(node != null){  
68.                 var subs:ArrayCollection = node.subNodes;  
69.                 var lastChild:IOrgChartNode = subs.getItemAt(subs.length - 1 ) as IOrgChartNode;  
70.                 var firstChild:IOrgChartNode = subs.getItemAt(0) as IOrgChartNode;  
71.                   
72.                 node.x = firstChild.x + ( lastChild.x - firstChild.x + lastChild.width - node.width) / 2;  
73.                       
74.                 //遞歸更新直到根節點  
75.                 updateParentNodePosition(node.parentNode);   
76.             }  
77.         }  

基本就是一個遞歸右移父節點的算法。 

而後把全部的節點統一的Render就OK了。