如何根据多列对 flex 数据网格进行排序？

Posted 2023-02-22

【中文标题】如何根据多列对 flex 数据网格进行排序？

【英文标题】：how to sort a flex datagrid according to multiple columns?

【发布时间】：2010-09-10 07:14:35

【问题描述】：

我有一个数据网格，填充如下所示。当用户单击列标题时，我想使用字典排序对行进行排序，其中首先使用选定的列，然后以从左到右的顺序使用剩余的列以打破任何关系。我该如何编码？

（我有一个答案，我将在下面发布，但它有一个问题——如果有人能提供更好的答案，我会很高兴！）

这是布局：

<?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"  >
        <mx:columns>
            <mx:DataGridColumn dataField="A"/>
            <mx:DataGridColumn dataField="B"/>
            <mx:DataGridColumn dataField="C"/>
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

这是支持代码：

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;

【参考方案1】：

到目前为止，我发现的最佳答案是在用户单击时捕获 headerRelease 事件：

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

然后事件处理程序可以对数据应用排序顺序：

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

但是这种方法有一个众所周知的问题，那就是列标题不再显示小箭头来显示排序方向。这是调用的副作用 evt.preventDefault() 但是您必须进行该调用，否则将不会应用您的自定义排序。