Flex - Contrôle AdvancedDataGrid

introduction

Le contrôle AdvancedDataGrid a ajouté plusieurs fonctionnalités au contrôle DataGrid standard pour ajouter des fonctionnalités de visualisation de données à l'application Flex. Ces fonctionnalités offrent un meilleur contrôle de l'affichage des données, de l'agrégation des données et du formatage des données.

Déclaration de classe

Voici la déclaration pour mx.controls.AdvancedDataGrid classe -

public class AdvancedDataGrid
   extends AdvancedDataGridBaseEx

Propriétés publiques

Sr.Non	Propriété et description
1	displayDisclosureIcon : Boolean Contrôle la création et la visibilité des icônes de divulgation dans l'arborescence de navigation.
2	displayItemsExpanded : Boolean Si vrai, développez l'arborescence de navigation pour afficher tous les éléments.
3	firstVisibleItem : Object L'élément de fournisseur de données qui correspond à l'élément actuellement affiché dans la ligne supérieure du contrôle AdvancedDataGrid.
4	groupedColumns : Array Array qui définit la hiérarchie des instances AdvancedDataGridColumn lors du regroupement de colonnes.
5	groupIconFunction : Function Une fonction de rappel fournie par l'utilisateur à exécuter sur chaque élément de groupe pour déterminer son icône de branche dans l'arborescence de navigation.
6	groupItemRenderer : IFactory Spécifie le moteur de rendu d'élément utilisé pour afficher les nœuds de branche dans l'arborescence de navigation qui correspondent aux groupes.
sept	groupLabelFunction : Function Une fonction de rappel à exécuter sur chaque élément pour déterminer son étiquette dans l'arborescence de navigation.
8	groupRowHeight : Number La hauteur de la ligne groupée, en pixels.
9	hierarchicalCollectionView : IHierarchicalCollectionView Instance IHierarchicalCollectionView utilisée par le contrôle.
dix	itemIcons : Object Un objet qui spécifie les icônes des éléments.
11	lockedColumnCount : int [override] L'index de la première colonne du contrôle qui défile.
12	lockedRowCount : int [override] L'index de la première ligne du contrôle qui défile.
13	rendererProviders : Array Tableau d'instances AdvancedDataGridRendererProvider.
14	selectedCells : Array Contient un tableau d'emplacements de cellule sous forme d'index de ligne et de colonne.
15	treeColumn : AdvancedDataGridColumn La colonne dans laquelle l'arborescence est affichée.

Propriétés protégées

Sr.Non	Propriété et description
1	anchorColumnIndex : int = -1 L'index de colonne de l'ancre actuelle.
2	caretColumnIndex : int = -1 Le nom de colonne de l'élément sous le curseur.
3	cellSelectionTweens : Object Une table de hachage des interpolations de sélection.
4	highlightColumnIndex : int = -1 Index de colonne de l'élément actuellement survolé ou sous le curseur.
5	selectedColumnIndex : int = -1 La colonne de la cellule sélectionnée.
6	treeColumnIndex : int [lecture seule] Le numéro de la colonne de l'arborescence.
sept	tween : Object Objet d'interpolation qui anime les lignes Les utilisateurs peuvent ajouter des écouteurs d'événements à cet objet pour être avertis lorsque l'interpolation démarre, se met à jour et se termine.
8	visibleCellRenderers : Object Une table de hachage des rendus d'élément de fournisseur de données actuellement en vue.

Méthodes publiques

Sr.Non	Méthode et description
1	AdvancedDataGrid() Constructeur.
2	collapseAll():void Réduit tous les nœuds de l'arborescence de navigation.
3	expandAll():void Développe tous les nœuds de l'arborescence de navigation dans le contrôle.
4	expandChildrenOf(item:Object, open:Boolean):void Ouvre ou ferme tous les nœuds de l'arborescence de navigation sous l'élément spécifié.
5	expandItem(item:Object, open:Boolean, animate:Boolean = false, dispatchEvent:Boolean = false, cause:Event = null):void Ouvre ou ferme un nœud de branche de l'arborescence de navigation.
6	getParentItem(item:Object):* Renvoie le parent d'un élément enfant.
sept	isItemOpen(item:Object):Boolean Renvoie true si le nœud de branche spécifié est ouvert.
8	setItemIcon(item:Object, iconID:Class, iconID2:Class):void Définit l'icône associée dans l'arborescence de navigation de l'élément.

