comment trier un DataGrid flexible selon plusieurs colonnes?

Question

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

(! Je une réponse que je vais poster ci-dessous, mais il a un problème - je serai très heureux si quelqu'un peut fournir un meilleur)

est ici 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 je l'ai trouvé à ce jour est de capturer l'événement headerRelease lorsque l'utilisateur clique:

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

Le gestionnaire d'événements peut alors appliquer un ordre de tri des 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 a un problème bien connu, qui est que les en-têtes de colonnes n'affichent plus petites flèches pour montrer le genre direction. C'est un effet secondaire d'appeler evt.preventDefault() mais vous devez effectuer cet appel sinon votre tri personnalisé ne sera pas appliqué.