树形控件(Tree)的使用

一、树形控件的常用属性

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" fontSize="12">
<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>
-->

<!-- 重新设置图标
folderOpenIcon="@Embed(source='images/tree/open.png')"
folderClosedIcon="@Embed(source='images/tree/close.png')"
defaultLeafIcon="@Embed(source='images/tree/leaf.png')"
-->

<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:ApplicationControlBar>

<mx:Panel x="10" y="10" width="250" height="95%" layout="absolute" title="树形控件">
<mx:Tree x="0" y="0" width="100%" height="100%" id="tree1"
labelFunction="labelFunc"
dataProvider="{noteList}"
showRoot="false"
alternatingItemColors="[#FFFFFF,#EEEEEE]"
dragEnabled="true"
dropEnabled="true"
dragMoveEnabled="true"
doubleClickEnabled="true"
itemDoubleClick="itemDoubleClick(event)"
itemClick="itemClick(event)"
indentation="15"/>
</mx:Panel>

<mx:Canvas width="1077" height="95%" x="268" y="12">
<mx:Label text="您选择的节点:"  x="10" y="28"/>
<mx:Text width="384" color="#FCFEFE" fontWeight="bold" id="txt1" x="100" y="28"/>
</mx:Canvas>

</mx:Application>

四、效果图