论坛风格切换切换到宽版
  • 18219阅读
  • 1回复

flex AdvancedDataGrid 高级表格 介绍 教程 [复制链接]

上一主题 下一主题
 

发帖
1077
只看楼主 倒序阅读 使用道具 楼主  发表于: 2010-07-06
— 本帖被 jinwyp 执行取消置顶操作(2011-05-31) —
AdvancedDataGrid 控件扩展了标准 DataGrid 控件的功能,为 Adobe Flex 应用程序增添了数据可视化功能。借助这些功能,可以更好地控制数据显示、数据聚合和数据格式设置。AdvancedDataGrid 控件与 List 控件类似,但前者能够显示多列数据,因而可显示具有多个属性的对象。  
  AdvancedDataGrid 控件提供下列功能:  
  • 列可以具有不同宽度或同一固定宽度。
  • 用户可以在运行时调整列的尺寸。
  • 用户可以在运行时重新排序的列。
  • 可选择自定义列标题。
  • 能够对任何列使用自定义项呈示器来显示数据(而非文本)。
  • 支持通过单击某列对数据排序。
                 AdvancedDataGrid 控件设计用于查看数据,而非用作类似于 HTML 表的布局工具

官方文档 http://help.adobe.com/zh_CN/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7be0.html
http://help.adobe.com/zh_CN/AS3LCR/Flex_4.0/mx/controls/AdvancedDataGrid.html



单元格内可以显示多组数据


表头跨单元格

其中数据来源为"SimpleFlatData.as" 具体请看 http://help.adobe.com/zh_CN/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7bf4.html
  1. <?xml version="1.0"?>
  2. <!-- dpcontrols/adg/ColumnGroupADG.mxml -->
  3. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.     xmlns:mx="library://ns.adobe.com/flex/mx"
  5.     xmlns:s="library://ns.adobe.com/flex/spark">
  6.     <fx:Script>
  7.         <![CDATA[
  8.             import mx.collections.ArrayCollection;
  9.                   
  10.             // Import the data used by the AdvancedDataGrid control.
  11.             include "SimpleFlatData.as";
  12.         ]]>
  13.     </fx:Script>
  14.     <mx:AdvancedDataGrid id="myADG"
  15.         dataProvider="{dpFlat}"
  16.         width="100%" height="100%">
  17.         <mx:groupedColumns>
  18.             <mx:AdvancedDataGridColumn dataField="Region"/>
  19.             <mx:AdvancedDataGridColumn dataField="Territory"/>
  20.             <mx:AdvancedDataGridColumn dataField="Territory_Rep"
  21.                 headerText="Territory Rep"/>
  22.             <mx:AdvancedDataGridColumnGroup headerText="Revenues">    
  23.                 <mx:AdvancedDataGridColumn dataField="Actual"/>
  24.                 <mx:AdvancedDataGridColumn dataField="Estimate"/>
  25.             </mx:AdvancedDataGridColumnGroup>    
  26.         </mx:groupedColumns>
  27.    </mx:AdvancedDataGrid>
  28. </s:Application>




按照多个条件(多个表头)排序 
点击如图表头右边箭头位置可以按照多个条件排序, 如果点击表头左边部分为重新以第一条件排序 此时sortExpertMode属性为false
如果设置sortExpertMode 属性为true时 需要按住 ctrl 键来点击表头实现多条件排序
如果想禁止排序功能 请把 AdvancedDataGrid.sortableColumns属性 设置为 false

请看设置sortExpertMode 属性为true时的例子 需要按住 ctrl 键来点击表头实现多条件排序
  1. <?xml version="1.0"?>
  2. <!-- dpcontrols/adg/SimpleADG.mxml -->
  3. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.     xmlns:mx="library://ns.adobe.com/flex/mx"
  5.     xmlns:s="library://ns.adobe.com/flex/spark">
  6.     <fx:Script>
  7.       <![CDATA[
  8.          import mx.collections.ArrayCollection;
  9.                   
  10.          [Bindable]
  11.          private var dpADG:ArrayCollection = new ArrayCollection([
  12.            {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
  13.            {Artist:'Pavement', Album:'Brighten the Corners', Price:11.99},
  14.            {Artist:'Saner', Album:'A Child Once', Price:11.99},
  15.            {Artist:'Saner', Album:'Helium Wings', Price:12.99},
  16.            {Artist:'The Doors', Album:'The Doors', Price:10.99},
  17.            {Artist:'The Doors', Album:'Morrison Hotel', Price:12.99},
  18.            {Artist:'Grateful Dead', Album:'American Beauty', Price:11.99},
  19.            {Artist:'Grateful Dead', Album:'In the Dark', Price:11.99},
  20.            {Artist:'Grateful Dead', Album:'Shakedown Street', Price:11.99},
  21.            {Artist:'The Doors', Album:'Strange Days', Price:12.99},
  22.            {Artist:'The Doors', Album:'The Best of the Doors', Price:10.99}
  23.          ]);                  
  24.       ]]>
  25.     </fx:Script>
  26.     <mx:AdvancedDataGrid
  27.         width="100%" height="100%"
  28.         sortExpertMode="true"
  29.         dataProvider="{dpADG}">
  30.         <mx:columns>
  31.             <mx:AdvancedDataGridColumn dataField="Artist" />
  32.             <mx:AdvancedDataGridColumn dataField="Album" />
  33.             <mx:AdvancedDataGridColumn dataField="Price" />
  34.         </mx:columns>
  35.    </mx:AdvancedDataGrid>        
  36. </s:Application>


只看该作者 沙发  发表于: 2010-08-18
请教一下,楼主还遇到ADG中使用自定义的ItemRenderer时,垂直滚动条滚动速度慢的问题(columns = 16左右)?不知有何见解。
快速回复
限100 字节
批量上传需要先选择文件,再选择上传
 
上一个 下一个