加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

Flex 利用Grid制作复杂表格

发布时间：2020-12-15 04:11:51 所属栏目：百科 来源：网络整理
导读：在Flex项目中，需要制作一个比较麻烦的表格来显示数据，废话不多说，看代码。 思路：1、利用Grid来拼成表格，通过合并单元格来实现。 ??????????? 2、数据源利用Repeater 来动态读取 ??????????? 3、数据源可以使集合也可以是XML，这里用的是集合，但XML方法

在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 function readyLoad(event:Event):void
?? ??? ??? ?{
?? ??? ??? ??? ?var children:XML=XML(event.target.data);
?? ??? ??? ??? ?sumXML=children;
?? ??? ??? ??? ?//?? ?var list:XMLList=Model.getModel(ModelBustrainingquality).datasource.source;
?? ??? ??? ??? ?//?? ?sumXML=XML(list[0]).copy();
?? ??? ??? ??? ?bustrainingqualityXLC=new XMLListCollection(sumXML.child("list").children());
?? ??? ??? ?}


?? ??? ??? ?private function onInit():void
?? ??? ??? ?{
?? ??? ??? ??? ?//监听数据源
?? ??? ??? ?}
?? ??? ?]]>
?? ?</fx:Script>
?? ?<fx:Declarations>
?? ??? ?<!-- 将非可视元素（例如服务、值对象）放在此处 -->
?? ?</fx:Declarations>
?? ?<mx:VBox width="100%"
?? ??? ??? ? id="test">
?? ??? ?<s:BorderContainer width="100%"
?? ??? ??? ??? ??? ??? ??? height="30">
?? ??? ??? ?<s:layout>
?? ??? ??? ??? ?<s:HorizontalLayout/>
?? ??? ??? ?</s:layout>
?? ??? ??? ?<s:HGroup width="100%"
?? ??? ??? ??? ??? ?? height="30"
?? ??? ??? ??? ??? ?? horizontalAlign="center"
?? ??? ??? ??? ??? ?? verticalAlign="middle">
?? ??? ??? ??? ?<s:Label text="统计范围:"/>
?? ??? ??? ??? ?<s:ComboBox selectedIndex="0"
?? ??? ??? ??? ??? ??? ??? ?labelField="label"
?? ??? ??? ??? ??? ??? ??? ?dataProvider="{rangeArr}"/>
?? ??? ??? ??? ?<s:Label text="统计时间:"/>
?? ??? ??? ??? ?<common:ControlDataTime id="datatimeID"/>
?? ??? ??? ??? ?<s:Button label="查询"/>
?? ??? ??? ?</s:HGroup>

