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了。