`
tangdonglai
  • 浏览: 8786 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

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

    博客分类:
  • Flex
阅读更多

以前在网上找代码,找到的总是不合用,今天我整理一份Flex Tree 通过Arraycollection转化为XML数据源,新增、删除、修改功能的整合,有需要的拿过去,转载请注明出处,不瞎扯了,上图上代码。。。

调用代码:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application backgroundColor="white" creationComplete="resetData();" fontSize="12" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.utils.ArrayUtil;
			import mx.rpc.xml.SimpleXMLDecoder;
			import mx.collections.XMLListCollection;
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			
			[Bindable]
			var xml:XML=new XML();
			
			[Bindable]
			var arrayString:String='[{id:"1",name:"root",parentId:"-1"},\n'+
			'{id:"2",name:"node1-1",parentId:"1"},\n'+
			'{id:"3",name:"node2-1",parentId:"2"},\n'+
			'{id:"4",name:"node2-2",parentId:"2"},\n'+
			'{id:"5",name:"node4-1",parentId:"4"},\n'+
			'{id:"6",name:"node1-2",parentId:"1"},\n'+
			'{id:"7",name:"node5-1",parentId:"5"},\n'+
			'{id:"7",name:"node3-1",parentId:"3"}]';

			var array:ArrayCollection=new ArrayCollection([
			{id:"1",name:"root",parentId:"-1"},
			{id:"2",name:"node1-1",parentId:"1"},
			{id:"3",name:"node2-1",parentId:"2"},
			{id:"4",name:"node2-2",parentId:"2"},
			{id:"5",name:"node4-1",parentId:"4"},
			{id:"6",name:"node1-2",parentId:"1"},
			{id:"7",name:"node5-1",parentId:"5"},
			{id:"7",name:"node3-1",parentId:"3"}
			]);
			
			//显示树(转换数据)
			private function resetData():void{
				xml=new Array2XmlTree().getTreeData(array,"id","parentId");
			}
			//添加当前节点之后的兄弟节点
			private function addAfterNode():void{
				var selectedItemXML:XML=this.tree.selectedItem as XML;
				if(null!=selectedItemXML){
					var afterId:Number=new Date().getMilliseconds();
					var sparentId:String=selectedItemXML.parent().@id;
					var afterNode={id:afterId.toString(),name:testName.text,parentId:sparentId}
					new Array2XmlTree().addAfterNode(afterNode,selectedItemXML);
					changedData.text=xml.toXMLString();
				}
			}
			//添加当前节点之前的兄弟节点
			private function addBeforeNode():void{
				var selectedItemXML:XML=this.tree.selectedItem as XML;
				if(null!=selectedItemXML){
					var beforeId:Number=new Date().getMilliseconds();
					var sparentId:String=selectedItemXML.parent().@id;
					var beforeNode={id:beforeId.toString(),name:testName.text,parentId:sparentId}
					new Array2XmlTree().addBeforeNode(beforeNode,selectedItemXML);
					changedData.text=xml.toXMLString();
				}
			}
			
			//添加子节点
			private function addChildNode():void{
				var selectedItemXML:XML=this.tree.selectedItem as XML;
				if(null!=selectedItemXML){
					var childId:Number=new Date().getMilliseconds();
					var sparentId:String=selectedItemXML.@id;
					var childNode={id:childId.toString(),name:testName.text,parentId:sparentId}
					new Array2XmlTree().addChildNode(childNode,selectedItemXML,tree);
					changedData.text=xml.toXMLString();
				}
			}
			
			//重命名节点
			private function renameNode():void{
				var selectedItemXML:XML=this.tree.selectedItem as XML;
				if(null!=selectedItemXML){
					new Array2XmlTree().renameNode(selectedItemXML,"name",testName.text);
					changedData.text=xml.toXMLString();
				}
			}
			//删除节点
			private function delNode():void{
				var selectedItemXML:XML=this.tree.selectedItem as XML;
				if(null!=selectedItemXML){
					new Array2XmlTree().delNode(selectedItemXML);
					changedData.text=xml.toXMLString();
				}
			}
		]]>
	</mx:Script>
	<mx:Button label="resetData" click="resetData();" x="0" y="479"/>
	<mx:Button label="addAfterNode" click="addAfterNode();" x="414" y="479"/>
	<mx:Button label="addChildNode" click="addChildNode();" x="569" y="479"/>
	<mx:Button label="addBeforeNode" click="addBeforeNode();" x="256" y="479"/>
	<mx:Button label="renameNode" click="renameNode();" x="719" y="479"/>
	<mx:Button label="delNode" click="delNode();" x="867" y="479"/>
	<mx:Tree id="tree" width="250" labelField="@name" dataProvider="{xml}" y="30" height="432" x="0"/>
	<mx:TextArea editable="false" x="276" text="{arrayString}" y="30" width="362" height="432"/>
	<mx:TextArea id="changedData" editable="false" x="674" text="{xml.toXMLString()}" y="30" width="368" height="432"/>
	<mx:Label x="276" y="2" text="初始化arraycollection数据:" width="183"/>
	<mx:Label x="10" y="2" text="树:" width="183"/>
	<mx:Label x="674" y="2" text="转换XML后的数据:" width="183"/>
	<mx:TextInput text="测试节点" id="testName" x="80" y="479"/>
</mx:Application>

 工具类代码:

/**
 * ArrayCollection转换树结构数据、添加、删除、重命名节点
 * Date:2012-04-07
 * Author:Tangdl
 * 
 * 数据转换使用方法:
 * treeData=new Array2Tree().getTreeData(array,"id","parentId","-9999");
 * array:数据库查询数据ArrayCollection
 * id:数据库查询字段标识
 * parentId:数据库查询字段父亲标识
 * -9999:根节点父亲标识,默认为-1
 * 
 * 添加兄弟节点(之后)使用方法:
 * new Array2XmlTree().addAfterNode(afterNode,selectedItemXML);
 * afterNode:添加的节点对象
 * selectedItemXML:当前选中节点的XML
 * 
 * 添加兄弟节点(之前)使用方法:
 * new Array2XmlTree().addBeforeNode(beforeNode,selectedItemXML);
 * beforeNode:添加的节点对象
 * selectedItemXML:当前选中节点的XML
 * 
 * 添加子节点使用方法:
 * new Array2XmlTree().addChildNode(childNode,selectedItemXML,tree);
 * childNode:添加的节点对象
 * selectedItemXML:当前选中节点的XML
 * tree:树对象
 * 
 * 重命名节点使用方法:
 * new Array2XmlTree().renameNode(selectedItemXML,"name",testName.text);
 * selectedItemXML:当前选中节点的XML
 * "name":需要重名名的字段名称
 * testName.text:新名称字符串
 * 
 * 
 * 删除节点使用方法:
 * new Array2XmlTree().delNode(selectedItemXML);
 * selectedItemXML:当前选中节点的XML
 * */
package{
	import mx.collections.ArrayCollection;
	import mx.controls.Tree;

	public class Array2XmlTree {
		/**
		 * 对比标识(parentNodeIdName,nodeIdName)
		 * 原始数据
		 * 根节点标识
		 */
		private var parentNodeIdName, nodeIdName, rootFlag:String;
		private var assembleArray:ArrayCollection=new ArrayCollection();


		/**
		 * 返回树形结构数据类型
		*/
		public function getTreeData(sourceArray:ArrayCollection, nodeIdName:String="NODE_ID", parentNodeIdName:String="PARENT_NODE_ID", rootFlag:String="-1"):XML {
			//初始化数据
			this.parentNodeIdName=parentNodeIdName;
			this.nodeIdName=nodeIdName;
			this.assembleArray=sourceArray;
			this.rootFlag=rootFlag;
			//拼装树数据
			var treeDataArray:ArrayCollection=new ArrayCollection();
			var treeXml:XML=assembleTree();
			return treeXml;
		}

		/**
		 * 递归拼装Flex树需要的数据类型
		 */
		public function assembleTree(nodeObject:Object=null):XML {

			//查找根节点
			if (nodeObject == null) {
				for each (var tmplNodeObject:Object in assembleArray) {
					if (tmplNodeObject[parentNodeIdName].toString() == rootFlag) {
						nodeObject=tmplNodeObject;
						break;
					}
				}
			}
			
			//创建xml对象
			var treeXml:XML=new XML("<node></node>");
			for(var objectKey:String in nodeObject){
				treeXml["@"+objectKey]=nodeObject[objectKey];
			}
			
			//查找子节点
			if (hasChild(nodeObject)) {
				for each (var childObject:Object in getChildList(nodeObject)) {
					treeXml.appendChild(assembleTree(childObject));
				}
			}
			return treeXml;
		}

		/**
		 * 判断是否有子节点
		 */
		private function hasChild(nodeObject:Object):Boolean {
			return getChildList(nodeObject).length > 0 ? true : false;
		}

		/**
		 * 得到子节点列表
		 */
		private function getChildList(nodeObject:Object):ArrayCollection {
			var childArray:ArrayCollection=new ArrayCollection();
			for each (var childObject:Object in assembleArray) {
				if (childObject[parentNodeIdName].toString() == nodeObject[nodeIdName].toString()) {
					childArray.addItem(childObject);
				}
			}
			return childArray;
		}
		
		
		
		/**
		 * 添加兄弟节点(之后)
		 * */
		 public function addAfterNode(afterNodeObject:Object,selectedNodeXml:XML):void{
		 	//获取当前选择对象的父亲对象并转化为XML
		 	var parentNodeXml:XML=selectedNodeXml.parent();
		 	//新增节点
		 	var treeXml:XML=new XML("<node></node>");
		 	for(var objectKey:Object in afterNodeObject){
		 		treeXml["@"+objectKey]=afterNodeObject[objectKey];
		 	}
		 	//在当前节点之后添加兄弟节点
		 	parentNodeXml.insertChildAfter(selectedNodeXml,treeXml);
		 }
		 
		 /**
		 * 添加兄弟节点(之前)
		 * */
		 public function addBeforeNode(beforeNodeObject:Object,selectedNodeXml:XML):void{
		 	//获取当前选择对象的父亲对象并转化为XML
		 	var parentNodeXml:XML=selectedNodeXml.parent();
		 	//新增节点
		 	var treeXml:XML=new XML("<node></node>");
		 	for(var objectKey:Object in beforeNodeObject){
		 		treeXml["@"+objectKey]=beforeNodeObject[objectKey];
		 	}
		 	//在当前节点之前添加兄弟节点
		 	parentNodeXml.insertChildBefore(selectedNodeXml,treeXml);
		 }
		 
		 /**
		 * 添加子节点
		 * */
		 public function addChildNode(childNodeObject:Object,selectedNodeXml:XML,currentTree:Tree,isExpand:Boolean=true):void{
		 	//新增节点
		 	var treeXml:XML=new XML("<node></node>");
		 	for(var objectKey:Object in childNodeObject){
		 		treeXml["@"+objectKey]=childNodeObject[objectKey];
		 	}
		 	//在当前节点添加子节点
		 	selectedNodeXml.appendChild(treeXml);
		 	// 添加后是否展开
		 	if(isExpand){
		 		currentTree.expandChildrenOf(selectedNodeXml,true);
		 	}
		 }
		 
		 /**
		 * 重命名节点
		 * */
		 public function renameNode(selectedNodeXml:XML,renameField:String,renameString:String):void{
		 	selectedNodeXml["@"+renameField]=renameString;
		 }
		 
		 /**
		 *删除节点
		 * */
		 public function delNode(selectedNodeXml:XML):void{
			if(selectedNodeXml!=null) {
					var parent:XML=selectedNodeXml.parent();
					if(parent!=null) {
						var children:XMLList=parent.children();
						for(var i:int=0;i<children.length();i++) {
							if(children[i]==selectedNodeXml) {
								delete children[i];
								break;
							}
						}
					}
			}
		 }
	}
}

 上图,上附件。。。。。

 搜索功能正在整理中,ing。。。。。

 有问题请留言,如有改进也请留言,谢谢,哈哈。。。。

  • 大小: 107.8 KB
分享到:
评论

相关推荐

    Flex tree的用法

    - **XML数据绑定**: Tree组件可以轻松地绑定到XML数据源。XML的层级结构非常适合表示树形结构,每个XML元素对应Tree的一个节点。 - **XMLList和XMLListCollection**: 将XML转换为XMLList或XMLListCollection,然后...

    Flex中Tree组件的数据源举例(xml,array,object)

    首先,让我们从XML数据源开始。XML因其结构化的特性,非常适合用来表示层次数据。在Flex中,我们可以使用mx.collections.XMLListCollection将XML转换为可绑定的数据集合。例如: ```xml &lt;xml&gt; &lt;item&gt;Item 1.1 ...

    用ArrayCollection当做flex中Tree控件的DataProvider

    本文将详细探讨如何使用`ArrayCollection`作为Flex中的`Tree`控件的数据提供者,以替代通常使用的XML数据源。 首先,让我们理解`ArrayCollection`的概念。`ArrayCollection`是Flex中的一个类,它继承自`...

    Flex Tree快速定位树结点

    数据源通常是XML或ArrayCollection对象,包含树的所有层级信息。 4. **树节点查找**:使用循环或递归方法遍历数据源,比较每个节点的名称与用户输入的字符串是否匹配。匹配成功则记录该节点的索引或唯一标识。 5. ...

    Flex Tree XML

    "Flex Tree XML"这个主题,就是关于如何使用XML数据源来填充和操作Flex中的Tree组件。在这个小例子中,我们将深入探讨如何将XML数据转换为可交互的树形结构。 一、XML数据源与Flex Tree组件 在Flex中,Tree组件...

    flex带复选框的tree,flex checkboxtree

    3. 数据结构:CheckboxTree的数据源通常是一个数据结构,如ArrayCollection或XML,包含了树形结构的数据。每个节点可能包含一个标识符、文本、子节点列表,以及一个表示是否选中的布尔值。 在提供的压缩包文件中,...

    flex tree icon

    同时,如果数据源是XML或ArrayCollection,可以通过数据绑定将图标URL与节点数据关联起来。这样,当数据改变时,图标也会相应更新。 对于博文链接,虽然具体内容未提供,但我们可以推测这可能是一个关于如何在Flex...

    flex4Tree组件分层显示数据示例

    首先,Tree组件的基础在于XML数据源。在Flex4中,我们可以使用ArrayCollection或XMLListCollection作为数据提供者,将XML结构转换为可操作的数据模型。在提供的源码中,你可能会看到一个XML文件,其中包含层次化的...

    Flex 下拉框为Tree的ComboBox

    在Flex中,Tree的数据源通常是XML或ArrayCollection。对于ArrayCollection,每个元素代表一个树节点,可以包含子节点数组和其他属性。在ComboBox中,我们需要确保当用户选择一个Tree节点时,ComboBox的selectedItem...

    Flex之URLLoader加载XML

    - `tree.dataProvider = results` 将XML数据绑定到Tree组件,使其显示在界面上。 - `for` 循环遍历所有的子节点,并通过 `attribute("label")` 和 `attribute("data")` 访问它们的属性值。 3. `initApp` 函数在...

    构造flex3.5的带复选框的树(CheckBoxTree)

    在Flex 3中实现这个功能,我们可以利用Flex的Tree组件和CheckBox组件,结合XML数据源来构建这个自定义的控件。以下是一个详细步骤的概述: 1. **创建Tree组件**:首先,我们需要创建一个Tree组件,这是展示树状结构...

    flex tree的简单使用

    1. **数据源**:Tree组件的数据来源于一个数据提供者,它可以是ArrayCollection、XMLListCollection或其他实现了 IList 接口的对象。数据提供者中的每个项目代表Tree中的一个节点,每个节点可以有子节点。 2. **...

    flex3 Tree右键菜单

    Tree组件是基于MX容器的,它支持数据驱动,这意味着我们可以使用ArrayCollection或XML列表来作为数据源。每个树节点都可以包含子节点,并且可以通过展开和折叠操作来显示或隐藏这些子节点。 在Flex3中添加右键菜单...

    flex 树状图

    在Flex中,树状图的数据通常由XML或ArrayCollection提供,通过定义数据模型来绑定到Tree组件。 创建树状图的第一步是设置数据源。这可以通过将ArrayCollection或XML对象绑定到Tree的dataProvider属性来实现。...

    flex iFrame的tree控件连接到相应的网页

    通过以上步骤,我们成功地实现了Flex Tree控件与iFrame组件的联动,使得用户在Tree中选择不同节点时,iFrame会加载相应的网页。在实际应用中,可能还需要考虑其他因素,例如错误处理、网页加载进度指示等,以提高...

    flex 拖拽功能 中文文档

    在大多数情况下,Flex会自动处理拖放后的数据整合,可能包括从发起者中删除数据。 #### 单一组件的角色转换 Flex中的单个组件不仅可以充当拖动发起者,还可以成为拖放目标,这意味着可以在同一个组件内部移动数据...

    flex datagrid

    它可以绑定到各种数据源,如ArrayCollection、XMLList或远程服务返回的数据。DataGrid支持动态列生成,可以自定义列的显示和行为。 3. **ArrayTest.mxml**:这个文件可能包含一个示例,展示了如何使用...

    Flex 基于数据源的Menu Tree实现代码

    5. **自定义图标**:菜单树的节点可以有图标,用户可以通过设置XML数据源中的`icon`属性来自定义图标,如果没有设置,则使用系统默认图标。 接下来,我们来看一下实现这些功能的源码片段: ```xml ... ... ...

    第十五节Tree树形菜单组件运用.docx

    - **设置 `labelField`**:将 `labelField` 设置为数据源中的键值,如 "labels",以显示正确的信息: ```xml &lt;mx:Tree width="171" height="166" dataProvider="{userHeadArr}" labelField="labels" /&gt; ``` 5. ...

Global site tag (gtag.js) - Google Analytics