`
zhanshenlvbu
  • 浏览: 111405 次
社区版块
存档分类
最新评论

Flex Tree节点的展开与收缩

    博客分类:
  • Flex
阅读更多

<?xml version="1.0" encoding="utf-8"?>
<!--展开或关闭tree的节点, -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx">
	<fx:Script>
		<![CDATA[
			protected function XMLTree_renderHandler (event:Event):void
			{
				this.XMLTree.expandItem(XML(this.treeData.node), true, true);
			}
			
			//展开所有节点
			protected function button1_clickHandler (event:MouseEvent):void
			{
				collapseHandler();
				this.XMLTree.openItems = this.treeData..node;
			}
				
			//展开树的第一层
			protected function button2_clickHandler (event:MouseEvent):void
			{
				collapseHandler();
				this.XMLTree.expandItem(XML(this.treeData.node), true, true);
			}
			
			//展开名为child5的节点
			protected function button3_clickHandler (event:MouseEvent):void
			{
				collapseHandler();
				//方法一
				this.XMLTree.openItems = [XML(this.treeData.node), XML(this.treeData..
					node.(@label == 'Child 5'))];
				//方法二 
				//                if (!XMLTree.isItemOpen(XML(this.treeData.node)))
				//                {
				//                    this.XMLTree.expandItem(XML(this.treeData.node), true, true);
				//                }
				//                this.XMLTree.expandItem(XML(this.treeData..node.(@label == 'Child 5')),
				//                    true, true);
			}
			
			//收起全部节点
			protected function collapseHandler ():void
			{
				this.XMLTree.openItems = [];
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<fx:XMLList id="treeData">
			<root>
				<node label="Parent 1">
					<node label="Child 1"/>
					<node label="Child 2">
						<node label="Grandchild 1"/>
						<node label="Grandchild 2"/>
					</node>
					<node label="Child 3"/>
					<node label="Child 4"/>
					<node label="Child 5">
						<node label="Grandchild 1"/>
						<node label="Grandchild 2"/>
					</node>
				</node>
			</root>
		</fx:XMLList>
	</fx:Declarations>
	<s:layout>
		<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
	</s:layout>
	<s:VGroup width="400" horizontalAlign="center">
		<mx:Tree id="XMLTree" width="100%" height="270" showRoot="false" labelField="@label" dataProvider="{this.treeData}" borderVisible="false"/>
		<s:HGroup>
			<s:Button label="展开所有节点" click="button1_clickHandler(event)"/>
			<s:Button label="展开第一层" click="button2_clickHandler(event)"/>
			<s:Button label="展开 名为Child5的节点" click="button3_clickHandler(event)"/>
			<s:Button label="收缩树" click="collapseHandler()"/>
		</s:HGroup>
	</s:VGroup>
</s:Application>
 
分享到:
评论

相关推荐

    Flex tree的用法

    让我们深入了解一下Flex Tree的用法以及与XML数据结合的方式。 1. **Flex Tree的基本用法** - **创建Tree组件**: 在Flex中,你可以通过在MXML或ActionScript中定义`mx.controls.Tree`组件来创建Tree。 - **数据...

    flex tree 教程二

    在Flex中,Tree组件是基于MX组件集的一部分,它允许用户通过节点展开和折叠来探索层级数据。每个节点可以包含子节点,形成树状结构。创建和操作Tree组件主要涉及以下几个方面: 1. **数据模型**:Flex Tree组件依赖...

    flex Tree 复选框。

    让我们深入探讨这个主题,了解如何实现Flex Tree复选框以及其与父目录状态之间的交互。 首先,我们要知道如何在Flex Tree组件中添加复选框。在Flex中,我们可以自定义TreeItemRenderer来实现这个功能。...

    flex tree+checkbox级联勾选

    Flex Tree是基于Adobe Flex技术的一种组件,它能够展示层次结构的数据,并且支持节点的展开、折叠以及动态加载。每个节点都可以包含子节点,形成一个层级结构。在Flex中,我们可以使用mx.controls.Tree类来创建和...

    Flex Tree 中Checkbox

    Flex Tree 是一种在Adobe ...总结来说,“Flex Tree 中Checkbox”涉及到Flex组件的自定义、事件处理、数据模型与视图的交互,以及用户体验的优化。通过这些知识点的运用,可以创建一个功能完备且易于使用的多选树组件。

    flex treeDemo展开滚动到特定的节点

    项目开发中经常需要展开并选择滚动到特定节点,网上也有很多人发帖求方法,特写了一个满足该需要的demo,供参考。

    flex中 Tree树节点内部拖动实例(此实例限制了什么节点可以拖动及拖动到什么位置)

    这个实例涉及的是在Flex中的Tree组件实现节点的内部拖放功能,这对于创建交互式用户界面,尤其是数据层级结构的展示非常有用。在本文中,我们将详细探讨如何在Flex的Tree组件中实现节点的拖放操作,并且限制可拖动的...

    Flex Tree增加虚线连接

    在Flex Tree中,连接线通常用来表示节点间的父子关系,而"Flex Tree增加虚线连接"则涉及到如何为这些连接线添加虚线样式,以满足特定的视觉效果和设计需求。 在Flex Tree中实现虚线连接,我们需要理解以下几个关键...

    Flex Tree快速定位树结点

    总结起来,"Flex Tree快速定位树结点"是一个提高用户交互体验的功能,它通过监听用户输入并搜索匹配的树节点,然后自动展开或选择目标节点,方便用户快速找到所需信息。在Flex编程中,实现这一功能涉及UI设计、事件...

    flex tree控件

    默认情况下,Flex Tree控件为每个节点提供预设的图标,如展开/折叠箭头。要去除这些默认图标,我们需要在NodeRenderer类中进行定制。创建一个新的MXML或ActionScript类,继承自mx.controls.treeClasses....

    flex Tree checkbox 修改过后的

    在Flex中实现Tree与Checkbox结合的关键点包括: 1. **创建自定义TreeItemRenderer**: 为了在每个Tree节点前面添加复选框,你需要创建一个自定义的TreeItemRenderer类。这个类将扩展默认的TreeItemRenderer,并...

    Flex Tree 刷新数据源后,重新打开指定节点的解决方案

    Flex Tree 刷新数据源后,重新打开指定节点的解决方案,不需要延迟等其他手段

    flex tree 修改icon方法

    3. **数据绑定**:在自定义渲染器中,我们可以利用Flex的数据绑定功能,将Image组件的source属性与数据源的某个字段绑定。这样,当数据源发生变化时,图标会自动更新。例如,如果root对象有一个名为`iconUrl`的字段...

    flex tree icon

    理解Flex Tree的源码有助于开发者定制功能,比如自定义节点渲染器,实现更复杂的交互效果,或者优化性能。源码分析可以帮助开发者了解内部工作原理,以便进行扩展和优化。 至于“工具”,可能是指使用Flex Builder...

    flex带复选框的tree,flex checkboxtree

    在Flex CheckboxTree中,每个树节点都有一个与之关联的复选框。当用户点击复选框时,相应的树节点会被选中或取消选中。开发者可以通过监听CheckBoxTree的事件来处理这些变化,例如,当节点的选中状态改变时,更新...

    Flex Tree组件的实线连接线

    Flex Tree组件是Adobe Flex框架中的一个关键元素,用于展示层次结构数据。在默认情况下,Tree组件的节点之间通常使用虚线进行连接,以表示它们之间的层级关系。然而,有时候我们可能需要自定义这些连接线,比如将...

    flex中利用tree中的子节点实现的导航

    flex中利用tree中的子节点与自定义组件实现的在同一页面中实现导航

    Flex Tree 的右键菜单事件

    它允许用户通过展开和折叠节点来浏览和操作数据。右键菜单则为用户提供了一种方便的交互方式,用户可以通过点击鼠标右键触发自定义的上下文菜单,执行特定的操作。本篇文章将深入探讨如何在Flex Tree组件中实现右键...

    flex tree 拖拽

    Flex Tree 是一种基于 Adobe Flex 技术实现的可交互树形数据结构组件,它允许用户以图形化的方式查看和操作层次结构数据。在 Flex 应用中,Tree 控件经常用于展示具有层级关系的数据,例如文件系统、组织结构或者...

    Flex4的Tree控件加CheckBox

    Tree控件在Flex中用于展示层次结构的数据,它允许用户展开和折叠节点,查看和导航数据结构。在很多情况下,用户可能需要选择一个或多个节点,这就是添加CheckBox的用处。通过为每个节点添加CheckBox,用户可以通过...

Global site tag (gtag.js) - Google Analytics