Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex AdvancedDataGrid – Tri sur plusieurs colonnes (Sort et sortExpertMode)

Par défaut, le composant AdvancedDataGrid affiche la donnée dans l'ordre spécifié dans le dataProvider. Le composant AdvancedDataGrid permet de trier la donnée après que le composant l'ait affichée, dans une ou plusieurs colonnes.

Pour désactiver le tri (sorting) pour tout le composant AdvancedDataGrid, fixez la propriété AdvancedDataGrid.sortableColumns à false. Pour désactiver le tri sur une seule colonne, fixez la propriété AdvancedDataGridColumn.sortable à false.

La propriété sortExpertMode

La façon par laquelle vous triez plusieurs colonnes est basée sur la valeur de la propriété sortExpertMode. Par défaut, sortExpertMode est à false. Ce paramètre indique que vous cliquez sur une tête de colonne pour trier les lignes d'un composant AdvancedDataGrid par cette colonne. Vous pouvez ensuite cliquer dans la zone de tri multiple (Multiple Column Sort Area) pour trier par d'autre colonne. Pour utiliser la touche Control (Ctrl) pour sélectionner chaque colonne (après la première), fixez la propriété sortExpertMode à true.

L'exemple suivant montre un composant AdvancedDataGrid avec trois colonnes et la propriété sortExpertMode à false:

Tri de colonnes avec sortExpertMode à false:

1. Cliquez dans l'en-tête de n'importe quelle colonne du composant AdvancedDataGrid pour trier selon cette colonne. Par exemple cliquez sur "Artist" pour trier selon cette colonne dans l'ordre ascendant. Cliquez une nouvelle fois pour inverser l'ordre.
2. Cliquez dans la partie de tri multiple de n'importe quelle autre colonne. Par exemple, cliquez sur la zone de tri multiple de la colonne Price pour la trier dans l'ordre ascendant, alors que la colonne Artist est dans l'ordre descendant. Vous pouvez ainsi trouver l'album le moins cher pour chaque artiste.
3. Cliquez sur la zone de tri multiple de la colonne Price à nouveau pour inverser son ordre.
4. Cliquez sur la zone de tri multiple de n'importe quelle autre colonne pour les intégrer au tri

Tri de colonnes avec sortExpertMode à true:

1. Cliquez dans l'en-tête de n'importe quelle colonne du composant AdvancedDataGrid pour trier selon cette colonne. Par exemple cliquez sur "Artist" pour trier selon cette colonne dans l'ordre ascendant. Cliquez une nouvelle fois pour inverser l'ordre. (idem)
2. Avec la touche Ctrl appuyée, cliquez sur une autre en-tête de colonne. Par exemple, celle du prix (Price) pour la trier dans l'ordre ascendant, alors que la colonne Artist est dans l'ordre descendant. Vous pouvez ainsi trouver l'album le moins cher pour chaque artiste.
3. Avec la touche Ctrl appuyée, cliquez sur la colonne Price pour inverser son ordre de tri
4. Avec la touche Ctrl appuyée, cliquez sur n'importe quelle autre colonne pour l'intégrer au tri.

Voici un petit exemple pour vous faire la main:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

	<mx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;

		[Bindable]
		private var dpADG:ArrayCollection = new ArrayCollection([
		{Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
		{Artist:'Pavement', Album:'Brighten the Corners', Price:11.99},
		{Artist:'Saner', Album:'A Child Once', Price:11.99},
		{Artist:'Saner', Album:'Helium Wings', Price:12.99},
		{Artist:'The Doors', Album:'The Doors', Price:10.99},
		{Artist:'The Doors', Album:'Morrison Hotel', Price:12.99},
		{Artist:'Grateful Dead', Album:'American Beauty', Price:11.99},
		{Artist:'Grateful Dead', Album:'In the Dark', Price:11.99},
		{Artist:'Grateful Dead', Album:'Shakedown Street', Price:11.99},
		{Artist:'The Doors', Album:'Strange Days', Price:12.99},
		{Artist:'The Doors', Album:'The Best of the Doors', Price:10.99}
		]);
	]]>
	</mx:Script>
	<mx:ApplicationControlBar dock="true">
		<mx:CheckBox id="sortExpertModeCB" label="sortExpertMode?"/>
	</mx:ApplicationControlBar>
	<mx:AdvancedDataGrid
		width="100%" height="100%"
		sortExpertMode="{sortExpertModeCB.selected}"
		dataProvider="{dpADG}">
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="Artist" />
			<mx:AdvancedDataGridColumn dataField="Album" />
			<mx:AdvancedDataGridColumn dataField="Price" />
		</mx:columns>
	</mx:AdvancedDataGrid>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application