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

FLEX实践:TREE绑定ArrayCollection

阅读更多

研究了好久,终于发现如何将Tree的数据源绑定在ArrayCollection上了。这样就不用再将从数据库中取到的数据转换成XML格式了。

下面是代码:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

creationComplete="init()">

<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import Class.CarVO;
import mx.controls.Alert;
var carArray1:ArrayCollection=new ArrayCollection();
/*最终的数据源*/
var carSource:ArrayCollection=new ArrayCollection();

/*定义三个父节点*/
var carNode1:Object=new Object();
var carNode2:Object=new Object();
var carNode3:Object=new Object();


public var refreshData:Boolean = true;
public var open:Object = new Object();


private function init():void{
var carVO:CarVO=new CarVO();
carVO.name="car1";
carVO.available=true;
var carVO1:CarVO=new CarVO();
carVO1.name="car2";
carVO1.available=true;
var carVO2:CarVO=new CarVO();
carVO2.name="car3";
carVO2.available=true;

var carVO3:CarVO=new CarVO();
carVO3.name="car11";
carVO3.available=true;
carArray1.addItem(carVO3);
var carVO4:CarVO=new CarVO();
carVO4.name="car12";
carVO4.available=true;
carArray1.addItem(carVO4);
var carVO5:CarVO=new CarVO();
carVO5.name="car13";
carVO5.available=true;
carArray1.addItem(carVO5);


carNode1.name=carVO.name;
carNode2.name=carVO1.name;
carNode3.name=carVO2.name;
carNode1.children=new Array();
carNode1.children=carArray1;
carNode2.children=new Array();
carNode2.children=carArray1;

carSource.addItem(carNode1);
carSource.addItem(carNode2);
carSource.addItem(carNode3);

}
public function renderTree():void{
if(refreshData){

// Refresh all rows on next update.
tree.invalidateList();
refreshData = false;
tree.openItems = open;
// Validate and update the properties and layout
// of this object and redraw it, if necessary.
tree.validateNow();
}

}
private function TreeChange():void {
Alert.show(tree.selectedItem.name.toString());
}
]]>

</mx:Script>
<mx:Tree id="tree"
dataProvider="{carSource}"
labelField="name"
render="renderTree()"
change="TreeChange()" width="222" height="284"/>
</mx:Application>

运行结果:


至于代码就不多解释了,应该都能看懂吧,呵呵

分享到:
评论

相关推荐

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

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

    Flex使用<mx:Tree>控件创建树(可添加和删除节点)

    var treeData:ArrayCollection = new ArrayCollection([ {label: "父节点1", children: [{label: "子节点1.1"}, {label: "子节点1.2"}]}, {label: "父节点2"} ]); ``` 3. **添加和删除节点** 添加节点可以...

    用ArrayCollection当做flex中Tree控件的DataProvider

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

    Flex tree的用法

    Flex Tree组件是Adobe Flex框架中的一个关键元素,用于在用户界面上展示层次结构的数据。它在各种应用程序中广泛使用,特别是在需要...通过学习和实践提供的源代码,能够进一步提升对Flex Tree控件的理解和应用能力。

    flex带复选框的tree,flex checkboxtree

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

    flex tree控件

    Tree控件的数据源通常是ArrayCollection或XMLListCollection,它们包含一系列对象,每个对象代表树的一个节点。通过数据绑定,我们可以将这些数据对象映射到Tree的可视节点上。 3. 自定义节点图标: 默认情况下,...

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

    var arrayCollection: ArrayCollection = new ArrayCollection(arrayData); tree.dataProvider = arrayCollection; ``` 最后,我们来看Object数据源。Object数据源通常用于更复杂的结构,其中每个对象可能包含多个...

    flex4Tree组件分层显示数据示例

    总之,这个“flex4Tree组件分层显示数据示例”将演示如何在Flex4环境中创建一个功能完善的Tree组件,包括数据绑定、自定义渲染器、事件处理和优化性能的方法。通过深入研究这个示例,开发者可以更好地理解和掌握在...

    flex4 选择树组件

    2. **数据绑定**:Tree组件的数据源通常是ArrayCollection或XMLListCollection等可迭代数据集。你可以通过`dataProvider`属性将数据绑定到Tree上,每个节点的数据项会被映射到Tree的子节点。 3. **节点表示**:Tree...

    flex tree的简单使用

    通过上述介绍,我们可以看出,虽然“flex tree的简单使用”看起来很简单,但它涉及到的数据绑定、事件处理和UI定制等方面都是Flex开发中的重要概念。理解并熟练运用这些知识,将有助于我们构建出更高效、用户体验更...

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

    4. **配置Tree组件**:最后,我们将XML数据源绑定到Tree组件,并设置树的itemRenderer属性为我们之前创建的自定义渲染器。 ```xml &lt;fx:Declarations&gt; &lt;mx:XMLListCollection source="{xmlData.node}"/&gt; &lt;/fx:...

    flex tree icon

    同时,如果数据源是XML或ArrayCollection,可以通过数据绑定将图标URL与节点数据关联起来。这样,当数据改变时,图标也会相应更新。 对于博文链接&lt;https://demojava.iteye.com/blog/1405668&gt;,虽然具体内容未提供,...

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

    - **数据绑定**:将数据源绑定到 Tree 组件的 `dataProvider` 属性,如下所示: ```xml &lt;mx:Tree width="171" height="166" dataProvider="{userHeadArr}" /&gt; ``` 4. **显示问题与解决** - **显示默认值**:...

    Flex Tree XML

    在Flex中,Tree组件可以绑定到各种数据源,包括Array,ArrayCollection,以及XML或XMLList。XML因其结构化和易于解析的特性,常被用来存储和传递层次结构的数据,这与Tree组件的展示需求非常匹配。在"TreeExample"中...

    Flex中tree实现的种种细节

    同时,`Tree`组件还支持数据提供者(如ArrayCollection)动态更新,这意味着当数据源发生变化时,Tree会自动更新其视图。 文章可能会详细讲解如何使用MXML或ActionScript创建Tree实例,并绑定数据源。对于源码部分...

    flex combobx中使用tree

    在实际开发中,我们可能还会遇到一些挑战,例如性能问题(因为Tree组件处理大量数据时可能会变慢),以及如何优雅地处理数据绑定和数据模型的更新。为了优化性能,可以考虑使用虚拟化技术,只渲染可视区域的节点,而...

    Flex ComBox 下拉树功能

    3. 绑定到ComBox:将创建的Tree对象绑定到ComBox的dropdown属性上,这样在打开下拉菜单时就会显示这个树形结构。 ```actionscript var comboBox:ComboBox = new ComboBox(); comboBox.dropdown = tree; ``` 4. ...

    flex 树状图

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

    sss.rar_flex

    这意味着你需要创建一个数据集(如ArrayCollection)来存储节点信息,然后将这个数据集绑定到Tree的dataProvider属性上。 3. **节点操作**:在描述中提到的“展开所有节点”、“展开第一层节点”以及“展开名为...

    CheckBoxTree.zip

    综上所述,`CheckBoxTree.zip`中的项目涉及到了Flex中的数据绑定、自定义渲染器、事件处理和组件配置等多个核心知识点。通过这些技术,开发者能够创建出具有复选功能的交互式树形控件,以满足用户在选择和操作数据时...

Global site tag (gtag.js) - Google Analytics