comment trier une grille de données flex en fonction de plusieurs colonnes?

Question

J'ai une grille de données, remplie comme indiqué ci-dessous. Lorsque l'utilisateur clique sur un en-tête de colonne, je souhaite trier les lignes à l'aide d'un tri lexicographique dans lequel la colonne sélectionnée est utilisée en premier, puis les colonnes restantes sont utilisées dans un ordre de gauche à droite pour rompre les liens. Comment puis-je coder ceci?

(J'ai une réponse, que je posterai ci-dessous, mais cela pose un problème - je serai ravi si quelqu'un peut en fournir une meilleure!)

Voici la mise en page:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" creationComplete="onCreationComplete()">

    <mx:Script source="GridCode.as" />

    <mx:DataGrid id="theGrid" x="61" y="55" width="466" height="317">
        <mx:columns>
            <mx:DataGridColumn dataField="A"/>
            <mx:DataGridColumn dataField="B"/>
            <mx:DataGridColumn dataField="C"/>
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

Et voici le code de support:

import mx.collections.ArrayCollection;
import mx.collections.Sort;
import mx.collections.SortField;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.events.DataGridEvent;

public function onCreationComplete():void
{
    var ar:ArrayCollection = new ArrayCollection();
    var ob:Object;
    for( var i:int=0; i<20; i++ )
    {
        ob = new Object();
        ob["A"] = i;
        ob["B"] = i%3;
        ob["C"] = i%5;
        ar.addItem(ob);
    }
    this.theGrid.dataProvider = ar;
}

Answer 1

La meilleure réponse que j'ai trouvée jusqu'à présent est de capturer l'événement headerRelease lorsque l'utilisateur clique sur:

<mx:DataGrid id="theGrid" x="61" y="55" width="466" height="317"
        headerRelease="onHeaderRelease(event)">

Le gestionnaire d'événements peut ensuite appliquer un ordre de tri aux données:

private var lastIndex:int = -1;
private var desc:Boolean = false;

public function onHeaderRelease(evt:DataGridEvent):void
{
    evt.preventDefault();

    var srt:Sort = new Sort();
    var fields:Array = new Array();

    if( evt.columnIndex == lastIndex )
    {
        desc = !desc;
    }
    else
    {
        desc = false;
        lastIndex = evt.columnIndex;
    }

    fields.push( new SortField( evt.dataField, false, desc ) );
    if( evt.dataField != "A" )
        fields.push( new SortField("A", false, desc) );
    if( evt.dataField != "B" )
        fields.push( new SortField("B", false, desc) );
    if( evt.dataField != "C" )
        fields.push( new SortField("C", false, desc) );
    srt.fields = fields;

    var ar:ArrayCollection = this.theGrid.dataProvider as ArrayCollection;
    ar.sort = srt;
    ar.refresh();
}

Cependant, cette approche présente un problème bien connu, à savoir que les en-têtes de colonne n’affichent plus les petites flèches indiquant le sens du tri. Ceci est un effet secondaire d'appeler     evt.preventDefault () Toutefois, vous devez effectuer cet appel ou bien votre tri personnalisé ne sera pas appliqué.