flex 树形控件（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代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.     <mx:Script>  
4.         <![CDATA[  
5.             import mx.events.ListEvent;  
6.               
7.             //展开所有节点  
8.             private function openAllNote():void{  
9.                 tree1.openItems = noteList..note;  
10.             }  
11.               
12.             //关闭所有节点  
13.             private function closeAllNote():void{  
14.                 tree1.openItems = [];  
15.             }  
16.               
17.             private function itemClick(event:Event):void{  
18.                 /*  
19.                 var selectedNote:XML = Tree(event.target).selectedItem as XML;  
20.                 var len:int = selectedNote.child("note").length();  
21.                 if(len>0){  
22.                     txt1.text = "树枝节点";  
23.                 }else{  
24.                     txt1.text = "叶子节点";  
25.                 }  
26.                 */  
27.                   
28.                 //限制树枝节点不能选择  
29.                 var note:Object = event.currentTarget.selectedItem;  
30.                 if(tree1.dataDescriptor.isBranch(note)){  
31.                     tree1.selectedItem = null;  
32.                     if(tree1.dataDescriptor.hasChildren(note)){  
33.                         txt1.text = note.@label + "(" + tree1.dataDescriptor.getChildren(note).length + ")";  
34.                     }  
35.                 }else{  
36.                     txt1.text = note.@label;  
37.                 }  
38.             }  
39.               
40.             //双击节点时展开或关闭节点  
41.             private function itemDoubleClick(event:ListEvent):void{  
42.                 var note:XML = tree1.selectedItem as XML;  
43.                 tree1.expandItem(note, !tree1.isItemOpen(note));  
44.             }  
45.               
46.             //自定义节点标签  
47.             private function labelFunc(note:Object):String{  
48.                 var suffix:String = "";  
49.                 if(tree1.dataDescriptor.hasChildren(note)){  
50.                     suffix = "(" + tree1.dataDescriptor.getChildren(note).length + ")";  
51.                 }  
52.                 return note.@label + suffix;  
53.             }  
54.         ]]>  
55.     </mx:Script>  
56.        
57.     <!-- 通过样式去掉节点的图标 -->  
58.     <mx:Style>    
59.         Tree {    
60.             folderClosedIcon: ClassReference(null);    
61.             folderOpenIcon: ClassReference(null);    
62.             defaultLeafIcon: ClassReference(null);    
63.         }    
64.     </mx:Style>  
65.   
66.     <mx:XMLList id="noteList">  
67.         <note label="root">  
68.             <note label="酬金管理" open="true">  
69.                 <note label="酬金方案启用">  
70.                     <note label="方案启用申请单制作"/>  
71.                     <note label="方案启用申请单审批"/>  
72.                 </note>  
73.                 <note label="酬金方案查询">  
74.                     <note label="方案方案查询"/>  
75.                 </note>  
76.                 <note label="数据查询">  
77.                     <note label="酬金清单查询"/>  
78.                     <note label="网点月度违规情况查询"/>  
79.                     <note label="窜货号码清单"/>  
80.                     <note label="售价违规号码清单"/>  
81.                     <note label="月度酬金计算情况查询"/>  
82.                 </note>  
83.                 <note label="酬金报表">  
84.                     <note label="店面月度酬金统计表"/>  
85.                     <note label="店面月度酬金银行报表"/>  
86.                 </note>  
87.             </note>  
88.         </note>  
89.     </mx:XMLList>  
90.        
91.     <!-- 控制条 -->  
92.     <mx:ApplicationControlBar dock="true">  
93.         <mx:Button label="打开所有节点" click="openAllNote()"/>  
94.         <mx:Button label="关闭所有节点" click="closeAllNote()"/>  
95.         <mx:Text width="384" fontSize="12" color="#FCFEFE" fontWeight="bold" id="txt1"/>  
96.     </mx:ApplicationControlBar>  
97.        
98.     <mx:Panel x="10" y="10" width="250" height="95%" layout="absolute" fontSize="12" title="树形控件">  
99.         <mx:Tree x="0" y="0" width="100%" height="100%" id="tree1"  
100.             labelFunction="labelFunc"  
101.             dataProvider="{noteList}"  
102.             showRoot="false"  
103.             folderOpenIcon="@Embed(source='images/tree/open.png')"  
104.             folderClosedIcon="@Embed(source='images/tree/close.png')"  
105.             defaultLeafIcon="@Embed(source='images/tree/leaf.png')"  
106.             alternatingItemColors="[#FFFFFF,#EEEEEE]"  
107.             dragEnabled="true"    
108.             dropEnabled="true"    
109.             dragMoveEnabled="true"    
110.             doubleClickEnabled="true"  
111.             itemDoubleClick="itemDoubleClick(event)"  
112.             itemClick="itemClick(event)"  
113.             indentation="15"/>  
114.     </mx:Panel>  
115.        
116. </mx:Application>  

<?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>