codecamp

Flex AdvancedDataGrid控件

介绍

AdvancedDataGrid控件向标准DataGrid控件添加了多个功能，以向Flex应用程序添加数据可视化功能。 这些功能可以更好地控制数据显示，数据聚合和数据格式化。

类声明

以下是 mx.controls.AdvancedDataGrid 类的声明:

public class AdvancedDataGrid
   extends AdvancedDataGridBaseEx

公共财产

S.N.属性和描述
1

displayDisclosureIcon:Boolean

控制导航树中的公开图标的创建和可见性。

2

displayItemsExpanded:Boolean

如果为true，请展开导航树以显示所有项目。

3

firstVisibleItem : Object

与当前显示在AdvancedDataGrid控件顶行中的项对应的数据提供程序元素。

4

groupedColumns:Array

在执行列分组时定义AdvancedDataGridColumn实例的层次结构的数组。

5

groupIconFunction : Function

用户提供的回调函数在每个组项目上运行以确定其在导航树中的分支图标。

6

groupItemRenderer:IFactory

指定用于在导航树中显示与组对应的分支节点的项呈示器。

7

groupLabelFunction:Function

在每个项目上运行的回调函数，以确定其在导航树中的标签。

8

groupRowHeight:Number

分组行的高度(以像素为单位)。

9

hierarchicalCollectionView:IHierarchicalCollectionView

控件使用的IHierarchicalCollectionView实例。

10

itemIcons:Object

指定项目图标的对象。

11

lockedColumnCount:int

[override]控件中滚动的第一列的索引。

12

lockedRowCount:int

[override]控件中滚动的第一行的索引。

13

rendererProviders:Array

AdvancedDataGridRendererProvider实例的数组。

14

selectedCells:Array

包含单元格位置数组作为行和列索引。

15

treeColumn:AdvancedDataGridColumn

显示树的列。

受保护的属性

S.N.属性和描述
1

anchorColumnIndex:int = -1

当前锚点的列索引。

2

caretColumnIndex:int = -1

插入符下的项目的列名称。

3

cellSelectionTweens:Object

选择补间的哈希表。

4

highlightColumnIndex:int = -1

当前在光标上方或下方滚动的项目的列索引。

5

selectedColumnIndex:int = -1

所选单元格的列。

6

treeColumnIndex:int

[只读]树列号。

7

tween : Object

动画行的补间对象用户可以向此对象添加事件侦听器，以在补间开始，更新和结束时获得通知。

8

visibleCellRenderers:Object

当前在视图中的数据提供程序项呈示器的哈希表。

公共方法

S.N.方法和描述
1

AdvancedDataGrid()

构造函数。

2

collapseAll():void

折叠导航树的所有节点。

3

expandAll():void

扩展控件中导航树的所有节点。

4

expandChildrenOf(item:Object，open:Boolean):void

打开或关闭指定项目下方导航树的所有节点。

5

expandItem(item:Object，open:Boolean，animate:Boolean = false，dispatchEvent:Boolean = false，cause:Event = null):void

打开或关闭导航树的分支节点。

6

getParentItem(item:Object):*

返回子项的父项。

7

isItemOpen(item:Object):Boolean

如果指定的分支节点打开，则返回true。

8

setItemIcon(item:Object，iconID:Class，iconID2:Class):void

在项目的导航树中设置关联的图标。

保护方法

S.N.方法和描述
1

add Cell Selection Data (uid:String, columnIndex:int, selectionData:AdvancedDataGridBaseSelectionData):void

向控件中添加单元格选择信息，就像您使用鼠标选择单元格一样。

2

applyCellSelectionEffect(indicator:Sprite，uid:String，columnIndex:int，itemRenderer:IListItemRenderer):void

设置应用选择指示器的效果。

3

applyUserStylesForItemRenderer(givenItemRenderer:IListItemRenderer):void

将样式从AdvancedDataGrid控件应用到项呈示器。

4

atLeastOneProperty(o:Object):Boolean

如果对象至少有一个属性，则返回true，这意味着字典至少有一个键。

5

clearCellSelectionData():void

清除单元格选择的信息。

6

clearIndicators():void

[override]删除所有选择，高亮和插入符号指示符。

7

clearSelectedCells(transition:Boolean = false):void

清除selectedCells属性。

8

dragCompleteHandler(event:DragEvent):void

[override] DragEvent.DRAG_COMPLETE事件的处理程序。

9

dragDropHandler(event:DragEvent):void

[override] DragEvent.DRAG_DROP事件的处理程序。

10

drawVerticalLine(s:Sprite，colIndex:int，color:uint，x:Number):void

[override]在列之间绘制垂直线。

11

finishKeySelection():void

[override]根据caretIndex和anchorIndex属性设置所选项目。

12

initListData(item:Object，adgListData:AdvancedDataGridListData):void

