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

Flex AdvancedDataGrid – Utilisation de GroupingCollection, Grouping et GroupingField

Une donnée dite "Grouped"  (groupée) est une donnée à plat que vous arrangez en hiérarchie pour pouvoir l'afficher dans un composant AdvancedDataGrid. Pour grouper la data, vous devez spécifier un ou plusieurs champ pour pouvoir créer la hiérarchie.

Pour peupler un composant AdvancedDataGrid avec de la donnée groupée, créez une instance de la classe GroupingCollection à partir de votre donnée à plat, et passez ensuite cette instance au dataProvider de votre composant AdvancedDataGrid. Quand vous créez une instance de GroupingCollection depuis votre donnée à plat, vous devez spécifiez les champs (GroupingField) qui seront utilisés pour créer la hiérarchie.

Voici notre donnée "flat" (à plat):

[Bindable]
private var dpFlat:ArrayCollection = new ArrayCollection([
	{Region:"Southwest", Territory:"Arizona",
	Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
	{Region:"Southwest", Territory:"Arizona",
	Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},
	{Region:"Southwest", Territory:"Central California",
	Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},
	{Region:"Southwest", Territory:"Nevada",
	Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},
	{Region:"Southwest", Territory:"Northern California",
	Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
	{Region:"Southwest", Territory:"Northern California",
	Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},
	{Region:"Southwest", Territory:"Southern California",
	Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
	{Region:"Southwest", Territory:"Southern California",
	Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
]);

L'exemple suivant utilise cette donnée. On spécifie deux champs qui seront utilisés pour grouper la donnée: Region et Territory. La première colonne du composant AdvancedDataGrid est associée avec le champ Region donc l'arbre de navigation interne utilise le champ Region pour définir les labels de chaque noeud enfant:

<?xml version="1.0"?>
<!-- dpcontrols/adg/SimpleGroupADGMXML.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;
		include "SimpleFlatData.as"
	]]>
	</mx:Script>
	<mx:AdvancedDataGrid id="myADG"
		width="100%" height="100%"
		initialize="gc.refresh();">
	<mx:dataProvider>
		<mx:GroupingCollection id="gc" source="{dpFlat}">
			<mx:grouping>
				<mx:Grouping>
					<mx:GroupingField name="Region"/>
					<mx:GroupingField name="Territory"/>
				</mx:Grouping>
			</mx:grouping>
		</mx:GroupingCollection>
	</mx:dataProvider>
	<mx:columns>
		<mx:AdvancedDataGridColumn dataField="Region"/>
		<mx:AdvancedDataGridColumn dataField="Territory"/>
		<mx:AdvancedDataGridColumn dataField="Territory_Rep"
			headerText="Territory Rep"/>
		<mx:AdvancedDataGridColumn dataField="Actual"/>
		<mx:AdvancedDataGridColumn dataField="Estimate"/>
		</mx:columns>
	</mx:AdvancedDataGrid>
</mx:Application>

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

L'instance de GroupingCollction reformate la donnée suivant les champs de regroupement (GroupingField). En interne, voici la représentation qu'il en a fait:

[{GroupLabel:"Southwest", children:[
	{GroupLabel:"Arizona", children:[
		{Region:"Southwest", Territory:"Arizona",
		Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
		{Region:"Southwest", Territory:"Arizona",
		Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]}
	{GroupLabel:"Central California", children:[
		{Region:"Southwest", Territory:"Central California",
		Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]}
	{GroupLabel:"Nevada", children:[
		{Region:"Southwest", Territory:"Nevada",
		Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]}
	{GroupLabel:"Northern California", children:[
		{Region:"Southwest", Territory:"Northern California",
		Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
		{Region:"Southwest", Territory:"Northern California",
		Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]}
	{GroupLabel:"Southern California", children:[
		{Region:"Southwest", Territory:"Southern California",
		Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
		{Region:"Southwest", Territory:"Southern California",
		Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
]}]

Appel à la méthode GroupingCollection.refresh()

La méthode GroupingCollection.refresh() applique les paramètres de GroupingCollection à la donnée. Vous devez appeler cette méthode à chaque fois que vous modifiez la classe GroupingCollection, par exemple quand vous fixer la propriété grouping.source ou grouping.summaries. Vous devez aussi appeler refresh() quand vous modifiez les GroupingField (changement des propriétés caseInsensitive, compareFunction ou groupingFunction).

Notez que dans l'exemple précédent, le composant AdvancedDataGrid appelle GroupingCollection.refresh() en réponse à l'évènement initialize du composant AdvancedDataGrid.