Flex 利用Grid制作复杂表格

最新推荐文章于 2024-07-07 17:09:26 发布

damaolly

最新推荐文章于 2024-07-07 17:09:26 发布

阅读量5.1k

点赞数 1

分类专栏： flex 技术

本文链接：https://blog.csdn.net/damaolly/article/details/9491889

版权

本文介绍了如何使用Flex的Grid组件结合Repeater动态创建复杂的表格布局。通过合并单元格和设置数据源（支持集合和XML），可以实现自适应的数据展示。示例代码展示了将数据源与Grid组件字段匹配以显示任意数量数据的方法。

摘要由CSDN通过智能技术生成

在Flex项目中，需要制作一个比较麻烦的表格来显示数据，废话不多说，看代码。

思路：1、利用Grid来拼成表格，通过合并单元格来实现。

2、数据源利用Repeater 来动态读取

3、数据源可以使集合也可以是XML，这里用的是集合，但XML方法也写了，

源代码：

<?xml version="1.0" encoding="utf-8"?>
<!--停车位全局使用效率统计-->
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/mx"
         width="100%"
         height="100%"
         creationComplete="onGreat()"
         xmlns:statistical="cn.com.statistical.*"
         xmlns:common="cn.com.common.*"
         xmlns:grow="cn.com.statistical.grow.*">
    <s:layout>
        <s:VerticalLayout gap="0"
                          paddingBottom="30"
                          paddingLeft="30"
                          paddingRight="30"
                          paddingTop="30"/>
    </s:layout>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.collections.XMLListCollection;
            import mx.controls.Alert;
            import mx.events.CollectionEvent;
            import mx.events.FlexEvent;
            import mx.managers.PopUpManager;
            import mx.printing.FlexPrintJob;

            [Bindable]
            public var gridTitle:String;
            [Bindable]
            public var orgName:String;
            [Bindable]
            public var date:String;
            [Bindable]
            public var i:int=1;
            [Bindable]
            public var bustrainingqualityXLC:XMLListCollection;

            [Bindable]
            public var sumXML:XML;
            [Bindable]
            public var xml:XML;
            //统计范围
            [Bindable]
            private var rangeArr:ArrayCollection=new ArrayCollection([{label: "北京"}]);
            //统计结果集
            [Bindable]
            private var resultArr:ArrayCollection=new ArrayCollection([{name: "海淀区域2", tccNum: "2", tcwNum: "400", tcwsyNum: "388", tcwkxNum: "12", summary: "97"}, {name: "丰台区域2", tccNum: "3", tcwNum: "300", tcwsyNum: "278", tcwkxNum: "22", summary: "92"}, {name: "机场区域2", tccNum: "1", tcwNum: "100", tcwsyNum: "68", tcwkxNum: "32", summary: "68"}]);
            //统计小计结果集
            [Bindable]
            private var objArr:Object=new Object();
            [Bindable]
            private var arr:Array=new Array({tccSum: "6", tcwSum: "800", tcwsySum: "734", tcwkxSum: "66", summary: "89"});

            private function onGreat():void
            {
                //    loaderXML();
            }

            /**
             * 加载信息编辑配置文件，并加载到的XML付给Tree
             * **/
            private function loaderXML():void
            {
                var url:String="cn/com/statistical/xml/parkXml.xml";
                var ul:URLLoader=new URLLoader();
                ul.load(new URLRequest(url));
                ul.addEventListener(Event.COMPLETE, readyLoad);
            }

            private functi