树形控件（Tree Control）的使用

一、树形控件的常用属性

      1、dragMoveEnabled：是否在拖放的过程中将节点移动，而不是复制。

      2、folderOpenIcon：展开节点时的节点图标

      3、folderClosedIcon：关闭节点时的节点图标

      4、defaultLeafIcon：叶子节点的图标

      5、openItems：在初始化时展开的节点集。

      6、showRoot：是否显示数据中的根节点。XML格式的数据一般包含根节点，此时该属性应为false；Array类型的数据一般不包含根节点，该属性设置无效。

      7、indentation：节点层次缩进量。

      8、doubleClickEnabled：节点是否支持双击事件。

      9、dragEnabled：是否允许拖动节点。

      10、dropEnabled：在拖动节点的过程中是否允许释放，以移动节点。

      11、alternatingItemColors：节点间隔背景色。

      12、labelField：作为标签显示的数据的属性。

      13、labelFunction：自定义节点标签。

 

二、树形控件的常用事件

      1、itemClick：单击节点触发该事件。

      2、itemDoubleClick：双击节点触发该事件。

 

三、范例

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.events.ListEvent;
			
			//展开所有节点
			private function openAllNote():void{
				tree1.openItems = noteList..note;
			}
			
			//关闭所有节点
			private function closeAllNote():void{
				tree1.openItems = [];
			}
			
			private function itemClick(event:Event):void{
				/*
				var selectedNote:XML = Tree(event.target).selectedItem as XML;
				var len:int = selectedNote.child("note").length();
				if(len>0){
					txt1.text = "树枝节点";
				}else{
					txt1.text = "叶子节点";
				}
				*/
				
				//限制树枝节点不能选择
				var note:Object = event.currentTarget.selectedItem;
				if(tree1.dataDescriptor.isBranch(note)){
					tree1.selectedItem = null;
					if(tree1.dataDescriptor.hasChildren(note)){
						txt1.text = note.@label + "(" + tree1.dataDescriptor.getChildren(note).length + ")";
					}
				}else{
					txt1.text = note.@label;
				}
			}
			
			//双击节点时展开或关闭节点
			private function itemDoubleClick(event:ListEvent):void{
				var note:XML = tree1.selectedItem as XML;
				tree1.expandItem(note, !tree1.isItemOpen(note));
			}
			
			//自定义节点标签
			private function labelFunc(note:Object):String{
				var suffix:String = "";
				if(tree1.dataDescriptor.hasChildren(note)){
					suffix = "(" + tree1.dataDescriptor.getChildren(note).length + ")";
				}
				return note.@label + suffix;
			}
		]]>
	</mx:Script>
	
	<!-- 通过样式去掉节点的图标 -->
	<mx:Style> 
        Tree { 
        	folderClosedIcon: ClassReference(null); 
            folderOpenIcon: ClassReference(null); 
            defaultLeafIcon: ClassReference(null); 
        } 
    </mx:Style>

	<mx:XMLList id="noteList">
		<note label="root">
			<note label="酬金管理" open="true">
				<note label="酬金方案启用">
					<note label="方案启用申请单制作"/>
					<note label="方案启用申请单审批"/>
				</note>
				<note label="酬金方案查询">
					<note label="方案方案查询"/>
				</note>
				<note label="数据查询">
					<note label="酬金清单查询"/>
					<note label="网点月度违规情况查询"/>
					<note label="窜货号码清单"/>
					<note label="售价违规号码清单"/>
					<note label="月度酬金计算情况查询"/>
				</note>
				<note label="酬金报表">
					<note label="店面月度酬金统计表"/>
					<note label="店面月度酬金银行报表"/>
				</note>
			</note>
		</note>
	</mx:XMLList>
	
	<!-- 控制条 -->
	<mx:ApplicationControlBar dock="true">
		<mx:Button label="打开所有节点" click="openAllNote()"/>
		<mx:Button label="关闭所有节点" click="closeAllNote()"/>
		<mx:Text width="384" fontSize="12" color="#FCFEFE" fontWeight="bold" id="txt1"/>
	</mx:ApplicationControlBar>
	
	<mx:Panel x="10" y="10" width="250" height="95%" layout="absolute" fontSize="12" title="树形控件">
		<mx:Tree x="0" y="0" width="100%" height="100%" id="tree1"
			labelFunction="labelFunc"
			dataProvider="{noteList}"
			showRoot="false"
			folderOpenIcon="@Embed(source='images/tree/open.png')"
			folderClosedIcon="@Embed(source='images/tree/close.png')"
			defaultLeafIcon="@Embed(source='images/tree/leaf.png')"
			alternatingItemColors="[#FFFFFF,#EEEEEE]"
			dragEnabled="true" 
            dropEnabled="true" 
            dragMoveEnabled="true" 
            doubleClickEnabled="true"
            itemDoubleClick="itemDoubleClick(event)"
			itemClick="itemClick(event)"
            indentation="15"/>
	</mx:Panel>
	
</mx:Application>