?? ??? ?</s:BorderContainer>
?? ??? ?<mx:Grid width="100%"
?? ??? ??? ??? ? height="100%"
?? ??? ??? ??? ? verticalGap="0"
?? ??? ??? ??? ? horizontalGap="0"
?? ??? ??? ??? ? borderStyle="solid">
?? ??? ??? ?<mx:GridRow width="100%"
?? ??? ??? ??? ??? ??? ?borderStyle="solid">
?? ??? ??? ??? ?<mx:GridItem colSpan="25"
?? ??? ??? ??? ??? ??? ??? ? verticalAlign="middle"
?? ??? ??? ??? ??? ??? ??? ? height="40"
?? ??? ??? ??? ??? ??? ??? ? horizontalAlign="center">
?? ??? ??? ??? ??? ?<mx:Label text="停车位全局使用效率统计分析"
?? ??? ??? ??? ??? ??? ??? ?? fontSize="15"
?? ??? ??? ??? ??? ??? ??? ?? fontWeight="bold"/>
?? ??? ??? ??? ?</mx:GridItem>
?? ??? ??? ?</mx:GridRow>
?? ??? ??? ?<mx:GridRow borderStyle="solid"
?? ??? ??? ??? ??? ??? ?width="100%"
?? ??? ??? ??? ??? ??? ?height="30">
?? ??? ??? ??? ?<mx:GridItem width="100%"
?? ??? ??? ??? ??? ??? ??? ? height="100%"
?? ??? ??? ??? ??? ??? ??? ? colSpan="25"
?? ??? ??? ??? ??? ??? ??? ? verticalAlign="middle">
?? ??? ??? ??? ??? ?<mx:Label text="统计范围："/>
?? ??? ??? ??? ??? ?<mx:Label text="北京"/>
?? ??? ??? ??? ??? ?<mx:Spacer width="100%"/>
?? ??? ??? ??? ??? ?<mx:Label text="统计时间："/>
?? ??? ??? ??? ??? ?<mx:Label text="2013-07-22 10:00"/>
?? ??? ??? ??? ?</mx:GridItem>
?? ??? ??? ?</mx:GridRow>
?? ??? ??? ?<mx:GridRow height="40"
?? ??? ??? ??? ??? ??? ?width="100%"
?? ??? ??? ??? ??? ??? ?fontWeight="bold"
?? ??? ??? ??? ??? ??? ?verticalAlign="middle">
?? ??? ??? ??? ?<mx:GridItem colSpan="2"
?? ??? ??? ??? ??? ??? ??? ? borderStyle="solid"
?? ??? ??? ??? ??? ??? ??? ? verticalAlign="middle"
?? ??? ??? ??? ??? ??? ??? ? horizontalAlign="center">
?? ??? ??? ??? ??? ?<mx:Label text="序号"/>
?? ??? ??? ??? ?</mx:GridItem>
?? ??? ??? ??? ?<mx:GridItem colSpan="4"
?? ??? ??? ??? ??? ??? ??? ? borderStyle="solid"
?? ??? ??? ??? ??? ??? ??? ? verticalAlign="middle"
?? ??? ??? ??? ??? ??? ??? ? horizontalAlign="center">
?? ??? ??? ??? ??? ?<mx:Label text="区域名称"/>
?? ??? ??? ??? ?</mx:GridItem>
?? ??? ??? ??? ?<mx:GridItem borderStyle="solid"
?? ??? ??? ??? ??? ??? ??? ? verticalAlign="middle"
?? ??? ??? ??? ??? ??? ??? ? horizontalAlign="center"
?? ??? ??? ??? ??? ??? ??? ? colSpan="4">
?? ??? ??? ??? ??? ?<mx:Label text="停车场数量"/>
?? ??? ??? ??? ?</mx:GridItem>
?? ??? ??? ??? ?<mx:GridItem borderStyle="solid"
?? ??? ??? ??? ??? ??? ??? ? colSpan="4"
?? ??? ??? ??? ??? ??? ??? ? verticalAlign="middle"
?? ??? ??? ??? ??? ??? ??? ? horizontalAlign="center">
?? ??? ??? ??? ??? ?<mx:Label text="停车位数量"/>
?? ??? ??? ??? ?</mx:GridItem>
?? ??? ??? ??? ?<mx:GridItem borderStyle="solid"
?? ??? ??? ??? ??? ??? ??? ? verticalAlign="middle"
?? ??? ??? ??? ??? ??? ??? ? horizontalAlign="center"
?? ??? ??? ??? ??? ??? ??? ? colSpan="4">
?? ??? ??? ??? ??? ?<mx:Label text="停车位使用数量"/>
?? ??? ??? ??? ?</mx:GridItem>
?? ??? ??? ??? ?<mx:GridItem borderStyle="solid"
?? ??? ??? ??? ??? ??? ??? ? verticalAlign="middle"
?? ??? ??? ??? ??? ??? ??? ? horizontalAlign="center"
?? ??? ??? ??? ??? ??? ??? ? colSpan="4">
?? ??? ??? ??? ??? ?<mx:Label text="停车位空闲数量"/>
?? ??? ??? ??? ?</mx:GridItem>
?? ??? ??? ??? ?<mx:GridItem borderStyle="solid"
?? ??? ??? ??? ??? ??? ??? ? verticalAlign="middle"
?? ??? ??? ??? ??? ??? ??? ? horizontalAlign="center"
?? ??? ??? ??? ??? ??? ??? ? colSpan="3">
?? ??? ??? ??? ??? ?<mx:Label text="使用效率(%)"/>
?? ??? ??? ??? ?</mx:GridItem>
?? ??? ??? ?</mx:GridRow>
?? ??? ??? ?<mx:Repeater id="list"
?? ??? ??? ??? ??? ??? ? width="100%"
?? ??? ??? ??? ??? ??? ? height="100%"
?? ??? ??? ??? ??? ??? ? dataProvider="{resultArr}">
?? ??? ??? ??? ?<grow:GRow_Overall_Result width="100%"
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?? obj="{list.currentItem}"
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?? i="{i++}"/>
?? ??? ??? ?</mx:Repeater>
?? ??? ??? ?<mx:GridRow height="40"
?? ??? ??? ??? ??? ??? ?width="100%"
?? ??? ??? ??? ??? ??? ?fontWeight="bold"
?? ??? ??? ??? ??? ??? ?verticalAlign="middle">
?? ??? ??? ??? ?<mx:GridItem borderStyle="solid"
?? ??? ??? ??? ??? ??? ??? ? colSpan="6"
?? ??? ??? ??? ??? ??? ??? ? verticalAlign="middle"
?? ??? ??? ??? ??? ??? ??? ? horizontalAlign="center">
?? ??? ??? ??? ??? ?<mx:Label text="小计"/>
?? ??? ??? ??? ?</mx:GridItem>
?? ??? ??? ??? ?<mx:GridItem borderStyle="solid"
?? ??? ??? ??? ??? ??? ??? ? colSpan="4"
?? ??? ??? ??? ??? ??? ??? ? verticalAlign="middle"
?? ??? ??? ??? ??? ??? ??? ? horizontalAlign="center">
?? ??? ??? ??? ??? ?<mx:Label text="{int(arr[0].tccSum)}"/>
?? ??? ??? ??? ?</mx:GridItem>
?? ??? ??? ??? ?<mx:GridItem borderStyle="solid"
?? ??? ??? ??? ??? ??? ??? ? colSpan="4"
?? ??? ??? ??? ??? ??? ??? ? verticalAlign="middle"
?? ??? ??? ??? ??? ??? ??? ? horizontalAlign="center">
?? ??? ??? ??? ??? ?<mx:Label text="{int(arr[0].tcwSum)}"/>
?? ??? ??? ??? ?</mx:GridItem>
?? ??? ??? ??? ?<mx:GridItem borderStyle="solid"
?? ??? ??? ??? ??? ??? ??? ? colSpan="4"
?? ??? ??? ??? ??? ??? ??? ? verticalAlign="middle"
?? ??? ??? ??? ??? ??? ??? ? horizontalAlign="center">
?? ??? ??? ??? ??? ?<mx:Label text="{int(arr[0].tcwsySum)}"/>
?? ??? ??? ??? ?</mx:GridItem>
?? ??? ??? ??? ?<mx:GridItem borderStyle="solid"
?? ??? ??? ??? ??? ??? ??? ? colSpan="4"
?? ??? ??? ??? ??? ??? ??? ? verticalAlign="middle"
?? ??? ??? ??? ??? ??? ??? ? horizontalAlign="center">
?? ??? ??? ??? ??? ?<mx:Label text="{int(arr[0].tcwkxSum)}"/>
?? ??? ??? ??? ?</mx:GridItem>
?? ??? ??? ??? ?<mx:GridItem borderStyle="solid"
?? ??? ??? ??? ??? ??? ??? ? colSpan="4"
?? ??? ??? ??? ??? ??? ??? ? verticalAlign="middle"
?? ??? ??? ??? ??? ??? ??? ? horizontalAlign="center">
?? ??? ??? ??? ??? ?<mx:Label text="{int(arr[0].summary)}"/>
?? ??? ??? ??? ?</mx:GridItem>
?? ??? ??? ?</mx:GridRow>
?? ??? ??? ?<mx:GridRow width="100%"
?? ??? ??? ??? ??? ??? ?horizontalAlign="left">
?? ??? ??? ?</mx:GridRow>
?? ??? ?</mx:Grid>
?? ??? ?<mx:Spacer height="10"/>
?? ??? ?<!--?? ?<mx:HBox width="100%"
?? ??? ??? ? horizontalAlign="center">
?? ??? ??? ? <mx:Button label="导出"/>
?? ??? ??? ? <mx:Spacer width="10"/>
?? ??? ??? ? <mx:Button label="打印"/>
?? ??? ??? ? </mx:HBox>-->
?? ?</mx:VBox>
</s:Group>


