Flex中表格数据排序，支持全部类型

1. <?xml version="1.0" encoding="utf-8"?>  
2. <!-- http://blog.flexexamples.com/2007/08/23/determining-a-datagridcolumn-objects-current-sort-order/ -->  
3. <mx:Application name="DataGridColumn_sortDescending_test"  
4.         xmlns:mx="http://www.adobe.com/2006/mxml"  
5.         layout="vertical"  
6.         verticalAlign="middle"  
7.         backgroundColor="white">  
8.     <mx:Script  source="org/util/SortUtil.as"/>  
9.     <mx:Script>  
10.         <![CDATA[  
11.             import mx.controls.DateField;  
12.             import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;  
13.             import mx.events.AdvancedDataGridEvent;  
14.             import mx.utils.ObjectUtil;  
15.             import mx.collections.ArrayCollection;  
16.             import mx.controls.dataGridClasses.DataGridColumn;  
17.             import mx.events.DataGridEvent;  
18.               
19.               
20.           
21.             [Bindable]  
22.             public var ac:ArrayCollection=new ArrayCollection([  
23.             {data:"-1112",label:"ad",date:"2009/11/10"},  
24.             {data:"112",label:"a",date:"2009/11/11"},  
25.             {data:"1",label:"12b",date:"2009/11/01"},  
26.             {data:"2",label:"Ass",date:"2009/11/20"},  
27.             {data:"0",label:"ass",date:"2009/11/14"},  
28.             {data:"3",label:"csx",date:"2010/11/12"},  
29.             {data:"1232",label:"cdf",date:"2009/11/13"},  
30.             {data:"4",label:"xzm",date:"2001/12/10"},  
31.             {data:"345",label:"awq",date:"2009/01/10"}  
32.             ]);  
33.             
34.               
35.         ]]>  
36.     </mx:Script>  
37.     <mx:DataGrid id="dataGrid"  
38.             rowCount="10" dataProvider="{ac}"  
39.             headerRelease="dataGridSort(event)" width="600">  
40.         <mx:columns>  
41.             <mx:DataGridColumn  dataField="label" headerText="字符串" />  
42.             <mx:DataGridColumn  dataField="data"  headerText="数字"/>  
43.             <mx:DataGridColumn  dataField="date"  headerText="日期"/>  
44.         </mx:columns>  
45.     </mx:DataGrid>  
46.     <mx:AdvancedDataGrid  dataProvider="{ac}" headerRelease="advancedDataGridSort(event)" width="600" rowCount="10">  
47.         <mx:columns>  
48.             <mx:AdvancedDataGridColumn dataField="label"  headerText="字符串" />  
49.             <mx:AdvancedDataGridColumn dataField="data" headerText="数字" />  
50.             <mx:AdvancedDataGridColumn dataField="date" headerText="日期" />  
51.         </mx:columns>  
52.     </mx:AdvancedDataGrid>  
53. </mx:Application>  

 flex默认的排序只支持string和numer两种排序，从数据库中读出数据到flex前段，很多时候本来是Number类型转化为了Strng类型（java中的Bigdecimal ，因为As3中没有这么大的数据类型），因此排序就乱了。重写排序方法！

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

