PhilFlash

Flex 3 : Datagrid et filtre par comboxbox

Voici une démonstration Flex sur comment filter un datagrid par combobox.

Dans cet exemple, nous avons un ensenble de clients que l'on veut filtrer par sexe ET/OU par ville.

L'ensemble des villes est construit dynamiquement à partir des villes présentes dans le fichier ou web-service.

Voir la démo - See the demo

Voir les sources - View the sources

Si vous avez l'erreur unable to open 'C:\Adobe\Flex Builder 3\sdks\3.0.0\frameworks\locale\fr_FR' lorsque vous compiler les sources, consulter cet article.

Obtenir les sources dgcbfilter.zip

RowColorDatagrid in Flex

Explications

Nous allons expliquer le principe du filtre par combobox

Principe du filtre par combobox

Le Datagrid est une vue permettant d'afficher un modèle : le dataProvider.

<mx:DataGrid id="data_dg" width="100%" height="100%" paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5" dataProvider="{dataAC}" editable="false" >

Ce dataProvider est un ArrayCollection constitué d'objet de type Customer et qui a un filtre : la fonction doFilterField. dataAC est donc défini comme ceci :

<mx:ArrayCollection id="dataAC" filterFunction="doFilterField" />

Lorsque l'on modifie/change un élement d'une comboxBox, un évènement change est déclenché et provoque l'activation de la fonction doRefreshFilterField

<mx:ComboBox id="sex_cb" dataProvider="{listSex}" change="doRefreshFilterField()" />

Cette fonction active la méthode refresh sur l'ArrayCollection : ceci déclenche sur chaque élément la méthode filterFunction donc la fonction doFilterField

public function doRefreshFilterField():void
{
      dataAC.refresh();
      ....

La fonction doFilterField renvoi true si un élément passe les conditions du filtre et false si il doit être rejeté.

public function doFilterField(item:Object):Boolean
{
    //
    var indexSex:int = ((sex_cb.selectedItem == null) ? 0 : sex_cb.selectedIndex);
    var indexCity:Number = ((city_cb.selectedItem == null) ? 0 : city_cb.selectedIndex);
    var rfilter:Boolean = true;
    // Filter on sex
    if (indexSex != 0)
    {
        var valueSex:int = sex_cb.selectedItem.data;
        rfilter = rfilter && (item.sex == valueSex);
    }
    // Filter on city
    if (rfilter && indexCity != 0)
    {
        var valueCity:String = city_cb.selectedItem.label;
        rfilter = rfilter && (item.city == valueCity);
    }
    return rfilter;
}

On prend donc l'index de la première combox
var indexSex:int = ((sex_cb.selectedItem == null) ? 0 : sex_cb.selectedIndex);


Si cette index est différent de 0 (on a donc une "vraie" valeur), on vérifie que la valeur sexe du Customer item.sexest bien égale à la valeur du sexe de valeur sélectionnée dans la comboxbox  sex_cb.selectedItem.data.

    // Filter on sex
    if (indexSex != 0)
    {
        var valueSex:int = sex_cb.selectedItem.data;
        rfilter = rfilter && (item.sex == valueSex);
    }

Si c'est ok, la valeur de rfilter est donc vrai (true) et on peut donc tester le deuxième filtre.

Le deuxième filtre est passé sur la ville/city de la même manière.

Donc, la méthode refresh remet à jour le modèle dataProvider qui remet à jour la vue : le dataGrid.

Que dois-je mettre si je veux tester une condition sur le nom ?

Il suffirait de prendre la valeur d'un TextInput et de vérifier que cette valeur fait partie du nom (champ lastname) de la façon suivante :

    //
    var textFilter:String = myTextInput.text.toLowerCase();
    if (textFilter != "")
    {
        rfilter = rfilter && (item.lastname.toLowerCase().indexOf(textFilter) >= 0);
    }

Fonction Refresh

Lors du premier appel, on utilise un fichier XML : data/customers.xml

Le bouton Rafraîchir/Refresh appelle un pseudo web-service en PHP qui génère un XML à la volée en passant le nombre d'items à générer.

Ce fichier PHP est gencustomer.php (qui est fourni dans les sources). Par défaut, le nombre maximum d'items est de 200.

N'hésitez pas à mettre 10 000 voir 20 000 sur votre machine ou votre serveur en changeant la valeur $maximumItems du fichier PHP.

 


xhtml   css   cc   508   aaa
Me connaître  |  Me contacter