GRow_Overall_Result源码：其中，只要数据源和GRow_Overall_Result源码中的字段对应上，数据即可有多少显示多少

<?xml version="1.0" encoding="utf-8"?>
<mx:GridRow creationComplete="onGreat()"
			xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.controls.Label;
			import mx.containers.GridItem;
			import mx.collections.ArrayCollection;

			[Bindable]
			public var obj:Object;
			[Bindable]
			public var i:int;

			private function onGreat():void
			{
				//	Alert.show(obj.toString());
			}
		]]>
	</mx:Script>
	<mx:GridItem borderStyle="solid"
				 horizontalAlign="center"
				 colSpan="2">
		<mx:Label text="{i}"/>
	</mx:GridItem>
	<mx:GridItem colSpan="4"
				 horizontalAlign="center"
				 borderStyle="solid">
		<mx:Label text="{obj.name}"/>
	</mx:GridItem>
	<mx:GridItem colSpan="4"
				 borderStyle="solid"
				 horizontalAlign="center">
		<mx:Label text="{obj.tccNum}"/>
	</mx:GridItem>
	<mx:GridItem borderStyle="solid"
				 colSpan="4"
				 horizontalAlign="center">
		<mx:Label text="{obj.tcwNum}"/>
	</mx:GridItem>
	<mx:GridItem borderStyle="solid"
				 colSpan="4"
				 horizontalAlign="center">
		<mx:Label text="{obj.tcwsyNum}"/>
	</mx:GridItem>
	<mx:GridItem borderStyle="solid"
				 colSpan="4"
				 horizontalAlign="center">
		<mx:Label text="{obj.tcwkxNum}"/>
	</mx:GridItem>
	<mx:GridItem borderStyle="solid"
				 horizontalAlign="center"
				 colSpan="3">
		<mx:Label text="{obj.summary}"/>
	</mx:GridItem>
