come ordinare un datagrid flessibile in base a più colonne?

Question

Ho un datagrid, popolato come mostrato di seguito.Quando l'utente fa clic sull'intestazione di una colonna, vorrei ordinare le righe utilizzando un ordinamento lessicografico in cui viene utilizzata per prima la colonna selezionata, quindi le colonne rimanenti vengono utilizzate in ordine da sinistra a destra per rompere eventuali legami.Come posso codificarlo?

(Ho una risposta, che pubblicherò di seguito, ma presenta un problema: sarei entusiasta se qualcuno potesse fornirne una migliore!)

Ecco la disposizione:

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

Ed ecco il codice di supporto:

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 migliore risposta che ho trovato finora è acquisire l'evento headerRelease quando l'utente fa clic:

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

Il gestore eventi può quindi applicare un ordinamento ai dati:

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

Tuttavia questo approccio presenta un problema ben noto, ovvero che le intestazioni delle colonne non mostrano più piccole frecce per mostrare la direzione dell'ordinamento.Questo è un effetto collaterale di chiamare Evt.PreventDefault (), tuttavia è necessario effettuare quella chiamata o altrimenti il ​​tuo tipo personalizzato non verrà applicato.