Flex/DataGrid

Cette page a été rédigée il y a fort fort longtemps, et n'a pas tellement été mise à jour.

 

Vous savez, moi je ne crois pas qu'il y ait de bonne ou de mauvaise page. Moi, si je devais résumer mon wiki aujourd'hui avec vous, je dirais que c'est d'abord des rencontres. Des gens qui m'ont tendu la main, peut-être à un moment où je ne pouvais pas, où j'étais seul chez moi. Et c'est assez curieux de se dire que les hasards, les rencontres forgent une destinée... Parce que quand on a le goût de la chose, quand on a le goût de la chose bien faite, le beau geste, parfois on ne trouve pas l'interlocuteur en face je dirais, le miroir qui vous aide à avancer. Alors ça n'est pas mon cas, comme je disais là, puisque moi au contraire, j'ai pu ; et je dis merci au wiki, je lui dis merci, je chante le wiki, je danse le wiki... je ne suis qu'amour ! Et finalement, quand des gens me disent « Mais comment fais-tu pour avoir cette humanité ? », je leur réponds très simplement que c'est ce goût de l'amour, ce goût donc qui m'a poussé aujourd'hui à entreprendre une construction logicielle... mais demain qui sait ? Peut-être simplement à me mettre au service de la communauté, à faire le don, le don de soi.

Les DataGrid permettent de représenter une liste de données dans plusieurs colonnes. Par défaut, une data grid permet de sélectionner une ligne (avec surlignage de la ligne sélectionnée), d’effectuer des opérations de tri sur chaque colonne (click sur le header), de redimensionner les colonnes.

Premier exemple

Une collection d’objets est fournie à la data grid via la propriété dataProvider. Chaque colonne est décrite en indiquant d’une part le texte du header, et d’autre part la propriété de l’objet model à afficher.

<mx:DataGrid dataProvider="{_acProduits}">
  <mx:columns>
    <mx:DataGridColumn headerText="Code" dataField="code"/>
    <mx:DataGridColumn headerText="Libelle" dataField="libelle"/>
    <mx:DataGridColumn headerText="Prix" dataField="prix"/>
  </mx:columns>
</mx:DataGrid>

Sélectionner une colonne

Il s’agit de redéfinir les comportements par défaut de la data grid de façon à pouvoir sélectionner une colonne lorsque l’on clique sur le header ou sur une cellule. A cette fin, il faut définir les propriétés suivantes sur la data grid :

  • selectable="false" de façon à éliminer le surlignage des lignes quand elles sont sélectionnées

  • useRollOver="false" de façon à éliminer le surlignage des lignes quand elles sont survolées par le curseur

  • headerRelease="colonneHandler1(event)" pour intercepter le clique sur le header d’une colonne

  • itemClick="colonneHandler2(event)" pour intercepter le clique sur une cellule

<mx:DataGrid id="myTable" dataProvider="{_acProduits}" useRollOver="false" selectable="false"
             headerRelease="myHeaderHandler(event)" itemClick="myItemHandler(event)">
  <mx:columns>
    <mx:DataGridColumn headerText="Code" dataField="code"/>
    <mx:DataGridColumn headerText="Libelle" dataField="libelle"/>
    <mx:DataGridColumn headerText="Prix" dataField="prix"/>
  </mx:columns>
</mx:DataGrid>

  • Interception de l’évènement clic sur cellule

La couleur de fond de chaque colonne est affectée en fonction de la sélection.

private function myItemHandler(event:ListEvent):void {
  // colonne sélectionnée => gris
  for (var i:int = 0; i < myTable.columns.length; i++) {
    var column:DataGridColumn = myTable.columns[i];
    if (i == event.columnIndex) {
      column.setStyle("backgroundColor", "#AAAAAA");
    } else {
      column.setStyle("backgroundColor", "#FFFFFF");
    }
  }
}

  • Interception de l’évènement clic sur header

La couleur de fond de chaque colonne est affectée en fonction de la sélection. Il faut aussi prendre soin de ne pas désactiver la fonction de tri au niveau des colonnes (sortable="false"), sinon l’évènement n’est pas généré. En revanche, pour empêcher le tri après emission de l’évènement, il faut invoquer la méthode preventDefault() sur l’évènement.

private function myHeaderHandler(event:DataGridEvent):void {
  event.preventDefault();// pour éviter de déclencher le tri
  selectItem(event.columnIndex);
}