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 - 创建应用程序中一样章节。如果一切顺利，您的应用程序，这将产生以下结果:

Flex 复杂的控制

Adobe Flex 教程

Adobe Flex 相关资源