1. // ActionScript file 韩敬诺 dataGrid排序   备注：flex的灵魂是事件  
2. import mx.controls.DateField;  
3. import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;  
4. import mx.controls.dataGridClasses.DataGridColumn;  
5. import mx.events.AdvancedDataGridEvent;  
6. import mx.events.DataGridEvent;  
7. import mx.utils.ObjectUtil;  
8. /** 
9.  * 点击dataGrid列头上的排序按钮 
10.  */  
11. public function dataGridSort(evt:DataGridEvent):void {  
12.     //1 得到要排序的列  
13.     var column:DataGridColumn = DataGridColumn(evt.currentTarget.columns[evt.columnIndex]);  
14.     //2 得到列名  
15.     var columnName:String=column.dataField;  
16.     //3 重写此列的排序函数  
17.     column.sortCompareFunction=function(obj1:Object,obj2:Object):int{  
18.         return superSort(obj1,obj2,columnName);  
19.     };  
20. }  
21. /** 
22.  * 点击AdvancedDataGrid列头上的排序按钮 
23.  */  
24. private function advancedDataGridSort(evt:AdvancedDataGridEvent):void {  
25.     var column:AdvancedDataGridColumn = AdvancedDataGridColumn(evt.currentTarget.columns[evt.columnIndex]);  
26.     var columnName:String=column.dataField;  
27.     column.sortCompareFunction=function(obj1:Object,obj2:Object):int{  
28.         return superSort(obj1,obj2,columnName);  
29.     };  
30. }  
31. /** 
32.  * 根据不同的数据类型选择不同的排序方式 优先级是数字、日期、字符串 
33.  */  
34. public function superSort(obj1:Object,obj2:Object,columnName:String):int{  
35.     //验证数据类型 Numbe Date String  
36.     if(!isNaN(obj1[columnName])){  
37.         return number_sortCompareFunc(obj1,obj2,columnName);  
38.     }  
39.     if(strIsDate(obj1[columnName])){  
40.         var inputFormat:String=getInputFormat(obj1[columnName]);  
41.         return date_sortCompareFunc(obj1,obj2,columnName,inputFormat);  
42.     }  
43.      return string_sortCompareFunc(obj1,obj2,columnName);  
44. }  
45. /** 
46.  * 日期的排序 
47.  */  
48. private function date_sortCompareFunc(obj1:Object, obj2:Object,columnName:String,inputFormat:String):int {  
49.     var date1:Date =DateField.stringToDate(obj1[columnName],inputFormat);  
50.     var date2:Date =DateField.stringToDate(obj2[columnName],inputFormat);  
51.     return ObjectUtil.dateCompare(date1, date2);  
52. }  
53. /** 
54.  * 字符串的排序 
55.  */  
56. private function string_sortCompareFunc(obj1:Object, obj2:Object,columnName:String):int{  
57.     var str1:String=obj1[columnName];  
58.     var str2:String=obj2[columnName];  
59.     return ObjectUtil.stringCompare(str1, str2,false);  
60. }  
61. /** 
62.  * 数字的排序 
63.  */  
64. private function number_sortCompareFunc(obj1:Object, obj2:Object,columnName:String):int{  
65.     var num1:Number=Number(obj1[columnName]);  
66.     var num2:Number=Number(obj2[columnName]);  
67.     return ObjectUtil.numericCompare(num1,num2);  
68. }  
69. /** 
70.  * 验证一个字符串是否是日期格式 
71.  */  
72. private function strIsDate(str:String):Boolean{  
73.     var inputFormat:String=getInputFormat(str);  
74.     //如果找不到日期表示符号则直接返回false  
75.     if(inputFormat==null){  
76.         return false;  
77.     }  
78.     var date:Date=DateField.stringToDate(str,inputFormat);  
79.     //如果是日期date不为null  
80.     if(date!=null){  
81.         return true;  
82.     }else{  
83.         return false;  
84.     }  
85. }  
86. /** 
87.  * 得到日期的格式  判断的顺序为 2009-11-12 2009/11/12 2009.11.12 
88.  */  
89. private function getInputFormat(str:String):String{  
90.     if(str.indexOf("-")!=-1){  
91.         return "YYYY-MM-DD";  
92.     }  
93.     if(str.indexOf("/")!=-1){  
94.         return "YYYY/MM/DD";  
95.     }  
96.     if(str.indexOf(".")!=-1){  
97.         return "YYYY.MM.DD";  
98.     }  
99.     return null;  
100. }  

 注意：Flex在干一件事情之前会触发一个事件，headerRelease是关键。

 另外，也可以用DatagridColumn的sortCompareFunction进行自定义排序，

	mySortCompareFunction(obj1:Object, obj2:Object):int 

  很多时候，我们需要判断根据obj中的那个属性进行排序比较，而不是对每个表格列进行排序。

  一个比较巧妙的方法是可以利用Function。

1. /** 
2.              * Numerically sorts a column in the DataGrid. 
3.              * 
4.              * @param   fieldName   The string name for the dataField in the column that you want to sort. 
5.              */  
6.             private function numericSortByField(fieldName:String):Function  
7.             {  
8.                 return function(obj1:Object, obj2:Object):int  
9.                 {  
10.                     var value1:Number = (obj1[fieldName] == '' || obj1[fieldName] == null) ? null : new Number(obj1[fieldName]);  
11.                     var value2:Number = (obj2[fieldName] == '' || obj2[fieldName] == null) ? null : new Number(obj2[fieldName]);  
12.                     return ObjectUtil.numericCompare(value1, value2);  
13.                 }  
14.             }  

   使用很简单，如果列的数据类型是数字，可以指定列的sortCompareFunction

1. if(dataType=="NUMBER"){  
2.     //如果是数字则需要按照数字进行排序  
3.     dataGridColumn.sortCompareFunction=numericSortByField(dataField);  
4. }