Flex 树形控件（Tree ）的使用

nianshi

浏览: 418544 次
性别:
来自: 济南

最近访客更多访客>>

hbzyb

zhangxiaopei

gaohejie

showerliang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Flex

Flex XML Adobe

一、树形控件的常用属性

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代码

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

分享到：

Flex使用ArrayCollection的filterFunction ... | FLEX3中应用CSS完全详解手册(下)

2010-12-13 16:24
浏览 3479
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论