Flex4 AdvancedDataGrid 控件的介绍和使用

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>  <s:layout> <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center"/> </s:layout> <s:Panel title="水果价格一览表" color="0x000000" borderAlpha="0.15" width="600" >  <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>

Flex4 AdvancedDataGrid 控件的介绍和使用

AdvancedDataGrid.mxml

猜你在找的Flex相关文章