Flex Tree组件

1、给Tree设置交替行的颜色(alternatingItemColors)

2、设置展开第一级、设置全部展开

3、可任意选中Tree中的某个节点***/根据功能，选择到某个节点

4、设置Tree打开关闭的过渡时间

5、判断点击的节点是不是想要的数据

6、点击某信息，判断Tree中是否存在，存在选中

7、设置不同级别显示不同图标，控制层级前面的三角号是否可存在或替换其他图标(引用外部文件TreeitemRenderer,控制三角号样式?? ????? disclosureOpenIcon="@Embed(source='assets/down.png')"
?? ??? ??? ? disclosureClosedIcon="@Embed(source='assets/right.png')")

效果图:

1、Tree的基础代码：

??? <mx:Tree id="Global_Tree"
?? ??? ??? ? openDuration="1000"
?? ??? ??? ? selectable="true"
?? ??? ??? ? openItems="{this.xml.@SNAME}"
?? ??? ??? ? alternatingItemColors="[#FFFFFF,#EEEEEE]"
?? ??? ??? ? backgroundImage="@Embed(source='assets/tree.png')"
?? ??? ??? ? itemRenderer="cn.com.common.TreeitemRenderer"
?? ??? ??? ? width="250"
?? ??? ??? ? height="100%"
?? ??? ??? ? labelField="@SNAME"
?? ??? ??? ? showRoot="false"
?? ??? ??? ? dataProvider="{xml}"
?? ??? ??? ? itemClick="Global_Tree_itemClickHandler(event)"/>

2、任意选中Tree的某个节点

#1通过数据库返回一个String类型，并转换成XML

			private function findParkingTreeResultHandler(event:ResultEvent):void
			{
				var xmlString:String=event.result as String;
				if (xmlString != "<Root/>")
				{
					this.xml=new XML(xmlString);
					//循环最后一层节点的数据，可循环任意一层
					for each (var treeItem:XML in xml.children().children().children())
					{
						//如果条件成立，选中并获取相关信息
						if (treeItem.@MYDATA == "PAKINGLOT")
						{
							var s:String="";
							Global_Tree.selectedItem=treeItem;
							break;
						}

					}
					//展开Tree
					ExpandAll();
				}
			}

			private function ExpandAll():void
			{
				if (!Global_Tree.isItemOpen(XML(this.xml.NODE)))
				{
					this.Global_Tree.expandItem(XML(this.xml.NODE),true,true);
				}
				//展开第一级节点
				//	this.Global_Tree.expandItem(XML(this.xml..NODE.(@MYDATA == "GLOBAL")),true);
				//展开全部节点
				for each (var item:Object in Global_Tree.dataProvider)
				{
					Global_Tree.expandChildrenOf(item,true);
				}

				//获取默认选中的节点信息
				Global_Tree.callLater(function():void
					{
						if (Global_Tree.selectedItem != null)
						{
							parkNameStr=Global_Tree.selectedItem.@SNAME;
							parkIdStr=Global_Tree.selectedItem.@SID;
					
						}
					});
			}

#3点击某信息，判断Tree中是否存在，存在选中，本例中，选择的是一个DataGrid中的

[Bindable]
				private var S_Item:XML;//循环main中的Tree，记录被选中的车站Item
				[Bindable]
				private var AreaXML:XML;//点击区域DataGrid时，存储的该区域XML		
				public function linkbutton1_clickHandler(event:MouseEvent):void
				{
					var str:String=event.target.label;
					AreaXML=XML(globalMain.xml..NODE.(@SNAME == str));//获取与Tree相同的Tree节点
					//	globalMain.Global_Tree.openItems = [XML(globalMain.xml.NODE),XML(globalMain.xml..NODE.(@SNAME == str))];
					Select_Item(str);
					Show_Select();
				}
				
				private function Select_Item(str:String):void
				{
					var treeItem:XML;
					for each (treeItem in globalMain.xml.children().children())  
					{
						if(str == treeItem.@SNAME)
							S_Item=treeItem;
					}
					Show_Select();
				}
				
				private function Show_Select():void
				{
					globalMain.Global_Tree.callLater(function():void
					{
						globalMain.Global_Tree.selectedItem=S_Item;
					});
				}

TreeitemRenderer文件内容：

