Flex4 AdvancedDataGrid 控件的介绍和使用

来源：互联网发布：js给li增加class属性编辑：程序博客网时间：2024/06/03 17:01

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>
    
    <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>