cómo ordenar una cuadrícula de datos flexible según múltiples columnas?

Question

Tengo una cuadrícula de datos, rellenada como se muestra a continuación. Cuando el usuario hace clic en el encabezado de una columna, me gustaría ordenar las filas usando un orden lexicográfico en el que se utiliza primero la columna seleccionada, luego las columnas restantes se usan en orden de izquierda a derecha para romper cualquier vínculo. ¿Cómo puedo codificar esto?

(! Tengo una respuesta, que voy a publicar más adelante, pero tiene un problema - Estaré encantado si alguien puede proporcionar una mejor)

Aquí está el diseño:

<?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> 

Y aquí está el código de respaldo:

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 mejor respuesta que he encontrado hasta ahora es capturar el evento headerRelease cuando el usuario hace clic en:

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

El controlador de eventos puede entonces aplicar un criterio de ordenación de los datos:

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(); 
} 

Sin embargo, este enfoque tiene un problema bien conocido, y es que los títulos de las columnas ya no muestran pequeñas flechas para mostrar el tipo dirección. Este es un efecto secundario de llamar al evt.preventDefault() , sin embargo, debe realizar esa llamada o bien no se aplicará su clasificación personalizada.