Flex将Array作为Tree的数据源

最新推荐文章于 2019-01-08 01:39:30 发布

最新推荐文章于 2019-01-08 01:39:30 发布 · 161 阅读

文章标签：

#Flex #Adobe #XML

Flex 专栏收录该内容

46 篇文章

订阅专栏

本文介绍了一种使用FlexTree结构展示复杂XML数据的方法。通过递归方式构建树形结构，并利用特定函数生成带有子节点数量标识的标签，实现了对层次化数据的有效浏览。示例展示了如何定义数据源及配置相关属性。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            private function tree_labelFunc(item:Object):String {
                var suffix:String = "";
                if (tree.dataDescriptor.hasChildren(item)) {
                    suffix = " (" + item.children.length + ")";
                }
                return item.name.toUpperCase() + suffix;
            }
        ]]>
    </mx:Script>
 
    <mx:Array id="arr">
        <mx:Object name="One">
            <mx:children>
                <mx:Array>
                    <mx:Object name="Two" />
                    <mx:Object name="Three" />
                    <mx:Object name="Four">
                        <mx:children>
                            <mx:Array>
                                <mx:Object name="Five" />
                                <mx:Object name="Six" />
                            </mx:Array>
                        </mx:children>
                    </mx:Object>
                    <mx:Object name="Seven">
                        <mx:children>
                            <mx:Array>
                                <mx:Object name="Eight" />
                            </mx:Array>
                        </mx:children>
                    </mx:Object>
                    <mx:Object name="Nine" />
                </mx:Array>
            </mx:children>
        </mx:Object>
    </mx:Array>
 
    <mx:Tree id="tree" dataProvider="{arr}" labelFunction="tree_labelFunc" width="200" />
 
</mx:Application>