Méthodes protégées

Sr.Non	Méthode et description
1	addCellSelectionData (uid:String, columnIndex:int, selectionData:AdvancedDataGridBaseSelectionData):void Ajoute des informations de sélection de cellule au contrôle, comme si vous utilisiez la souris pour sélectionner la cellule.
2	applyCellSelectionEffect (indicator:Sprite, uid:String, columnIndex:int, itemRenderer:IListItemRenderer):void Configure l'effet d'application de l'indicateur de sélection.
3	applyUserStylesForItemRenderer (givenItemRenderer:IListItemRenderer):void Applique les styles du contrôle AdvancedDataGrid à un rendu d'élément.
4	atLeastOneProperty(o:Object):Boolean Renvoie true si l'objet a au moins une propriété, ce qui signifie que le dictionnaire a au moins une clé.
5	clearCellSelectionData():void Efface les informations sur la sélection de cellule.
6	clearIndicators():void [override] Supprime tous les indicateurs de sélection et de surbrillance et d'insertion.
sept	clearSelectedCells(transition:Boolean = false):void Efface la propriété selectedCells.
8	dragCompleteHandler(event:DragEvent):void [override] Gestionnaire de l'événement DragEvent.DRAG_COMPLETE.
9	dragDropHandler(event:DragEvent):void [override] Gestionnaire pour l'événement DragEvent.DRAG_DROP.
dix	drawVerticalLine (s:Sprite, colIndex:int, color:uint, x:Number):void [override] Trace une ligne verticale entre les colonnes.
11	finishKeySelection():void [override] Définit les éléments sélectionnés en fonction des propriétés caretIndex et anchorIndex.
12	initListData (item:Object, adgListData:AdvancedDataGridListData):void Initialise un objet AdvancedDataGridListData utilisé par le moteur de rendu d'élément AdvancedDataGrid.
13	moveIndicators(uid:String, offset:int, absolute:Boolean):void [override] Déplace les indicateurs de sélection de cellule et de ligne vers le haut ou vers le bas du décalage donné lorsque la commande fait défiler son affichage.
14	removeCellSelectionData(uid:String, columnIndex:int):void Supprime les informations de sélection de cellule du contrôle.
15	selectCellItem (item:IListItemRenderer, shiftKey:Boolean, ctrlKey:Boolean, transition:Boolean = true):Boolean Met à jour la liste des cellules sélectionnées, en supposant que le rendu d'élément spécifié a été cliqué par la souris et que les modificateurs de clavier sont dans l'état spécifié.
16	selectItem (item:IListItemRenderer, shiftKey:Boolean, ctrlKey:Boolean, transition:Boolean = true):Boolean [override] Met à jour l'ensemble des éléments sélectionnés étant donné que le rendu d'élément fourni a été cliqué par la souris et que les modificateurs de clavier sont dans l'état donné.
17	treeNavigationHandler(event:KeyboardEvent):Boolean Gestionnaire de navigation clavier pour l'arborescence de navigation.

Événements

Sr.Non	Description de l'évenement
1	headerDragOutside Distribué lorsque l'utilisateur fait glisser une colonne en dehors de son groupe de colonnes.
2	headerDropOutside Distribué lorsque l'utilisateur supprime une colonne en dehors de son groupe de colonnes.
3	itemClose Distribué lorsqu'une branche de l'arborescence de navigation est fermée ou réduite.
4	itemOpen Distribué lorsqu'une branche de l'arborescence de navigation est ouverte ou développée.
5	itemOpening Distribué lorsqu'une opération d'ouverture ou de fermeture de branche d'arbre est lancée.

Méthodes héritées

Cette classe hérite des méthodes des classes suivantes -

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

Exemple de contrôle Flex AdvancedDataGrid

Suivons les étapes suivantes pour vérifier l'utilisation du contrôle AdvancedDataGrid dans une application Flex en créant une application de test -

Étape	La description
1	Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application .
2	Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3	Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.

Voici le contenu du fichier mxml modifié 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>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode normal comme nous l'avons fait dans le chapitre Flex - Créer une application . Si tout va bien avec votre application, elle produira le résultat suivant: [ Essayez-le en ligne ]

↰ Previous page