flex DataGrid按数字顺序，字母，日期顺序排序

 

 

flex默认的排序只支持string和numer两种排序，从数据库中读出数据到flex前段，很多时候本来是Number类型转化为了String类型，因此排序就乱了。写了个方法在点击列头上的排序按钮的时候重置此列的排序函数。另外本方法还支持日期格式，当期是有局限的。

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

 

<?xml version="1.0" encoding="utf-8"?> <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"?> <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> 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,obj2:Object):int{ return superSort(obj1,obj2,columnName); }; } /** * 根据不同的数据类型选择不同的排序方式 优先级是数字、日期、字符串 */ public function superSort(obj1:Object,obj2:Object,columnName:String):int{ //验证数据类型 Numbe Date String if(!isNaN(obj1[columnName])){ return number_sortCompareFunc(obj1,obj2,columnName); } if(strIsDate(obj1[columnName])){ var inputFormat:String=getInputFormat(obj1[columnName]); return date_sortCompareFunc(obj1,obj2,columnName,inputFormat); } return string_sortCompareFunc(obj1,obj2,columnName); } /** * 日期的排序 */ private function date_sortCompareFunc(obj1:Object, obj2: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, obj2: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, obj2: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; .} // ActionScript file 韩敬诺 dataGrid排序 备注：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,obj2:Object):int{ return superSort(obj1,obj2,columnName); }; } /** * 根据不同的数据类型选择不同的排序方式 优先级是数字、日期、字符串 */ public function superSort(obj1:Object,obj2:Object,columnName:String):int{ //验证数据类型 Numbe Date String if(!isNaN(obj1[columnName])){ return number_sortCompareFunc(obj1,obj2,columnName); } if(strIsDate(obj1[columnName])){ var inputFormat:String=getInputFormat(obj1[columnName]); return date_sortCompareFunc(obj1,obj2,columnName,inputFormat); } return string_sortCompareFunc(obj1,obj2,columnName); } /** * 日期的排序 */ private function date_sortCompareFunc(obj1:Object, obj2: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, obj2: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, obj2: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; } 复制代码