一、树形控件的常用属性
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>
<?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>