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

原创 2012年03月27日 17:14:45

直接上代码:

<?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控件是一个比较复杂比较重量级的控件,下面是一棵只有一个节点的简单的Tree,只有一个非叶子节点和一个叶子节点。   图中并没有使用自定义的样式,Tree缺省的样式如下,可以看到fol...

Flex Tree组件

实现功能: 1、给Tree设置交替行的颜色(alternatingItemColors) 2、设置展开第一级、设置全部展开 3、可任意选中Tree中的某个节点***/根据功能,选择到某个节点 4、设置...

Flex4.6创建Tree

图片路径配置写法: [Bindable] [Embed(source="assets/icon/person.png")] public var imgPath:Class; 这样写了下面才好...

flex之DataGrid增、删、改、查

注:我使用的是Flash Builder 4.6 参考文章:http://blog.csdn.net/ycf330/article/details/3862072 ------------------...

AIR 调用外部exe和bat文件的方法

本次测试使用环境:Flex 4.0SDK + Flash CS5 IDE开发环境开发,根据AIR2.0支持本地应用程序的原则!1.   新建一个AIR2.0文档2.   场景中拖入一个按钮 并且实例名...

Flex Tree自动定位节点

xmlns:s="library://ns.adobe.com/flex/spark"           xmlns:mx="library://ns.adobe.com/flex/mx" wid...

Flex tree 模糊查询节点,重复节点再次查询自动下一个

//根据关键字查找节点 private var temp:int = 0; private function searchCategory(key:String):void { v...

Flex 给Tree的每个节点添加自定义图标

此功能通过上一博文中第二种方式

flex Tree 展开特定节点

内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Flex tree增加,删除,查询并定位节点
举报原因:
原因补充:

(最多只允许输入30个字)