以前在网上找代码,找到的总是不合用,今天我整理一份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
分享到:
相关推荐
- **XML数据绑定**: Tree组件可以轻松地绑定到XML数据源。XML的层级结构非常适合表示树形结构,每个XML元素对应Tree的一个节点。 - **XMLList和XMLListCollection**: 将XML转换为XMLList或XMLListCollection,然后...
首先,让我们从XML数据源开始。XML因其结构化的特性,非常适合用来表示层次数据。在Flex中,我们可以使用mx.collections.XMLListCollection将XML转换为可绑定的数据集合。例如: ```xml <xml> <item>Item 1.1 ...
本文将详细探讨如何使用`ArrayCollection`作为Flex中的`Tree`控件的数据提供者,以替代通常使用的XML数据源。 首先,让我们理解`ArrayCollection`的概念。`ArrayCollection`是Flex中的一个类,它继承自`...
数据源通常是XML或ArrayCollection对象,包含树的所有层级信息。 4. **树节点查找**:使用循环或递归方法遍历数据源,比较每个节点的名称与用户输入的字符串是否匹配。匹配成功则记录该节点的索引或唯一标识。 5. ...
"Flex Tree XML"这个主题,就是关于如何使用XML数据源来填充和操作Flex中的Tree组件。在这个小例子中,我们将深入探讨如何将XML数据转换为可交互的树形结构。 一、XML数据源与Flex Tree组件 在Flex中,Tree组件...
3. 数据结构:CheckboxTree的数据源通常是一个数据结构,如ArrayCollection或XML,包含了树形结构的数据。每个节点可能包含一个标识符、文本、子节点列表,以及一个表示是否选中的布尔值。 在提供的压缩包文件中,...
同时,如果数据源是XML或ArrayCollection,可以通过数据绑定将图标URL与节点数据关联起来。这样,当数据改变时,图标也会相应更新。 对于博文链接,虽然具体内容未提供,但我们可以推测这可能是一个关于如何在Flex...
首先,Tree组件的基础在于XML数据源。在Flex4中,我们可以使用ArrayCollection或XMLListCollection作为数据提供者,将XML结构转换为可操作的数据模型。在提供的源码中,你可能会看到一个XML文件,其中包含层次化的...
在Flex中,Tree的数据源通常是XML或ArrayCollection。对于ArrayCollection,每个元素代表一个树节点,可以包含子节点数组和其他属性。在ComboBox中,我们需要确保当用户选择一个Tree节点时,ComboBox的selectedItem...
- `tree.dataProvider = results` 将XML数据绑定到Tree组件,使其显示在界面上。 - `for` 循环遍历所有的子节点,并通过 `attribute("label")` 和 `attribute("data")` 访问它们的属性值。 3. `initApp` 函数在...
在Flex 3中实现这个功能,我们可以利用Flex的Tree组件和CheckBox组件,结合XML数据源来构建这个自定义的控件。以下是一个详细步骤的概述: 1. **创建Tree组件**:首先,我们需要创建一个Tree组件,这是展示树状结构...
1. **数据源**:Tree组件的数据来源于一个数据提供者,它可以是ArrayCollection、XMLListCollection或其他实现了 IList 接口的对象。数据提供者中的每个项目代表Tree中的一个节点,每个节点可以有子节点。 2. **...
Tree组件是基于MX容器的,它支持数据驱动,这意味着我们可以使用ArrayCollection或XML列表来作为数据源。每个树节点都可以包含子节点,并且可以通过展开和折叠操作来显示或隐藏这些子节点。 在Flex3中添加右键菜单...
在Flex中,树状图的数据通常由XML或ArrayCollection提供,通过定义数据模型来绑定到Tree组件。 创建树状图的第一步是设置数据源。这可以通过将ArrayCollection或XML对象绑定到Tree的dataProvider属性来实现。...
通过以上步骤,我们成功地实现了Flex Tree控件与iFrame组件的联动,使得用户在Tree中选择不同节点时,iFrame会加载相应的网页。在实际应用中,可能还需要考虑其他因素,例如错误处理、网页加载进度指示等,以提高...
在大多数情况下,Flex会自动处理拖放后的数据整合,可能包括从发起者中删除数据。 #### 单一组件的角色转换 Flex中的单个组件不仅可以充当拖动发起者,还可以成为拖放目标,这意味着可以在同一个组件内部移动数据...
它可以绑定到各种数据源,如ArrayCollection、XMLList或远程服务返回的数据。DataGrid支持动态列生成,可以自定义列的显示和行为。 3. **ArrayTest.mxml**:这个文件可能包含一个示例,展示了如何使用...
5. **自定义图标**:菜单树的节点可以有图标,用户可以通过设置XML数据源中的`icon`属性来自定义图标,如果没有设置,则使用系统默认图标。 接下来,我们来看一下实现这些功能的源码片段: ```xml ... ... ...
- **设置 `labelField`**:将 `labelField` 设置为数据源中的键值,如 "labels",以显示正确的信息: ```xml <mx:Tree width="171" height="166" dataProvider="{userHeadArr}" labelField="labels" /> ``` 5. ...