`

【转】显示Flex的Tree中每个节点的子节点数量

    博客分类:
  • Flex
阅读更多

http://blog.flexexamples.com/2008/01/11/displaying-the-number-of-children-in-each-branch-of-a-flex-tree-control/

Displaying the number of children in each branch of a Flex Tree control

by Peter deHaan on January 11, 2008

in Tree

The following example shows how you can display the number of children in each branch of a Tree control in Flex by using the dataDescriptor property, labelFunction property, hasChildren() method and getChildren() method.

Full code after the jump.

 

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/11/displaying-the-number-of-children-in-each-branch-of-a-flex-tree-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function tree_labelFunc(item:XML):String {
                var label:String = item.@label;
                if (tree.dataDescriptor.hasChildren(item)) {
                    label += " (" + tree.dataDescriptor.getChildren(item).length + ")";
                }
                return label;
            }
        ]]>
    </mx:Script>

    <mx:XML id="treeDP">
        <root>
            <node label="i) One" />
            <node label="i) Two" />
            <node label="i) Three" />
            <node label="i) Four">
                <node label="ii) One" />
                <node label="ii) Two" />
                <node label="ii) Three">
                    <node label="iii) One" />
                    <node label="iii) Two" />
                </node>
                <node label="ii) Four" />
            </node>
            <node label="1. Five" />
            <node label="1. Six" />
        </root>
    </mx:XML>

    <mx:Tree id="tree"
            dataProvider="{treeDP}"
            labelFunction="tree_labelFunc"
            showRoot="false"
            width="200" />

</mx:Application>
分享到:
评论

相关推荐

    Flex Tree 中Checkbox

    它由一系列可展开或折叠的节点组成,每个节点可以包含子节点。用户可以通过单击节点来展开或折叠它们,查看其子节点。 2. **Checkbox集成**:在Flex Tree中添加Checkbox,通常是为了提供多选功能。这需要自定义...

    flex Tree 复选框。

    TreeItemRenderer是用于渲染Tree组件中每个节点的类,我们可以在此类中添加一个CheckBox控件,并根据节点的状态来控制它的选中状态。以下是一个基本的自定义TreeItemRenderer的代码片段: ```actionscript public ...

    Flex tree的用法

    XML的层级结构非常适合表示树形结构,每个XML元素对应Tree的一个节点。 - **XMLList和XMLListCollection**: 将XML转换为XMLList或XMLListCollection,然后设置给Tree的`dataProvider`属性,这样就可以显示XML数据。...

    flex中 Tree树节点内部拖动实例(此实例限制了什么节点可以拖动及拖动到什么位置)

    Tree组件用于显示层次结构的数据,每个节点代表数据的一个层次。用户可以通过展开和折叠节点来查看和操作数据。在默认情况下,Tree组件并不支持节点的拖放操作,所以我们需要自定义行为来实现这一功能。 1. **实现...

    flex tree+checkbox级联勾选

    每个节点都可以包含子节点,形成一个层级结构。在Flex中,我们可以使用mx.controls.Tree类来创建和操作Tree组件。 Checkbox的加入使得Flex Tree具备了更多交互性。在每个树节点前添加一个复选框,用户可以通过点击...

    flex tree控件

    每个节点可以包含子节点,并且可以通过展开或折叠来控制显示的层次。Tree控件通常用于导航菜单、文件系统浏览等场景。 2. 数据源与数据绑定: Tree控件的数据源通常是ArrayCollection或XMLListCollection,它们...

    flex tree 教程二

    每个节点可以包含子节点,形成树状结构。创建和操作Tree组件主要涉及以下几个方面: 1. **数据模型**:Flex Tree组件依赖于数据模型来呈现数据。通常使用mx.collections.ListCollectionView或mx.collections....

    flex带复选框的tree,flex checkboxtree

    每个节点可能包含一个标识符、文本、子节点列表,以及一个表示是否选中的布尔值。 在提供的压缩包文件中,我们可以看到以下目录: - `libs`:这个目录可能包含了项目所需的一些库文件,比如Flex SDK的某些部分或者...

    Flex4的Tree控件加CheckBox

    这样,Tree的每个节点都将使用我们的自定义渲染器进行显示。 3. **数据绑定**: 我们需要确保CheckBox的状态与Tree节点的数据模型(通常是Object或XML)中的某个属性绑定。这个属性可以表示节点是否被选中。当...

    flex tree icon

    每个节点都可以包含子节点,并且可以自定义显示内容,包括文本和图标。图标可以用来增强视觉效果,帮助用户快速识别和理解节点的含义。 在Flex中,你可以通过设置`Icon`属性来为Tree节点添加图标。例如,你可以为根...

    flex4Tree组件分层显示数据示例

    你可以自定义itemRenderer,以便每个节点以特定方式显示。在Flex4中,可以创建一个新的MXML组件作为itemRenderer,并通过`&lt;s:Tree.itemRenderer&gt;`属性应用到Tree组件上。itemRenderer通常包括一个Label或Spark部件,...

    Flex Tree组件的实线连接线

    Tree组件是基于mx.controls.treeClasses.TreeItemRenderer类来渲染每个节点的。默认的渲染器提供了基本的样式和交互,但并不支持自定义连接线样式。因此,我们需要创建自定义的TreeItemRenderer,以便覆盖默认的线条...

    flex中tree和checkbox结合使用的插件

    它通常由一系列可展开/折叠的节点组成,每个节点可以包含子节点。Tree组件提供了丰富的定制选项,如自定义节点样式、事件监听以及节点操作等。 2. Checkbox控件:Checkbox是用户界面中常见的一种输入元素,用于提供...

    flex tree的简单使用

    数据提供者中的每个项目代表Tree中的一个节点,每个节点可以有子节点。 2. **节点标识符**:每个节点都有一个唯一的标识符,这通常是数据提供者中对象的一个属性。通过设置`itemIDField`属性,我们可以指定哪个字段...

    flex中tree的数据源是xml

    ### Flex中Tree的数据源是XML 在Flex应用开发过程中,我们常常需要用到树形结构(Tree)来展示分层数据。为了使数据呈现更加灵活且高效,通常会采用XML作为数据交换格式,这是因为XML具备良好的可读性和扩展性,...

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

    在Flex中,Tree组件是一种常用的控件,用于显示层次结构的数据。本篇文章将聚焦于如何将ArrayCollection转换为XML数据源,并实现Flex Tree组件的新增、删除和修改功能。以下是详细的解释和步骤。 首先,...

    Flex Tree XML

    XML数据通常以文档形式存在,每个节点代表一个层次,子节点表示下级层次。例如,一个简单的XML结构可能如下: ```xml &lt;item&gt;Item1 &lt;item&gt;Item2 &lt;item&gt;Item3 &lt;item&gt;Item4 ``` 在这个例子中,"root"是...

    flex Tree 相册 json格式数据

    每个节点可以有子节点,可以通过展开和折叠来控制显示的内容。开发者可以自定义节点的外观和行为。 3. **JSON数据结构**:JSON数据以键值对的形式存在,使用大括号`{}`表示对象,方括号`[]`表示数组。在树结构中,...

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

    Object数据源通常用于更复杂的结构,其中每个对象可能包含多个属性,其中一个属性表示子节点。例如: ```actionscript var objectData:Object = { label: "Root", children: [ {label: "Category 1", children: ...

    flex tree checkbox

    每个节点可以展开或折叠,显示或隐藏其子节点。通过定制,Tree可以包含图标、文本以及我们在这里讨论的复选框。 在Flex中添加复选框到Tree节点,通常需要自定义TreeItemRenderer。ItemRenderer是Flex提供的一种机制...

Global site tag (gtag.js) - Google Analytics