`

Flex:使用ArrayCollection过滤Tree

    博客分类:
  • flex
 
阅读更多

    Flex中的 Tree 是很难被过滤的,因为它们包含继承的关系。一个可行的方法是使用ArrayCollection作为dataProvider,而且这个ArrayCollection的每一个节点都有一个children属性,每个children也是ArrayCollection.

    过滤Tree的一个棘手的问题是,必须确保从子节点到跟节点都被过滤。所以,在下面的例子中,我写了一个function,它将循环每一个节点及其所有的子节点。

    过滤的发生是自上而下的,这就意味着一个节点的所有的子节点总是在它自身之前被过滤。这一点很重要,因为通常过滤器将删除所有不匹配某一标准的所有东西。

<?xml version="1.0" encoding="utf-8"?>
<!--http://yecon.blog.hexun.com/30299161_d.html -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ import vo.Person;
import mx.collections.ArrayCollection;

[] private var people:ArrayCollection = new ArrayCollection([ new Person("Grandma Susan", new ArrayCollection([ new Person("John", new ArrayCollection([ new Person("Timmy"),
new Person("Sammy"),
new Person("Alan") ])),
new Person("Tiffany", new ArrayCollection([ new Person("Billy"),
new Person("Adam"),
new Person("Graham"),
new Person("Vennesa") ])),
new Person("Michael", new ArrayCollection([ new Person("Jannette"),
new Person("Alan", new ArrayCollection([ new Person("Alice"),
new Person("Jane") ])) ])),
new Person("Peter"),
new Person("Cindy", new ArrayCollection([ new Person("Paul"),
new Person("David"),
new Person("Joseph"),
new Person("Cameron"),
new Person("Debra"),
new Person("Polly") ])) ]))
]);

private function refreshData():void{ //reset the root node to its original unfiltered data
people[0].children = new ArrayCollection(people[0].children.source);
//start the recursion at the root node
refreshRecursiveChildren(people.source[0]);
//update the Tree after the data has been filtered
personsTree.invalidateList();
}//end refreshData function

private function refreshRecursiveChildren(person:Person):void{ if(person.children){ //loop through each child and filter its children
for each(var _person:Person in person.children.source){ refreshRecursiveChildren(_person);
} //reset each "children" ArrayCollection to its original unfiltered data
person.children = new ArrayCollection(person.children.source);
//set the filterfunction for the newly updated node
person.children.filterFunction = filterData;
//run the fitlerFunction
person.children.refresh();
} }//end refreshRecursiveChildren function

public function filterData(item:Object):Boolean{ //get the string to filter the nodes by
var searchString:String = iNameFilter.text;
//if string is found in node return true.
//since the recursive filtering takes place from bottom up, if
//a collection still has children after filtering, also return true
if(searchString.length == 0 || item.name.toLowerCase().indexOf(searchString.toLowerCase()) >= 0) return true;
else if(item.children != null && item.children.length > 0) return true;

return false;
}//end filterData function

]]> </mx:Script> <mx:VBox width="100%" height="100%" paddingTop="10" paddingBottom="10" paddingLeft="5" paddingRight="5"> <mx:Tree id="personsTree" dataProvider="{people}" labelField="name" width="100%" height="100%" /> <mx:HBox> <mx:Label text="Filter the Tree:" /> <mx:TextInput id="iNameFilter" change="refreshData()" /> </mx:HBox> </mx:VBox> </mx:Application>
//vo.Person.as
package vo{
 
	//http://yecon.blog.hexun.com/30299161_d.html
    
    import mx.collections.ArrayCollection;

public class Person{ public var name:String;
public var children:ArrayCollection;

public function Person(_name:String, _children:ArrayCollection = null){ this.name = _name;
if(_children != null) this.children = _children;
}//end Person constructor
}//end Person class

}//end package declaration

分享到:
评论

相关推荐

    用ArrayCollection当做flex中Tree控件的DataProvider

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

    Flex tree的用法

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

    flex combobx中使用tree

    这时,我们可以使用一个特殊的实现,即在ComboBox中嵌入Tree组件,这正是“flex combobx中使用tree”这个话题的核心。 Flex中的Tree组件用于显示多级、分层的数据,通常用于展现目录结构、组织架构等。而将Tree与...

    Flex ComBox 下拉树功能

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

    DataGrid条目过滤和Tree 所有节点过滤的例子

    DataGrid条目过滤和Tree 所有节点过滤的例子 Flash Builder 4工程,可直接导入

    Flex ComboBox 树形控件

    Flex ComboBox 是一种强大的用户界面组件,它结合了下拉列表(ComboBox)和树形结构(Tree)的功能,为用户提供了一种交互式的数据选择方式。在Flex应用中,这种控件通常用于显示层次化的数据,允许用户从多个层级的...

    flex题目大全

    - **答案**:使用Flex Builder的调试工具,可以在代码中设置断点,利用调试控制台查看变量状态等。 #### 25. 请问Flexbulider3可以创建几种不同的项目?Flex Builder4可以创建几种不同的项目? - **答案**: - ...

    flex3的cookbook书籍完整版dpf(包含目录)

    12.7节在Flex Effect里使用DisplacementMapFilter过滤器 12.8节创建AnimateColor 特效 12.9节使用Convolution Filter创建渐变效果 第十三章. 集合(439) 13.1节. 为ArrayCollection添加,排序和获取数据 13.2节. ...

    带复选框的树状ComboBox

    1. 数据模型:使用`ArrayCollection`或`HierarchicalData`作为数据源,存储树状结构的数据。 2. 自定义渲染器:创建一个继承自`ListBaseItemRenderer`的类,包含一个CheckBox并根据数据模型显示选中状态。 3. 事件...

    SparkTree_AdvancedDataGrid

    1. **数据模型**:AdvancedDataGrid使用了Flex的数据绑定机制,与数据提供器进行交互。数据提供器通常是ArrayCollection或HierarchicalData,它们负责将业务数据转换为网格可理解的格式。 2. **自定义列**:...

    AdvancedDataGrid 动态添加节点 控制树

    在Flex开发中,AdvancedDataGrid是一个强大的组件,用于展示大量数据并进行复杂的数据操作,如分组、排序和过滤。这个组件特别适用于构建数据密集型的用户界面,尤其是在需要显示层次结构数据时。本篇文章将深入探讨...

Global site tag (gtag.js) - Google Analytics