AdvancedDataGrid 控件扩展了标准 DataGrid 控件的功能,为 Adobe Flex 应用程序增添了数据可视化功能。借助这些功能,可以更好地控制数据显示、数据聚合和数据格式设置。AdvancedDataGrid
控件与 List 控件类似,但前者能够显示多列数据,因而可显示具有多个属性的对象。
AdvancedDataGrid 控件提供下列功能:
- 列可以具有不同宽度或同一固定宽度。
- 用户可以在运行时调整列的尺寸。
- 用户可以在运行时重新排序的列。
- 可选择自定义列标题。
- 能够对任何列使用自定义项呈示器来显示数据(而非文本)。
- 支持通过单击某列对数据排序。
AdvancedDataGrid 控件设计用于查看数据,而非用作类似于 HTML 表的布局工具。mx.containers 包提供以下布局工具。
MXML The <mx:AdvancedDataGrid>
tag inherits all of the tag attributes of its superclass, except for labelField
, iconField
, and iconFunction
, and adds the following tag attributes:
<mx:AdvancedDataGrid Properties displayDisclosureIcon="true|false" displayItemsExpanded="false|true" groupedColumns="[]" groupIconFunction="null" groupItemRenderer="AdvancedDataGridGroupItemRenderer" groupLabelFunction="null" groupRowHeight="-1" itemIcons="undefined" lockedColumnCount="0" lockedRowCount="0" rendererProviders="[]" selectedCells="null" treeColumn="null" Styles alternatingItemColors="undefined" defaultLeafIcon="TreeNodeIcon" depthColors="undefined" disclosureClosedIcon="TreeDisclosureClosed" disclosureOpenIcon="TreeDisclosureOpen" folderClosedIcon="TreeFolderClosed" folderOpenIcon="TreeFolderOpen" headerHorizontalSeparatorSkin="undefined" indentation="17" openDuration="250" openEasingFunction="undefined" paddingLeft="2" paddingRight="0" selectionDisabledColor="#DDDDDD" selectionEasingFunction="undefined" sortFontFamily="Verdana" sortFontSize="10" sortFontStyle="normal" sortFontWeight="normal" textRollOverColor="#2B333C" textSelectedColor="#2B333C" Events headerDragOutside="No default" headerDropOutside="No default" itemClose="No default" itemOpen="No default" itemOpening="No default" />
AdvancedDataGrid.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
//定义一个源数组
private var dpFlat:ArrayCollection = new ArrayCollection(
[{name:"苹果",count:"100",sprice:10,yprice:8},
{name:"桔子",count:"200",sprice:11,yprice:10},
{name:"黄梨",count:"300",sprice:6,yprice:4},
{name:"香蕉",count:"400",sprice:9,yprice:8},
{name:"桃子",count:"500",sprice:5,yprice:3},
{name:"杏子",count:"600",sprice:8,yprice:6}
]
);
]]>
</fx:Script>
<!--Flex4与Flex3 定义布局的不同-->
<s:layout>
<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center"/>
</s:layout>
<s:Panel title="水果价格一览表"
color="0x000000"
borderAlpha="0.15"
width="600" >
<!--定义AdvanceDataGrid组件并且设置相关属性和数据源-->
<mx:AdvancedDataGrid id="myADG"
width="100%" height="100%"
color="0X323232"
dataProvider="{dpFlat}" >
<mx:groupedColumns>
<mx:AdvancedDataGridColumn dataField="name" headerText="水果名字"/>
<mx:AdvancedDataGridColumn dataField="count" headerText="数量" />
<mx:AdvancedDataGridColumnGroup headerText="价格对比">
<mx:AdvancedDataGridColumn dataField="sprice" headerText="市场价"/>
<mx:AdvancedDataGridColumn dataField="yprice" headerText="优惠价格"/>
</mx:AdvancedDataGridColumnGroup>
</mx:groupedColumns>
</mx:AdvancedDataGrid>
</s:Panel>
</s:Application>