分享一个flex的datagrid

 最近，用flex做了一个项目，项目里面涉及到很多表格和分页处理，以及按照某个字段全部培训功能（一般的都是当前页的排序）。具体代码如下：<?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <!--[CDATA[ import mx.collections.SortField; import mx.collections.Sort; import mx.collections.ICollectionView; import mx.collections.ArrayCollection; import mx.controls.dataGridClasses.DataGridColumn; import mx.events.DataGridEvent; import mx.controls.Alert; import mx.managers.CursorManager; [Bindable] public var gridData:ArrayCollection; [Bindable] public var page:Boolean = true; [Bindable] public var gridFieldMap:Array; [Bindable] public var pageVisible:Boolean; private var curPageNo:int = 0; [Bindable] public var perPageNum:int = 10; [Bindable] public var sortAll:Boolean = false; private var _pageNum:int = 0; private var _columns:Array = new Array(); private var __empty_data:ArrayCollection = new ArrayCollection(); public function init():void{ this.init_grid_field(); this.clear_data(); this.add_listen_event(); } public function clear_data():void{ if(this.gridData != null){ this.gridData.removeAll(); this.id_dg.dataProvider = __empty_data; //this.id_dg.dataProvider = this.gridData; } } public function load_data(data:Array):void{ if(this.gridData == null) this.gridData = new ArrayCollection(); this.gridData.source = data; this.compute_page_num(); this.init_grid_data(); } private function add_listen_event():void{ this.id_dg.addEventListener(DataGridEvent.HEADER_RELEASE, header_release_handler); } private function header_release_handler(evt:DataGridEvent):void{ if(this.sortAll == false || this.gridData.length == 0) return; var cur_column:DataGridColumn = this.id_dg.columns[evt.columnIndex]; var desc:Boolean = cur_column.sortDescending; var col_view:ICollectionView = ICollectionView(this.gridData); if(cur_column.sortable){ var col_sort:Sort = col_view.sort; var sort_field:SortField = null; if(col_sort){ var sf:Array = col_sort.fields; if(sf.length > 0){ for(var i:int ; i < sf.length; i ++){ if(sf[i].name == cur_column.dataField){ sort_field = sf[i]; desc = !sort_field.descending; break; }//if }//for }//if }//if else col_sort = new Sort(); if(!sort_field) sort_field = new SortField(cur_column.dataField); cur_column.sortDescending = desc; var desc_string:String = (desc)?"DESC":"ASC"; sort_field.name = cur_column.dataField; if(cur_column.sortCompareFunction != null) sort_field.compareFunction = cur_column.sortCompareFunction; else sort_field.compareFunction = null; sort_field.descending = desc; var data_type:String = typeof(col_view[0][cur_column.dataField]); if(data_type == "number") sort_field.numeric = true; col_sort.fields = [sort_field]; this.gridData.sort = col_sort; this.gridData.refresh(); this.set_page_no(this.curPageNo); } } internal function init_grid_field():void{ if(gridFieldMap == null || gridFieldMap.length == 0) return; if(_columns.length != 0){ while(this._columns.length != 0) this._columns.pop(); } for(var i:int = 0; i < this.gridFieldMap.length; i ++){ var item_col:DataGridColumn = new DataGridColumn(); item_col.headerText = gridFieldMap[i].headerText; item_col.dataField = gridFieldMap[i].dataField; if(gridFieldMap[i].filter != undefined && gridFieldMap[i].filter != null) item_col.labelFunction = gridFieldMap[i].filter; if(gridFieldMap[i].sortFunc != undefined && gridFieldMap[i].sortFunc != null){ item_col.sortCompareFunction = gridFieldMap[i].sortFunc; } if(gridFieldMap[i].width != undefined && gridFieldMap[i].width != null){ item_col.width = gridFieldMap[i].width; } item_col.sortable = true; _columns.push(item_col); } this.id_dg.columns = this._columns; } public function set_grid_field(field:Array):void{ this.gridFieldMap = field; } internal function init_grid_data():void{ if(this.gridData == null || this.gridData.length == 0) return; this.curPageNo = 0; this.pagebtn_display(0); this.set_cur_grid_data(); } internal function set_cur_grid_data():void{ if(this.pageVisible == false){ this.id_dg.dataProvider = this.gridData; } else{ var cur_data:Array = new Array(); var cur_num:int = this.curPageNo * this.perPageNum; for(var i:int = 0; cur_num < this.gridData.length && i < this.perPageNum; i ++,cur_num++){ cur_data.push(this.gridData.getItemAt(cur_num)); } var cur_grid_data:ArrayCollection = new ArrayCollection(); cur_grid_data.source = cur_data; this.id_dg.dataProvider = cur_grid_data; var temp:int = 0; if(this.gridData.length != 0) temp = this.curPageNo + 1; this.page_detail.text = "第" + temp + "/" + this._pageNum + "页，总共记录数：" + this.gridData.length; } } internal function set_page_no(page_no:int):void{ this.curPageNo = page_no; this.set_cur_grid_data(); } internal function compute_page_num():void{ if(gridData == null || this.gridData.length == 0) return; if(this.pageVisible == true){ var cur_data:Array = this.gridData.source; if(cur_data.length % this.perPageNum == 0) this._pageNum = cur_data.length / this.perPageNum; else this._pageNum = cur_data.length / this.perPageNum + 1; } } internal function first_page(page_no:int):void{ if(this.gridData.length == 0) return; this.pagebtn_display(0); this.set_page_no(page_no); } internal function pagebtn_display(btn_mode:int):void{ switch(btn_mode){ case 0://按了首页 this.id_first_page.enabled = false; this.id_pre_page.enabled = false; this.id_next_page.enabled = true; this.id_end_page.enabled = true; break; case 1://按了上一页 if(this.curPageNo - 1 == 0){ this.id_first_page.enabled = false; this.id_pre_page.enabled = false; } this.id_next_page.enabled = true; this.id_end_page.enabled = true; break; case 2://按了下一页 if(this.curPageNo + 1 == this._pageNum - 1){ this.id_next_page.enabled = false; this.id_end_page.enabled = false; } this.id_first_page.enabled = true; this.id_pre_page.enabled = true; break; case 3://按了末页 this.id_next_page.enabled = false; this.id_end_page.enabled = false; this.id_pre_page.enabled = true; this.id_first_page.enabled = true; break; } } internal function pre_page(page_no:int):void{ if(this.gridData.length == 0) return; this.pagebtn_display(1); this.set_page_no(page_no); } internal function next_page(page_no:int):void{ if(this.gridData.length == 0) return; this.pagebtn_display(2); this.set_page_no(page_no); } internal function end_page(page_no:int):void{ if(this.gridData.length == 0) return; this.pagebtn_display(3); this.set_page_no(page_no); } ]]--> </mx:Script> <mx:DataGrid id="id_dg" rowHeight="22" width="100%" height="100%" horizontalScrollPolicy="auto"/> <mx:HBox id="page_box" visible="{pageVisible}" includeInLayout="{pageVisible}" width="100%" horizontalAlign="left" verticalAlign="middle"> <mx:LinkButton id="id_first_page" label="首页" click="first_page(0)" visible="{pageVisible}"/> <mx:LinkButton id="id_pre_page" label="上一页" click="pre_page(curPageNo - 1)" visible="{pageVisible}"/> <mx:LinkButton id="id_next_page" label="下一页" click="next_page(curPageNo + 1)" visible="{pageVisible}"/> <mx:LinkButton id="id_end_page" label="末页" click="end_page(_pageNum - 1)" visible="{pageVisible}"/> <mx:Label text="第0/0页，总共记录数：" id="page_detail" fontSize="14"/> </mx:HBox> </mx:VBox>