Flex - Controllo AdvancedDataGrid

introduzione

Il controllo AdvancedDataGrid ha aggiunto più funzionalità al controllo DataGrid standard per aggiungere funzionalità di visualizzazione dei dati all'applicazione Flex. Queste funzionalità forniscono un maggiore controllo della visualizzazione dei dati, dell'aggregazione dei dati e della formattazione dei dati.

Dichiarazione di classe

Di seguito è riportata la dichiarazione per mx.controls.AdvancedDataGrid classe -

public class AdvancedDataGrid
   extends AdvancedDataGridBaseEx

Proprietà pubbliche

Suor n	Proprietà e descrizione
1	displayDisclosureIcon : Boolean Controlla la creazione e la visibilità delle icone di divulgazione nella struttura di navigazione.
2	displayItemsExpanded : Boolean Se true, espandere l'albero di navigazione per mostrare tutti gli elementi.
3	firstVisibleItem : Object L'elemento del provider di dati che corrisponde all'elemento attualmente visualizzato nella riga superiore del controllo AdvancedDataGrid.
4	groupedColumns : Array Un array che definisce la gerarchia delle istanze di AdvancedDataGridColumn quando si esegue il raggruppamento di colonne.
5	groupIconFunction : Function Una funzione di callback fornita dall'utente da eseguire su ogni elemento del gruppo per determinare la relativa icona di ramo nella struttura di navigazione.
6	groupItemRenderer : IFactory Specifica il renderer di elementi utilizzato per visualizzare i nodi di diramazione nella struttura di navigazione che corrispondono ai gruppi.
7	groupLabelFunction : Function Una funzione di callback da eseguire su ogni elemento per determinarne l'etichetta nella struttura di navigazione.
8	groupRowHeight : Number L'altezza della riga raggruppata, in pixel.
9	hierarchicalCollectionView : IHierarchicalCollectionView L'istanza di IHierarchicalCollectionView utilizzata dal controllo.
10	itemIcons : Object Un oggetto che specifica le icone degli elementi.
11	lockedColumnCount : int [override] L'indice della prima colonna nel controllo che scorre.
12	lockedRowCount : int [override] L'indice della prima riga nel controllo che scorre.
13	rendererProviders : Array Matrice di istanze di AdvancedDataGridRendererProvider.
14	selectedCells : Array Contiene una matrice di posizioni delle celle come indici di riga e colonna.
15	treeColumn : AdvancedDataGridColumn La colonna in cui viene visualizzato l'albero.

Proprietà protette

Suor n	Proprietà e descrizione
1	anchorColumnIndex : int = -1 L'indice della colonna dell'ancora corrente.
2	caretColumnIndex : int = -1 Il nome della colonna dell'elemento sotto il cursore.
3	cellSelectionTweens : Object Una tabella hash di interpolazioni di selezione.
4	highlightColumnIndex : int = -1 L'indice della colonna dell'elemento su cui è attualmente eseguito il rollover sopra o sotto il cursore.
5	selectedColumnIndex : int = -1 La colonna della cella selezionata.
6	treeColumnIndex : int [sola lettura] Il numero della colonna dell'albero.
7	tween : Object L'oggetto interpolazione che anima le righe Gli utenti possono aggiungere listener di eventi a questo oggetto per ricevere una notifica quando l'interpolazione inizia, si aggiorna e finisce.
8	visibleCellRenderers : Object Una tabella hash dei renderer di elementi del fornitore di dati attualmente in vista.

Metodi pubblici

Suor n	Metodo e descrizione
1	AdvancedDataGrid() Costruttore.
2	collapseAll():void Comprime tutti i nodi dell'albero di navigazione.
3	expandAll():void Espande tutti i nodi dell'albero di navigazione nel controllo.
4	expandChildrenOf(item:Object, open:Boolean):void Apre o chiude tutti i nodi dell'albero di navigazione sotto l'elemento specificato.
5	expandItem(item:Object, open:Boolean, animate:Boolean = false, dispatchEvent:Boolean = false, cause:Event = null):void Apre o chiude un nodo di diramazione dell'albero di navigazione.
6	getParentItem(item:Object):* Restituisce l'elemento padre di un elemento figlio.
7	isItemOpen(item:Object):Boolean Restituisce vero se il nodo di diramazione specificato è aperto.
8	setItemIcon(item:Object, iconID:Class, iconID2:Class):void Imposta l'icona associata nella struttura di navigazione per l'elemento.

