flex结构树实现

    可以智能的添加或删除节点，可以横向展示，纵向展示

    效果如下：

 

关键代码：

 

tree.mxml

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   xmlns:visualizer="com.kapit.visualizer.*" 
			   preinitialize="changeInterface()"  
			   creationComplete="initPage()"
			   minWidth="955" 
			   minHeight="600"
			   backgroundColor="#d1e3f5"
			   verticalCenter="middle"
			   horizontalCenter="auto">
	  <fx:Script source="tree.as" />
	<fx:Script>
		<![CDATA[
		import com.kapit.visualizer.LayoutConstants;
		import com.kapit.visualizer.events.VisualizerEvent;
		import com.kapit.visualizer.renderer.GenericSprite;
		
		import mx.controls.Image;
		import mx.events.ToolTipEvent;
		
		[Bindable]
		private var linkStyle:Object={
			thickness:1,
			color:0x000000,
			alpha:0.6,
			pixelHinting:false,
			scaleMode:"normal",
			caps:"none",
			joints:null,
			miterLimit:3,
			onLength:5,
			offLength:5
		};
		
		//换肤
		private function changeInterface():void
		{
			var skinPath:String="css/flex_purple.swf";
			try
			{						
				if(null!=skinPath && ""!=skinPath && skinPath.lastIndexOf(".swf")!=-1)
				{
					styleManager.loadStyleDeclarations(skinPath,true);
				}
			}
			catch(error:Error)
			{ 	}
		}
		
		
		private function onCreationComplete():void
		{
		var dp:Array = [	{label: "Left to Right", data: LayoutConstants.ORIENTATION_LEFT_RIGHT},
		{label: "Top to Bottom", data: LayoutConstants.ORIENTATION_TOP_DOWN},
		{label: "Bottom to Top", data: LayoutConstants.ORIENTATION_BOTTOM_UP},
		{label: "Right to Left", data: LayoutConstants.ORIENTATION_RIGHT_LEFT}
		];
		
		
		var dpLink:Array = [	{label: "Straight", data: LayoutConstants.STRAIGHT_LINE},
		{label: "Straight polyline", data: LayoutConstants.STRAIGHT_POLYLINE},
		{label: "Curved polyline", data: LayoutConstants.CURVED_POLYLINE},
		{label: "Orth. polyline", data: LayoutConstants.ORTHOGONAL_STRAIGHT_POLYLINE},
		{label: "Orth. curved", data: LayoutConstants.ORTHOGONAL_CURVED_POLYLINE}
		];
		}
		//设置默认值 
		private function setVisualizerProperties():void
		{
		myVisualizer.hierarchicalTreeLayout.layerDistance=30;
		myVisualizer.hierarchicalTreeLayout.defaultNodeDistance=30;
		myVisualizer.hierarchicalTreeLayout.orientation=LayoutConstants.ORIENTATION_LEFT_RIGHT;
		myVisualizer.hierarchicalTreeLayout.edgeDrawing=LayoutConstants.ORTHOGONAL_STRAIGHT_POLYLINE;
		}
			
		 private function changeDirect():void
		 {
			 if(myVisualizer.hierarchicalTreeLayout.orientation==LayoutConstants.ORIENTATION_LEFT_RIGHT)
			 {
			       myVisualizer.hierarchicalTreeLayout.orientation=LayoutConstants.ORIENTATION_TOP_DOWN;
			 }
			 else
			 {
				 myVisualizer.hierarchicalTreeLayout.orientation=LayoutConstants.ORIENTATION_LEFT_RIGHT;
			 }
		 }
			 
		
		private function setToolTip(event:ToolTipEvent):void
		{
		var _data:XML = ((event as ToolTipEvent).currentTarget as GenericSprite).data as XML;
		var toolTipContainer:Tip = new Tip();
		toolTipContainer.names = _data["@names"];
		toolTipContainer.kpiId = _data["@kpiId"];
		toolTipContainer.image = _data["@image"];
		toolTipContainer.desc=_data["@desc"];
		event.toolTip=toolTipContainer;
		}
		]]>
	</fx:Script>
	
	
	<mx:VBox width="100%" height="100%" horizontalAlign="left" verticalScrollPolicy="off" verticalAlign="middle">
	<mx:HBox width="100%" height="5%">
		<mx:ApplicationControlBar paddingTop="1" paddingBottom="1" paddingLeft="2" paddingRight="1" width="100%" fontSize="12">
			<mx:Button id="addButton" label="横向" click=" changeDirect()" />
			<mx:Button id="deleteButton" label="纵向" click=" changeDirect()"/>
			<mx:Label text="选择结点指标代码:"/>
			<mx:Label width="300" id="pIndexCode"/>
		</mx:ApplicationControlBar>
	</mx:HBox>
		<mx:HBox width="100%" height="95%">
		<visualizer:Visualizer
			id="myVisualizer"
			width="100%"
			height="100%"
			layout="{LayoutConstants.HIERARCHICAL_TREE_LAYOUT}"
			buttonMode="true"
			scaleX="0.8"
			linkStyle="{linkStyle}"
			defaultNodeWidth="165"
			defaultNodeHeight="42"
			tooltipRendererFunction="{setToolTip}"
			visibilityLevel="{2}"
			verticalScrollPolicy="auto"
			horizontalScrollPolicy="auto"
			multimediaClass="{Image}"
			multimediaDataSource="@image"
			dataProvider="{dataProvider}"
			elementClicked="_elementClick(event)"
			creationComplete="onCreationComplete(); setVisualizerProperties()"/>
	</mx:HBox>
	</mx:VBox>
