Flex - AdvancedDataGrid 控件

上一页
下一页

介绍

AdvancedDataGrid 控件为标准 DataGrid 控件添加了多个功能，以增强 Flex 应用程序的数据可视化功能。这些功能提供了对数据显示、数据聚合和数据格式的更好控制。

类声明

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

public class AdvancedDataGrid
   extends AdvancedDataGridBaseEx

公共属性

序号 属性和说明
1

displayDisclosureIcon : Boolean

控制导航树中显示图标的创建和可见性。
2

displayItemsExpanded : Boolean

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

firstVisibleItem : Object

对应于当前显示在 AdvancedDataGrid 控件顶行的项目的dataProvider元素。
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

[覆盖] 控件中第一个滚动列的索引。
12

lockedRowCount : int

[覆盖] 控件中第一行滚动行的索引。
13

rendererProviders : Array

AdvancedDataGridRendererProvider 实例的数组。
14

selectedCells : Array

包含单元格位置数组，以行和列索引表示。
15

treeColumn : AdvancedDataGridColumn

显示树的列。

受保护的属性

序号 属性和说明
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

当前可见的dataProvider项目渲染器的哈希表。

公共方法

序号 方法和说明
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

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

受保护的方法

序号 方法和说明
1

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

[覆盖] 删除所有选择、突出显示和光标指示器。
7

clearSelectedCells(transition:Boolean = false):void

清除 selectedCells 属性。
8

dragCompleteHandler(event:DragEvent):void

[覆盖] DragEvent.DRAG_COMPLETE 事件的处理程序。
9

dragDropHandler(event:DragEvent):void

[覆盖] DragEvent.DRAG_DROP 事件的处理程序。
10

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

[覆盖] 在列之间绘制垂直线。
11

finishKeySelection():void

[覆盖] 根据 caretIndex 和 anchorIndex 属性设置选定项目。
12

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

初始化 AdvancedDataGrid 项目渲染器使用的 AdvancedDataGridListData 对象。
13

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

[覆盖] 当控件滚动显示时，将单元格和行选择指示器向上或向下移动给定的偏移量。
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

[覆盖] 更新选定项目集，假设提供的项目渲染器被鼠标点击，并且键盘修饰符处于给定状态。
17

treeNavigationHandler(event:KeyboardEvent):Boolean

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

事件

序号 事件和说明
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
  • Object

Flex AdvancedDataGrid 控件示例

让我们按照以下步骤，通过创建一个测试应用程序来检查在 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 - 创建应用程序章节中一样，在普通模式下编译并运行应用程序。如果您的应用程序一切正常，它将产生以下结果：[ 在线尝试 ]

Flex AdvancedDataGrid Control
flex_complex_controls.htm
打印页面
上一页
下一页
广告
© . All rights reserved.