初始化AdvancedDataGrid项呈示器使用的AdvancedDataGridListData对象。

13

moveIndicators(uid:String，offset:int，absolute:Boolean):void

[override]当控件滚动其显示时，将单元格和行选择指示符向上或向下移动给定的偏移量。

14

removeCellSelectionData(uid:String，columnIndex:int):void

从控件中删除单元格选择信息。

15

selectCellItem(item:IListItemRenderer，shiftKey:Boolean，ctrlKey:Boolean，transition:Boolean = true):Boolean

更新所选单元格的列表，假设指定的项目渲染器由鼠标单击，并且键盘修饰符处于指定状态。

16

selectItem(item:IListItemRenderer，shiftKey:Boolean，ctrlKey:Boolean，transition:Boolean = true):Boolean

[override]更新所选项目的集合，因为鼠标点击了所提供的项目渲染器，并且键盘修饰符处于给定状态。

17

treeNavigationHandler(event:KeyboardEvent):Boolean

用于导航树的键盘导航的处理程序。

事件

S.N.事件和描述
1

headerDragOutside

当用户将列拖动到其列组以外时分派。

2

headerDropOutside

当用户将列拖放到其列组之外时分派。

3

itemClose

当导航树的分支关闭或折叠时分派。

4

itemOpen

打开或展开导航树的分支时分派。

5

itemOpening

在启动树分支打开或关闭操作时分派。

继承的方法

此类继承以下类中的方法:

  • mx.controls.AdvancedDataGridBaseEx

  • mx.controls.AdvancedDataGridBase

  • mx.controls.listClasses.AdvancedDataGridBase

  • mx.core.ScrollControlBase

  • mx.core.UIComponent

  • mx.core.FlexSprite

  • flash.display.Sprite

  • flash.display.DisplayObjectContainer

  • flash.display.InteractiveObject

  • flash.display.DisplayObject

  • flash.events.EventDispatcher

  • 目的

Flex高级DataGrid控件示例

让我们按照以下步骤通过创建测试应用程序来检查Flex应用程序中AdvancedDataGrid控件的使用:

步骤描述
1在 Flex - 创建应用程序章节中所述，在包 com.tutorialspoint.client 下创建名为 HelloWorld 的项目。
2修改 HelloWorld.mxml ，如下所述。 保持文件的其余部分不变。
3编译并运行应用程序，以确保业务逻辑按照要求工作。

以下是修改后的mxml文件 src / com.tutorialspoint / HelloWorld.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"
   width="100%" height="100%" minWidth="500" minHeight="500"
   >
   <fx:Style source="/com/tutorialspoint/client/Style.css"/>	
   <fx:Script>
      <![CDATA[
         import mx.collections.ArrayCollection;
         [Bindable]
         public var data:ArrayCollection = new ArrayCollection(
         [   
            {value:"France", code:"FR"},
            {value:"Japan", code:"JP"},
            {value:"India", code:"IN"},
            {value:"Russia", code:"RS"},
            {value:"United States", code:"US"}		
         ]                
         );
      ]]>
   </fx:Script>
   <s:BorderContainer width="630" height="480" id="mainContainer" 
      styleName="container">
      <s:VGroup width="100%" height="100%" gap="50" 
         horizontalAlign="center" verticalAlign="middle">
         <s:Label id="lblHeader" text="Complex Controls Demonstration" 
            fontSize="40" color="0x777777" styleName="heading"/>
         <s:Panel id="dataGridPanel" title="Using DataGrid" 
            width="500" height="300">
            <s:layout>
               <s:VerticalLayout  gap="10" verticalAlign="middle" 
                  horizontalAlign="center"/>							
            </s:layout>					
            <mx:AdvancedDataGrid dataProvider="{data}" id="advancedDataGrid" >
               <mx:columns>
                  <mx:AdvancedDataGridColumn dataField="code" width="100" 
                  headerText="Code" />
                  <mx:AdvancedDataGridColumn dataField="value" width="200" 
                  headerText="Value"/>							
               </mx:columns>
            </mx:AdvancedDataGrid>
            <s:HGroup width="60%">
               <s:Label text="Code :"/> 
               <s:Label text="{advancedDataGrid.selectedItem.code}"
                  fontWeight="bold"/>
               <s:Label text="Value :"/> 
               <s:Label text="{advancedDataGrid.selectedItem.value}"
                  fontWeight="bold"/>						
            </s:HGroup>
         </s:Panel>
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

准备好所有更改后，让我们以正常模式编译和运行应用程序，就像在 Flex - 创建应用程序中一样 章节。 如果一切顺利，您的应用程序，这将产生以下结果:[在线试用]
温馨提示
下载编程狮App，免费阅读超1000+编程语言教程
取消
确定
目录

Adobe Flex 教程

Adobe Flex 相关资源

关闭

 MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }