以下是我开发的Flex列表,该列表的分页参照了Kelvin的教程。以下是该列表的样式:
从这个列表的开发过程中感觉到了 Flex Component 的强大与方便!比如在这个列表中,分页列表作成了 Flex Component 组件,并自定义了双击事件(也可以增加自定义属性),可以被应用到不同的列表中,达到了组件共用的目的。以下是该分页条的代码:
<?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" xmlns:local="*"> <!-- 这里定义的是列表上的双击事件 --> <mx:Metadata> [Event(name="dataGridDoubleClick", type="flash.events.Event")] </mx:Metadata> <mx:Script> <![CDATA[ /*<SPAN class=hilite2>分页</SPAN>DataGrid by Kelvin 2008-02-24 MSN:xiaobolove@hotmail.com Email:xiaobolove334421@163.com 因为是一次取出全部数据,所以适合数据量不会太大的情况。 加了一个pageSize,用来控制每页显示的行数,可以在调用这个组件的时候为pageSize属性赋值, 默认为每页显示10行数据,不需要为DataGrid指定高度。 参考 古刹飞鹰@E鹰创作室 的文章 */ import mx.collections.ArrayCollection; [Bindable]public var pageSize:int=10;//每页显示行数 [Bindable]private var totalPage:int=0;//总页数 [Bindable]private var currentPage:int=0;//当前页 [Bindable] public var acAllData:ArrayCollection;//所有数据 [Bindable] private var acPageData:ArrayCollection=new ArrayCollection();//当前页数据 [Bindable] public var arrColumns:Array;//DataGrid列,在调用时需要为这个数组设置数据 //初始化 public function init(value:ArrayCollection):void { acAllData=value; if(acAllData.length!=0 && acAllData!=null) { totalPage=Math.ceil(acAllData.length/pageSize); loadData(0); }else{ currentPage=0; totalPage=0; } } //加载数据 private function loadData(pageNum:int):void { if(pageNum>=0 && pageNum<totalPage) { acPageData.removeAll(); currentPage=pageNum;//重新为当前页的变量赋值 var startIndex:int=pageNum*pageSize;//计算起始索引 for(var i:int=0;i<pageSize && startIndex<acAllData.length;i++) { acPageData.addItem(acAllData[startIndex]); startIndex++; } } } //双击事件 private function dbClickEvent():void{ dispatchEvent(new Event("dataGridDoubleClick")); } ]]> </mx:Script> <mx:VBox x="0" y="0" width="100%" height="100%" verticalGap="0" horizontalAlign="center" backgroundColor="white"> <mx:DataGrid id="dataGrid" width="98%" doubleClick="dbClickEvent()" doubleClickEnabled="true" dataProvider="{acPageData}" columns="{arrColumns}" rowCount="{pageSize}"/> <mx:HBox cornerRadius="0" borderStyle="solid" horizontalAlign="left" verticalAlign="middle" width="98%"> <mx:Text text="{' 第'+(totalPage>0?(currentPage+1):0)+'页/共'+totalPage+'页'+' 共'+(acAllData!=null?acAllData.length:0)+'条记录'}" fontSize="12"/> <mx:LinkButton id="lbtnFirst" label="首页" click="loadData(0)" enabled="{lbtnPrevious.enabled}" fontSize="12"/> <mx:LinkButton id="lbtnPrevious" label="上一页" click="loadData(currentPage-1)" enabled="{currentPage!=0?true:false}" fontSize="12"/> <mx:LinkButton id="lbtnNext" label="下一页" click="loadData(currentPage+1)" enabled="{totalPage>(currentPage+1)?true:false}" fontSize="12"/> <mx:LinkButton id="lbtnLast" label="尾页" click="loadData(totalPage-1)" enabled="{lbtnNext.enabled}" fontSize="12"/> <mx:NumericStepper id="nsPageNum" stepSize="1" minimum="1" maximum="{totalPage}" enabled="{lbtnJump.enabled}" cornerRadius="0"/> <mx:LinkButton id="lbtnJump" label="跳转" click="loadData(nsPageNum.value-1)" enabled="{totalPage>1?true:false}" fontSize="12"/> </mx:HBox> </mx:VBox> </mx:Canvas>