Flex 利用Grid制作复杂表格
2013-07-26 09:52
330 查看
在Flex项目中，需要制作一个比较麻烦的表格来显示数据，废话不多说，看代码。
思路：1、利用Grid来拼成表格，通过合并单元格来实现。
2、数据源利用Repeater 来动态读取
3、数据源可以使集合也可以是XML，这里用的是集合，但XML方法也写了，
源代码：
GRow_Overall_Result源码：其中，只要数据源和GRow_Overall_Result源码中的字段对应上，数据即可有多少显示多少
XML文件数据源：
如上代码即可实现下图的样式，如果需要源码，去下载吧！！！！！！！！！！
思路：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>
如上代码即可实现下图的样式，如果需要源码，去下载吧！！！！！！！！！！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Flex 用Grid实现类似于Html的细线表格
- dotNetFlexGrid-asp.net的异步表格控件
- JQuery FlexiGrid的asp.net完美解决方案-dotNetFlexGrid使用指南(一）Ajax异步表格
- Android 利用ListView制作带竖线的多彩表格
- Android 利用ListView制作带竖线的多彩表格
- 用flex如何制作不规则的表格，进行打印预览。而且可以打印。譬如制作如下表单：
- 基于bootgrid,利用HTML5拖拽实现表格列互换并添加至localStorage
- 【Android】利用表格布局，Android中xml文件与java的交互制作登录界面
- 利用POI实现复杂表头制作（纯手工）
- JQuery FlexiGrid的asp.net完美解决方案：dotNetFlexGrid-asp.net原生的异步表格控件登录 开源中国
- <zz>latex制作复杂表格(跨行、跨列)
- 利用XML和XSL生成较为复杂的多表头表格
- 利用表格制作细线表格
- 利用Grid制做表格
- Android学习笔记(20)————利用ListView制作带竖线的多彩表格
- List Control控件高级应用——利用List Control控件制作表格
- wpf利用后台生成grid表格以及tabcontrol，border等用法
- 【HTML】-案例-利用表格制作网页
- Access利用excel制作复杂报表的方法
- Access如何制作复杂报表——利用Excel输出复杂报表