如何根据多列对flex数据网格进行排序?
问题描述:
我有一个数据网格,填充如下所示。当用户点击一个列标题时,我想使用先选中列的字典顺序对行进行排序,然后按照从左到右的顺序使用其余列来打破任何关系。我如何编码?如何根据多列对flex数据网格进行排序?
(!我有一个答案,我将在下面的文章,但它有一个问题 - 我会很高兴,如果有人能提供一个更好的)
这里的布局:
<?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>
而这里的后盾代码:
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;
}
答
最好的答案到目前为止,我发现的是,当用户点击捕获headerRelease事件:
<mx:DataGrid id="theGrid" x="61" y="55" width="466" height="317"
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() 的副作用,但是您必须进行该调用,否则将不会应用您的自定义排序。