Adobe Flex Tutorial - Adobe Flex Tutorial

18août/090

Flex AdvancedDataGrid – Affichage de données hierarchiques et groupées

Le composant AdvancedDataGrid supporte l'affichage de données hiérarchiques (hierarchical) et groupées (grouped). Pour cela, le composant ADG affiche un Tree de navigation dans une colonne qui vous laisse naviguer dans la hiérarchie de données.

La donnée est dite "hierarchical" (hiérarchique) si elle a déjà une structure parent/enfant (child). Vous pouvez passer de la donnée hiérarchique directement au composant AdvancedDataGrid. La donnée est dite "grouped" (groupée) si elle se présente à plat, sans hiérarchie apparente. Avant de passée de la data à plat à un composant ADG, vous devez spécifier un ou plusieurs champs de données qui seront utilisés pour grouper la donnée en une hiérarchie.

Afficher de la donnée "hierarchical" (hiérarchique)

Le code suivant montre de la donnée hiérarchique placée dans le fichier SimpleHierarchicalData.as:

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

Notez que la donnée contient objet au niveau le plus haut qui contient un champ "Region" et de multiple enfants. Chaque enfant direct contient aussi un champ "Région" et un ou plusieurs enfants.

Voici comme cette donnée sera affichée dans le composant AdvancedDataGrid:

adg-1

Afficher de la donnée groupée

Pour afficher de la donnée à plat comme une hiérarchie, il faut grouper les lignes de la donnée à plat avant de la passer au composant AdvancedDataGrid. Voici la donnée utilisée cette fois-ci:

[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}
]);

Dans cet exemple, la donnée contient un seul niveau d'enregistrement avec aucune hiérarchie apparente. Pour grouper la donnée, vous devez spécifier un ou plusieurs champs qui seront utilisée pour construire la hiérarchie. Voici le composant ADG une fois que la donnée à plat a été groupée selon le champ "Region":

adg-2