如何根据多列对flex数据网格进行排序?
时间:2020-03-05 18:59:33 来源:igfitidea点击:
我有一个数据网格,如下所示填充。当用户单击列标题时,我想按字典顺序对行进行排序,其中首先使用选定的列,然后按从左到右的顺序使用其余的列来打破任何联系。我该如何编码?
(我有一个答案,我将在下面发布,但有一个问题-如果有人可以提供更好的答案,我会很高兴!)
这是布局:
<?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()
但是我们必须拨打该电话,否则自定义排序将不会应用。