Metodi protetti

Suor n	Metodo e descrizione
1	addCellSelectionData (uid:String, columnIndex:int, selectionData:AdvancedDataGridBaseSelectionData):void Aggiunge le informazioni sulla selezione della cella al controllo, come se avessi usato il mouse per selezionare la cella.
2	applyCellSelectionEffect (indicator:Sprite, uid:String, columnIndex:int, itemRenderer:IListItemRenderer):void Imposta l'effetto per l'applicazione dell'indicatore di selezione.
3	applyUserStylesForItemRenderer (givenItemRenderer:IListItemRenderer):void Applica gli stili dal controllo AdvancedDataGrid a un renderer di elementi.
4	atLeastOneProperty(o:Object):Boolean Restituisce true se Object ha almeno una proprietà, il che significa che il dizionario ha almeno una chiave.
5	clearCellSelectionData():void Cancella le informazioni sulla selezione delle celle.
6	clearIndicators():void [override] Rimuove tutta la selezione, l'evidenziazione e gli indicatori di cursore.
7	clearSelectedCells(transition:Boolean = false):void Cancella la proprietà selectedCells.
8	dragCompleteHandler(event:DragEvent):void [override] Gestore per l'evento DragEvent.DRAG_COMPLETE.
9	dragDropHandler(event:DragEvent):void [override] Gestore dell'evento DragEvent.DRAG_DROP.
10	drawVerticalLine (s:Sprite, colIndex:int, color:uint, x:Number):void [override] Disegna una linea verticale tra le colonne.
11	finishKeySelection():void [override] Imposta gli elementi selezionati in base alle proprietà caretIndex e anchorIndex.
12	initListData (item:Object, adgListData:AdvancedDataGridListData):void Inizializza un oggetto AdvancedDataGridListData utilizzato dal renderer di elementi AdvancedDataGrid.
13	moveIndicators(uid:String, offset:int, absolute:Boolean):void [override] Sposta gli indicatori di selezione della cella e della riga verso l'alto o verso il basso dell'offset dato mentre il controllo scorre il suo display.
14	removeCellSelectionData(uid:String, columnIndex:int):void Rimuove le informazioni sulla selezione delle celle dal controllo.
15	selectCellItem (item:IListItemRenderer, shiftKey:Boolean, ctrlKey:Boolean, transition:Boolean = true):Boolean Aggiorna l'elenco delle celle selezionate, supponendo che il renderer dell'elemento specificato sia stato cliccato dal mouse e che i modificatori della tastiera siano nello stato specificato.
16	selectItem (item:IListItemRenderer, shiftKey:Boolean, ctrlKey:Boolean, transition:Boolean = true):Boolean [override] Aggiorna il set di elementi selezionati dato che il renderer di elementi fornito è stato cliccato dal mouse e i modificatori della tastiera sono nello stato specificato.
17	treeNavigationHandler(event:KeyboardEvent):Boolean Gestore per la navigazione da tastiera per l'albero di navigazione.

Eventi

Suor n	Descrizione dell'evento
1	headerDragOutside Inviato quando l'utente trascina una colonna all'esterno del suo gruppo di colonne.
2	headerDropOutside Inviato quando l'utente rilascia una colonna al di fuori del proprio gruppo di colonne.
3	itemClose Inviato quando un ramo dell'albero di navigazione viene chiuso o compresso.
4	itemOpen Inviato quando un ramo dell'albero di navigazione viene aperto o espanso.
5	itemOpening Inviato quando viene avviata un'operazione di apertura o chiusura di un ramo di albero.

Metodi ereditati

Questa classe eredita i metodi dalle seguenti classi:

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

Esempio di controllo Flex AdvancedDataGrid

Seguiamo i seguenti passaggi per verificare l'utilizzo del controllo AdvancedDataGrid in un'applicazione Flex creando un'applicazione di test:

Passo	Descrizione
1	Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint.client come spiegato nel capitolo Flex - Crea applicazione .
2	Modifica HelloWorld.mxml come spiegato di seguito. Mantieni il resto dei file invariato.
3	Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti.

Di seguito è riportato il contenuto del file mxml modificato 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>

Una volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione in modalità normale come abbiamo fatto nel capitolo Flex - Crea applicazione . Se tutto va bene con la tua applicazione, produrrà il seguente risultato: [ Provalo online ]

↰ Previous page