</s:Application>

 

 

tree.as

 

import mx.controls.Alert;
import mx.rpc.events.ResultEvent;

[Bindable]

private var dataSource:String= "<datas names='中国' image='showText.swf?dataString=中国&color=ffffff' kpiId='0'  indexId='0' desc='中国' >"+
	"<datas names='湖南' image='showText.swf?dataString=湖南& color=ffffff' kpiId='001'  indexId='001' desc='湖南' >"+
		"<datas names='郴州' image='showText.swf?dataString=郴州&color=ffffff' kpiId='001001'  indexId='001001' desc='郴州' />"+
		"<datas names='株洲' image='showText.swf?dataString=株洲& color=ffffff' kpiId='001002'  indexId='001002' desc='株洲' />"+
		"<datas names='衡阳' image='showText.swf?dataString=衡阳&color=ffffff' kpiId='001003'  indexId='001003' desc='衡阳' />"+
	"</datas>"+
	"<datas names='广东' image='showText.swf?dataString=广东&color=ffffff' kpiId='002'  indexId='002' desc='广东' >"+
		"<datas names='广州' image='showText.swf?dataString=广州&color=ffffff' kpiId='002001'  indexId='002001' desc='广州' />"+
		"<datas names='深圳' image='showText.swf?dataString=深圳&color=ffffff' kpiId='002002'  indexId='002002' desc='深圳' />"+
	"</datas>"+
	"</datas>";
private var dataProvider:XML=new XML(dataSource);	//节点XML
public function initPage():void
{
	//dataProvider = dataSource as XML;
	//Alert.show(dataProvider,"ddddddddd",Alert.OK);
}
//向后台请求节点数据返回
public function resultHandler(event:ResultEvent):void
{
	var obj:Object =dataSource;//将返回结果存到object对象中
	dataProvider=obj as XML;	
	//加载后出现趋势图	
	if(dataProvider.length()>0)
	{
		var kid:String=dataProvider["@kpiId"];
		var indexId:String=dataProvider["@indexId"];	
		var desc:String=dataProvider["@desc"];
	    var m:String = dataSource;
	}
}


//点击节点
private function _elementClick(event:VisualizerEvent):void
{	

	var _data:XML=(((event as VisualizerEvent).items.pop()) as GenericSprite).data as XML;
	//得到选择的参数
	var kid:String=_data["@kpiId"];
	var indexId:String=_data["@indexId"];	
	var desc:String=_data["@desc"];
	var image:String=_data["@image"]
    //Alert.show(kid,"选择节点",Alert.OK);
}

这里只给出了部分代码，如果需要全部源码可以评论中加上邮箱，我会尽快发给大家~