`
kael____
  • 浏览: 19413 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

Flex tree增加,删除,查询并定位节点

    博客分类:
  • flex
阅读更多

直接上代码:

 

<?xml version="1.0" encoding="utf-8"?>
<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" minWidth="955" minHeight="600"
			   >
	<fx:Script>
		<![CDATA[
			import mx.collections.XMLListCollection;
			import mx.controls.Alert;
			
			[Bindable]
			[Embed(source="images/open.png")]
			public var folderOpen:Class;
			
			[Bindable]
			[Embed(source="images/close.png")]
			public var folderClose:Class;
			
			[Bindable]
			[Embed(source="images/file.png")]
			public var fileInfo:Class;
			
			[Bindable]
			private var company:XML=
			<department>
		    	<department name="部门A">
					<department name="小A" />
					<department name="小B" />
				</department>
				
				<department name="部门B">
					<department name="小C">
						<department name="abc">
							<department name="efg"/>
						</department>
						<department name="opqr"/>
						<department name="小D">
							<department name="ff"/>
						</department>
					</department>
		   		</department>
			</department>;
			
			[Bindable]
			private var companyData:XMLListCollection=new XMLListCollection(company.department);
			
			private function addNode():void
			{
				// 新建节点
				var newNode:XML=<employee/>;
				newNode.@name=empName.text;
				// 添加节点
				var xml:XML=XML(tree1.selectedItem);
				if (xml.length() > 0)
				{
					xml[0].appendChild(newNode);
					tree1.expandChildrenOf(tree1.selectedItem,true);
				}
			}
			
			private function removeNode():void
			{
				if (tree1.selectedItem != null)
				{
					var node:XML=XML(tree1.selectedItem);
					Alert.show("根节点不能删除!","[错误]");
					//if(tree.dataDescriptor.root){
						///Alert.show("根节点不能删除!","[错误]");
						//return;
					//}
					var nodeP:XML=node.parent();
					var childrenList:XMLListCollection=new XMLListCollection(XMLList(nodeP).children());
					var i:Number=childrenList.getItemIndex(node);
					childrenList.removeItemAt(i);
					if(childrenList.length == 0)
						tree1.selectedItem = nodeP;
					else{
						if(i == childrenList.length)
							i = i - 1;
						tree1.selectedItem = childrenList.getItemAt(i)
					}
					
				}else{
					Alert.show("请选中一个节点再进行删除!");
				}
			}
			
			/*
			 * 根据节点名字模糊查询
			*/
			private function findNode(key:String):void {
				//descendants()返回除了根节点以外的所有节点,然后根据条件筛选符合条件的结果集
				var list:XMLList  = company.descendants().(@name.indexOf(key) != -1);
				expandParents(list[0]);
				tree1.selectedItem = list[0];
			}
			/*
			 * 展开
			*/
			private function expandParents(xmlNode:XML):void {
				while (xmlNode.parent() != null) {  
					xmlNode = xmlNode.parent();
					tree1.expandItem(xmlNode,true, false);
				}
			}
			
			//展开所有
			private function expandAll():void {
				tree1.expandChildrenOf(tree1.dataProvider[0],true);
			}
			
			//收起所有
			private function closeAll():void {
				tree1.expandChildrenOf(tree1.dataProvider[0],false);
			}
			
		]]>
	</fx:Script>
	<s:layout>
		<s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"/>
	</s:layout>
	<s:Panel title="实现添加和删除节点"
			  width="450"
			  height="450"
			  >
	<s:layout>
		<s:HorizontalLayout/>
	</s:layout>
		<mx:Tree id="tree1" 
				 dataProvider="{company}" 
				 labelField="@name"
				 height="300" showRoot="false"
				 width="260"
				 defaultLeafIcon="{fileInfo}"
				 folderOpenIcon="{folderOpen}"
				 folderClosedIcon="{folderClose}"
				 />
		<mx:VBox>
			<s:Button label="展开所有" click="expandAll()"/>
			<s:Button label="关闭所有" click="closeAll()"/>
			<mx:Button label="删除节点" click="removeNode();"/>
			<mx:HBox>
				<s:TextInput id="empName"
							  width="60"
							  click="{empName.text = ''}"
							  prompt="新节点名"
							  />
				<mx:Button label="添加节点"
						   click="addNode();"/>
			</mx:HBox>	
			<mx:HBox>
				<s:TextInput id="keyName"
							  width="60"
							  prompt="关键字"/>
				<mx:Button label="查找节点"
						   click="findNode(keyName.text)"/>
			</mx:HBox>
		</mx:VBox>
	</s:Panel>
</s:Application>

里面有设置展开和关闭和文件的图片

 

 

分享到:
评论

相关推荐

    Flex Tree快速定位树结点

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

    Flex Tree增加虚线连接

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

    flex Tree 复选框。

    在Flex Tree中,可以通过监听Tree的`itemClick`事件来检测节点的点击,并根据当前节点的选中状态以及其子节点的状态来更新父节点的状态。 1. 全部选中:当父节点的所有子节点都被选中时,父节点应该被设置为全选...

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

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

    Flex tree的用法

    Flex Tree组件是Adobe Flex框架中的一个关键元素,用于在用户界面上展示层次结构的数据。它在各种应用程序中广泛使用,特别是在需要展现具有嵌套结构的数据时,如文件系统、组织结构或者复杂的分类信息。让我们深入...

    flex tree 教程二

    ItemRenderer是负责绘制单个Tree节点的组件。在MXML中指定`itemRenderer`属性即可。 4. **事件处理**:Tree组件支持多种事件,如`itemClick`(点击节点时触发)、`expand`(节点展开时触发)和`collapse`(节点折叠...

    flex tree+checkbox级联勾选

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

    Flex Tree 中Checkbox

    Flex Tree 是一种在Adobe Flex框架中用于展示层次结构数据的组件。它允许用户通过节点来探索和操作数据,而Checkbox的引入则为用户提供了一种多选功能,使得用户可以选择多个树节点。在“Flex Tree 中Checkbox”的...

    flex tree控件

    这个“flex tree控件”主题主要关注如何自定义Tree控件的外观,特别是如何去掉默认的图标并添加线连接来增强视觉效果。下面我们将深入探讨Flex Tree控件的基本概念、自定义节点图标以及使用线条连接节点的方法。 1....

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

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

    flex带复选框的tree,flex checkboxtree

    在Flex中,Tree组件是用于显示层次结构数据的控件,而"flex带复选框的tree"(Flex CheckboxTree)则是对Tree组件的一种扩展,增加了复选框功能,用户可以对树形结构的节点进行选择或全选操作,常用于权限管理、配置...

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

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

    flex Tree checkbox 修改过后的

    为了在每个Tree节点前面添加复选框,你需要创建一个自定义的TreeItemRenderer类。这个类将扩展默认的TreeItemRenderer,并添加一个CheckBox组件。在渲染器中,你需要处理CheckBox的点击事件,以便当用户点击复选框...

    flex tree 修改icon方法

    在这个场景下,我们需要通过编程方式来实现对Tree节点图标的个性化设置。 首先,我们要理解Flex Tree的基本结构。Tree组件由一系列的TreeItemRenderer组成,每个TreeItemRenderer对应树中的一个节点。图标是...

    flex tree icon

    在Flex中,你可以通过设置`Icon`属性来为Tree节点添加图标。例如,你可以为根节点、展开节点、折叠节点等设置不同的图标。同时,如果数据源是XML或ArrayCollection,可以通过数据绑定将图标URL与节点数据关联起来。...

    Flex Tree组件的实线连接线

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

    flex tree 拖拽

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

    Flex Tree 的右键菜单事件

    在这个函数中,我们获取当前选中的Tree节点,然后执行相应的删除操作。 另外,需要注意的是,由于Flex默认不支持Tree组件的右键菜单,所以可能需要对Tree组件进行一些自定义设置,例如禁用默认的上下文菜单: ```...

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

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

    Flex Tree 通过Arraycollection转化为XML数据源,新增、删除、修改功能的整合

    本篇文章将聚焦于如何将ArrayCollection转换为XML数据源,并实现Flex Tree组件的新增、删除和修改功能。以下是详细的解释和步骤。 首先,ArrayCollection是Flex中常用的数据结构,它是一个动态数组,支持数据绑定和...

Global site tag (gtag.js) - Google Analytics