OrgChart(组织机构图) - Flex

前段时间,用Flex写了个OrgChart,截图如下 
25183841_jB9r.jpg

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

转载于:https://my.oschina.net/u/865921/blog/140444

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值