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

最新推荐文章于 2023-09-12 10:23:21 发布

原创最新推荐文章于 2023-09-12 10:23:21 发布 · 255 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#Flex #XML #Adobe #Blog

Flex 专栏收录该内容

48 篇文章

订阅专栏

本文介绍如何使用Flex的Tree控件显示每个分支的子项数量。通过dataDescriptor属性、labelFunction属性、hasChildren()方法及getChildren()方法实现。提供了完整的MXML代码示例。

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>