package cn.com.common
{
	import flash.events.Event;
	import flash.events.MouseEvent;

	import mx.collections.ICollectionView;
	import mx.collections.IList;
	import mx.collections.IViewCursor;
	import mx.controls.Alert;
	import mx.controls.CheckBox;
	import mx.controls.Image;
	import mx.controls.Label;
	import mx.controls.Text;
	import mx.controls.Tree;
	import mx.controls.treeClasses.ITreeDataDescriptor;
	import mx.controls.treeClasses.TreeItemRenderer;
	import mx.controls.treeClasses.TreeListData;

	import spark.components.Button;
	import spark.components.RadioButton;

	/**
	 * TreeItemRenderer
	 * @author Montage
	 */
	public class TreeitemRenderer extends TreeItemRenderer
	{
		public function TreeitemRenderer()
		{
			super();
		}

		/**
		 * 表示CheckBox控件从data中所取数据的字段
		 */

		[Embed(source="../../../assets/tree/treeIcom.png")]
		private var globalicon:Class;
		[Embed(source="../../../assets/tree/areaIcon.png")]
		private var areaicon:Class;
		[Embed(source="../../../assets/tree/parkIcon.png")]
		private var parkicon:Class;
		protected var checkBox:CheckBox;
		protected var checkBox1:Image;
		protected var image1:Image;
		protected var but:Button;

		/**
		 * 构建CheckBox
		 */
		override protected function createChildren():void
		{
			super.createChildren();
			/**checkBox=new CheckBox();
			   addChild(checkBox);
			   checkBox.addEventListener(Event.CHANGE,changeHandler);
			 * */

			checkBox1=new Image();
			checkBox1.width=16;
			checkBox1.height=16;
			addChild(checkBox1);

			image1=new Image();
			image1.width=14;
			image1.height=14;
			addChild(image1);
		}

		private function But_MouSEOut(event:MouseEvent):void
		{

		}

		/**
		 * 点击checkbox时,更新dataProvider
		 * @param event
		   protected function changeHandler(event:Event):void
		   {
		   if (data.@selected != "")
		   {
		   data.@selected=checkBox.selected.toString();
		   var myListData:TreeListData=TreeListData(this.listData);
		   var tree:Tree=Tree(myListData.owner);
		   toggleChildren(data,tree); //级联勾选CheckBox方法
		   }
		   }

		   private function toggleChildren(item:Object,tree:Tree):void
		   {
		   if (item == null)
		   {
		   return;
		   }
		   else
		   {
		   var treeData:ITreeDataDescriptor=tree.dataDescriptor;
		   var tmpTree:IList=tree.dataProvider as IList;
		   item.@selected=checkBox.selected;
		   tmpTree.itemUpdated(item,"_selectedField",item.@selected,checkBox.selected);

		   if (treeData.hasChildren(item))
		   {
		   var children:ICollectionView=treeData.getChildren(item);
		   var cursor:IViewCursor=children.createCursor();
		   while (!cursor.afterLast)
		   {
		   toggleChildren(cursor.current,tree);
		   cursor.moveNext();
		   }
		   }
		   }
		   }
		 */

		/**
		 * 初始化控件时,给checkbox赋值
		 */
		override protected function commitProperties():void
		{
			super.commitProperties();
			/**if (data != null && data.@selected != "")
			   {
			   if (data.@selected == "true")
			   {
			   checkBox.selected=true;
			   }
			   else
			   {
			   checkBox.selected=false;
			   }
			   }
			   else
			   {
			   checkBox.selected=false;
			 }**/
			if (data != null && data.@MYDATA == "GLOBAL")
			{
				image1.source=globalicon;
			}
			else if (data != null && data.@MYDATA == "AREA")
			{
				image1.source=areaicon;
			}
			else if (data != null && (data.@MYDATA == "PAKINGLOT" || data.@MYDATA == "PARTITION"))
			{
				image1.source=parkicon;
			}
		}

		/**
		 * 重置itemRenderer的宽度
		 */
		override protected function measure():void
		{
			super.measure();
			//measuredWidth+=checkBox.getExplicitOrMeasuredWidth();
			measuredWidth+=checkBox1.getExplicitOrMeasuredWidth()+5;
			measuredWidth+=image1.getExplicitOrMeasuredWidth();
		}

		/**
		 * 重新排列位置,将label后移
		 * @param unscaledWidth
		 * @param unscaledHeight
		 */
		override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void
		{
			super.updateDisplayList(unscaledWidth,unscaledHeight);
			var startx:Number=data ? TreeListData(listData).indent : 0;

			if (disclosureIcon)
			{
				disclosureIcon.x=startx;
				startx=disclosureIcon.x + disclosureIcon.width;
				disclosureIcon.setActualSize(disclosureIcon.width,disclosureIcon.height);
				disclosureIcon.visible=data ? TreeListData(listData).hasChildren : false;
			}

			if (icon)
			{
				icon.x=startx;
				startx=icon.x + icon.measuredWidth;
				icon.setActualSize(icon.measuredWidth,icon.measuredHeight);
			}

			//checkBox.move(startx,(unscaledHeight - checkBox.height) / 2);

			image1.move(startx,(unscaledHeight - image1.height) / 2);
			label.x=startx + image1.getExplicitOrMeasuredWidth();
			checkBox1.move(label.x + label.getExplicitOrMeasuredWidth(),(unscaledHeight - checkBox1.height) / 2);
		}
	}
}

自定义样式效果图：