[转]Flex DataGrid 排序

?<?xml version="1.0" encoding="utf-8"?> ??

<!--?http://blog.flexexamples.com/2007/08/23/determining-a-datagridcolumn-objects-current-sort-order/?-->???
<mx:Application name="DataGridColumn_sortDescending_test"??
??????? xmlns:mx="http://www.adobe.com/2006/mxml"??
??????? layout="vertical"??
??????? verticalAlign="middle"??
??????? backgroundColor="white">???
??? <mx:Script? source="org/util/SortUtil.as"/>???
??? <mx:Script>???
??????? <![CDATA[???
??????????? import mx.controls.DateField;???
??????????? import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;???
??????????? import mx.events.AdvancedDataGridEvent;???
??????????? import mx.utils.ObjectUtil;???
??????????? import mx.collections.ArrayCollection;???
??????????? import mx.controls.dataGridClasses.DataGridColumn;???
??????????? import mx.events.DataGridEvent;???
???????????????
???????????????
???????????
??????????? [Bindable]???
??????????? public var ac:ArrayCollection=new ArrayCollection([???
??????????? {data:"-1112",label:"ad",date:"2009/11/10"},???
??????????? {data:"112",label:"a",date:"2009/11/11"},???
??????????? {data:"1",label:"12b",date:"2009/11/01"},???
??????????? {data:"2",label:"Ass",date:"2009/11/20"},???
??????????? {data:"0",label:"ass",date:"2009/11/14"},???
??????????? {data:"3",label:"csx",date:"2010/11/12"},???
??????????? {data:"1232",label:"cdf",date:"2009/11/13"},???
??????????? {data:"4",label:"xzm",date:"2001/12/10"},???
??????????? {data:"345",label:"awq",date:"2009/01/10"}???
??????????? ]);???
?????????????
???????????????
??????? ]]>???
??? </mx:Script>???
??? <mx:DataGrid id="dataGrid"??
??????????? rowCount="10" dataProvider="{ac}"??
??????????? headerRelease="dataGridSort(event)" width="600">???
??????? <mx:columns>???
??????????? <mx:DataGridColumn? dataField="label" headerText="字符串" />???
??????????? <mx:DataGridColumn? dataField="data"? headerText="数字"/>???
??????????? <mx:DataGridColumn? dataField="date"? headerText="日期"/>???
??????? </mx:columns>???
??? </mx:DataGrid>???
??? <mx:AdvancedDataGrid? dataProvider="{ac}" headerRelease="advancedDataGridSort(event)" width="600" rowCount="10">???
??????? <mx:columns>???
??????????? <mx:AdvancedDataGridColumn dataField="label"? headerText="字符串" />???
??????????? <mx:AdvancedDataGridColumn dataField="data" headerText="数字" />???
??????????? <mx:AdvancedDataGridColumn dataField="date" headerText="日期" />???
??????? </mx:columns>???
??? </mx:AdvancedDataGrid>???
</mx:Application>??
<?xml version="1.0" encoding="utf-8"?>
<!--?http://blog.flexexamples.com/2007/08/23/determining-a-datagridcolumn-objects-current-sort-order/?-->
<mx:Application name="DataGridColumn_sortDescending_test"
??????? xmlns:mx="http://www.adobe.com/2006/mxml"
??????? layout="vertical"
??????? verticalAlign="middle"
??????? backgroundColor="white">
?<mx:Script? source="org/util/SortUtil.as"/>
??? <mx:Script>
??????? <![CDATA[
??????? ?import mx.controls.DateField;
??????? ?import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
??????? ?import mx.events.AdvancedDataGridEvent;
??????? ?import mx.utils.ObjectUtil;
??????? ?import mx.collections.ArrayCollection;
??????????? import mx.controls.dataGridClasses.DataGridColumn;
??????????? import mx.events.DataGridEvent;
????????????
???
??
???[Bindable]
???public var ac:ArrayCollection=new ArrayCollection([
???{data:"-1112",
???{data:"112",
???{data:"1",
???{data:"2",
???{data:"0",
???{data:"3",
???{data:"1232",
???{data:"4",
???{data:"345",date:"2009/01/10"}
???]);
??????????
????????????
??????? ]]>
??? </mx:Script>
??? <mx:DataGrid id="dataGrid"
??????????? rowCount="10" dataProvider="{ac}"
??????????? headerRelease="dataGridSort(event)" width="600">
??????? <mx:columns>
??????????? <mx:DataGridColumn? dataField="label" headerText="字符串" />
??????????? <mx:DataGridColumn? dataField="data"? headerText="数字"/>
??????????? <mx:DataGridColumn? dataField="date"? headerText="日期"/>
??????? </mx:columns>
??? </mx:DataGrid>
?<mx:AdvancedDataGrid? dataProvider="{ac}" headerRelease="advancedDataGridSort(event)" width="600" rowCount="10">
??<mx:columns>
???<mx:AdvancedDataGridColumn dataField="label"? headerText="字符串" />
???<mx:AdvancedDataGridColumn dataField="data" headerText="数字" />
???<mx:AdvancedDataGridColumn dataField="date" headerText="日期" />
??</mx:columns>
?</mx:AdvancedDataGrid>
</mx:Application>
?flex默认的排序只支持string和numer两种排序，从数据库中读出数据到flex前段，很多时候本来是Number类型转化为了Strng类型，因此排序就乱了。自己动手写了个方法在点击列头上的排序按钮的时候重置此列的排序函数。另外本方法还支持日期格式，当期是有局限的。

?用法：在需要排序的表格上加上headerRelease事件。

? 排序?? 备注：flex的灵魂是事件??? import mx.controls.DateField;??? import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;??? import mx.controls.dataGridClasses.DataGridColumn;??? import mx.events.AdvancedDataGridEvent;??? import mx.events.DataGridEvent;??? import mx.utils.ObjectUtil;??? **?? * 点击dataGrid列头上的排序按钮?? */?? public function dataGridSort(evt:DataGridEvent):void {??? ??? //1 得到要排序的列??? ??? var column:DataGridColumn = DataGridColumn(evt.currentTarget.columns[evt.columnIndex]);??? ??? //2 得到列名??? ??? var columnName:String=column.dataField;??? ??? //3 重写此列的排序函数??? ??? column.sortCompareFunction=function(obj1:Object,obj2:Object):int{??? ??????? return superSort(obj1,obj2,columnName);??? ??? };??? }??? /**?? * 点击AdvancedDataGrid列头上的排序按钮?? */?? private function advancedDataGridSort(evt:AdvancedDataGridEvent):void {??? ??? var column:AdvancedDataGridColumn = AdvancedDataGridColumn(evt.currentTarget.columns[evt.columnIndex]);??? ??? var columnName:String=column.dataField;??? ??? column.sortCompareFunction=function(obj1:Object,columnName);??? ??? };??? }??? /**?? * 根据不同的数据类型选择不同的排序方式 优先级是数字、日期、字符串?? */?? public function superSort(obj1:Object,obj2:Object,columnName:String):int{??? ??? //验证数据类型 Numbe Date String??? ??? if(!isNaN(obj1[columnName])){??? ??????? return number_sortCompareFunc(obj1,columnName);??? ??? }??? ??? if(strIsDate(obj1[columnName])){??? ??????? var inputFormat:String=getInputFormat(obj1[columnName]);??? ?????? return date_sortCompareFunc(obj1,columnName,inputFormat);??? ??? }??? ???? return string_sortCompareFunc(obj1,columnName);??? }??? /**?? * 日期的排序?? */?? private function date_sortCompareFunc(obj1:Object,columnName:String,inputFormat:String):int {??? ??? var date1:Date =DateField.stringToDate(obj1[columnName],inputFormat);??? ??? var date2:Date =DateField.stringToDate(obj2[columnName],inputFormat);??? ??? return ObjectUtil.dateCompare(date1,date2);??? }??? /**?? * 字符串的排序?? */?? private function string_sortCompareFunc(obj1:Object,columnName:String):int{??? ??? var str1:String=obj1[columnName];??? ??? var str2:String=obj2[columnName];??? ??? return ObjectUtil.stringCompare(str1,str2,false);??? }??? /**?? * 数字的排序?? */?? private function number_sortCompareFunc(obj1:Object,columnName:String):int{??? ??? var num1:Number=Number(obj1[columnName]);??? ??? var num2:Number=Number(obj2[columnName]);??? ??? return ObjectUtil.numericCompare(num1,num2);??? }??? /**?? * 验证一个字符串是否是日期格式?? */?? private function strIsDate(str:String):Boolean{??? ??? var inputFormat:String=getInputFormat(str);??? ??? //如果找不到日期表示符号则直接返回false??? ??? if(inputFormat==null){??? ??????? return false;??? ??? }??? ??? var date:Date=DateField.stringToDate(str,inputFormat);??? ??? //如果是日期date不为null??? ?? if(date!=null){??? ??????? return true;??? ??? }else{??? ??????? return false;??? ??? }??? }??? /**?? * 得到日期的格式? 判断的顺序为 2009-11-12 2009/11/12 2009.11.12?? */?? private function getInputFormat(str:String):String{??? ??? if(str.indexOf("-")!=-1){??? ??????? return "YYYY-MM-DD";??? ??? }??? ??? if(str.indexOf("/")!=-1){??? ??????? return "YYYY/MM/DD";??? ??? }??? ??? if(str.indexOf(".")!=-1){??? ??????? return "YYYY.MM.DD";??? ??? }??? ??? return null;??? }?