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.