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,???????????? {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>