Flex4 AdvancedDataGrid 控件的介绍和使用

原创 2011年01月21日 10:33:00

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>

flex4 AdvancedDataGrid 加超链接

以上例子
  • u010395804
  • u010395804
  • 2014年06月23日 17:57
  • 531

Flex之AdvancedDataGrid用法

一、新建一个Flex项目,命名为AdvanceDataGrid; 二、在src默认包下,新建一个MXML应用程序,名为AdvanceDataGrid.mxml,源码如下: ...
  • you23hai45
  • you23hai45
  • 2013年06月29日 19:08
  • 2782

Flex4学习笔记(一)--基础控件的使用

1.一个最简单的例子,按钮点击事件 ? 1 2 3 4 5 6 7 8 9 10 11 12 ...
  • sunchunmei555
  • sunchunmei555
  • 2011年12月27日 17:02
  • 1567

Flex4 DataGrid、AdvancedDataGrid与Tree结合使用

Flex4中,将Tree控件插入到DataGrid中展示,可以看到非常炫的效果。其实平常看到的并不是DataGrid而是AdvancedDataGrid。使用AdvancedDataGrid将Tree...
  • abrahu
  • abrahu
  • 2011年07月06日 12:50
  • 5858

[转载] Flex 4 皮肤功能介绍

原文: http://www.adobe.com/devnet/flex/articles/flex4_skinning.html 转载:http://www.smithfox.com/?e=34 ...
  • soanl
  • soanl
  • 2014年03月12日 13:33
  • 1427

AdvancedDataGrid 分组,使第一行就显示数据

  • goodleiwei
  • goodleiwei
  • 2012年12月20日 09:30
  • 927

flex通过AdvancedDataGrid合并单元格,导出为excel表格

flex通过AdvancedDataGrid组件合并单元格,通过java端动态绑定AdvancedDataGrid的源数据,并导出AdvancedDataGrid源数据为excel表格 1.创建一个....
  • wpz0713
  • wpz0713
  • 2015年01月14日 08:22
  • 2148

Duilib 控件使用

一. Duilib控件简介 在之前空白窗体的基础上,在界面上添加了一些控件,让大家先对这些控件效果有个基本的认识。如下图所示: 基本控件 高级控件 一些控件的基...
  • qq_24571549
  • qq_24571549
  • 2017年04月09日 20:45
  • 216

AdvancedDataGrid完整示例 datavisualization.swc

Flex DataGrid单元格合并、Flex表格单元格合并、列合并、行合并。datavisualization、Flexicious Ultimate DataGrid。...
  • xinxin19881112
  • xinxin19881112
  • 2011年03月06日 01:42
  • 1348

flex中遍历组件

  • xingfeng0501
  • xingfeng0501
  • 2012年03月07日 12:08
  • 2214
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Flex4 AdvancedDataGrid 控件的介绍和使用
举报原因:
原因补充:

(最多只允许输入30个字)