</mx:GridRow>

XML文件数据源： 

<itemBustrainingquality>
	<list>
		<itemBustrainingquality>
			<qualityId>000001-c3203ec5ed407987</qualityId>
			<orgId> 1</orgId>
			<orgCode> 000001</orgCode>
			<Name>海淀区域</Name>
			<serialNumber>0</serialNumber>
			<year> 2013 </year>
			<tccNum> 2</tccNum>
			<tccNum> 400</tccNum>
			<tcwsyNum> 388      </tcwsyNum>
			<tcwkxNum> 12    </tcwkxNum>
			<summary> 97     </summary>
		</itemBustrainingquality>

		<itemBustrainingquality>
			<qualityId>000001-c3242231e1dc2716</qualityId>
			<orgId> 1     </orgId>
			<orgCode> 000001     </orgCode>
			<Name> 丰台区域    </Name>
			<serialNumber> 0   </serialNumber>
			<year> 2013   </year>
			<tccNum> 3  </tccNum>
			<tccNum> 300      </tccNum>
			<tcwsyNum> 278     </tcwsyNum>
			<tcwkxNum> 22     </tcwkxNum>
			<summary> 92.70   </summary>
		</itemBustrainingquality>


		<itemBustrainingquality>
			<qualityId> 000001-c3430d2c87d3a876     </qualityId>
			<orgId> 1      </orgId>
			<orgCode> 000001      </orgCode>
			<Name> 机场区域     </Name>
			<serialNumber> 0    </serialNumber>
			<year> 2013      </year>
			<qualityDate> 1373370518828      </qualityDate>
			<tccNum> 1     </tccNum>
			<tccNum> 100    </tccNum>
			<tcwsyNum> 68    </tcwsyNum>
			<tcwkxNum> 32     </tcwkxNum>
			<summary> 68   </summary>
		</itemBustrainingquality>
	</list>

	<foodOrgNumber> 6.0  </foodOrgNumber>
	<supplyCadre> 800.0  </supplyCadre>
	<supplySergeantA> 734.0  </supplySergeantA>
	<supplySergeantB> 66.0 </supplySergeantB>
	<supplySergeant> 89.20  </supplySergeant>
</itemBustrainingquality>


如上代码即可实现下图的样式，如果需要源码，去下载吧！！！！！！！！！！


（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同