|
|
数据分页功能在WEB应用非常广泛,虽然Flex基于Win的显示方式似乎没有必要,但实现应用中还是非常有用的。由于Flex的数据往往由其网络服务提供(如:WebService等),大量的数据传输和表现会影响Flex的性能;这个时候就可能通过数据分页的方法来获取当前显示数据,即能降低网络传的负担同时也能减少Flex的处理工作。
首先分页控件需要的功能有:首页,上一页,下一页,未页和页数跳转等。
控件表现如下:
控件使用用例图
定义分页控件的事件:PageChange
相关事件参数对象:
package { import flash.events.Event; import mx.events.IndexChangedEvent; public class PageChangeEvent extends flash.events.Event { public function PageChangeEvent(pageindex:int,pagesize:int) { super("PageChange"); PageIndex= pageindex; PageSize =pagesize; } public var PageIndex:int=0; public var PageSize:int=0; public function Filter(list:Array):Array { var newlist:Array = new Array(); var start:int = PageSize*PageIndex; var end:int = start+PageSize; for(var i:int = start;i<end;i++) { if(i< list.length) { newlist.push(list[i]); } else break; } return newlist; } } }
|
下面是具体分页控件的代码:
<?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="" width="466" height="40"> <mx:Metadata>
[Event(name="PageChange", type="PageChangeEvent",bubbles="true",cancelable="true")]
</mx:Metadata>
<mx:Button click="method_le()" id="c_le" enabled="false" x="10" y="10" fontFamily="Georgia" width="44" height="24" minWidth="24" minHeight="24" label="<<">
</mx:Button> <mx:Button click="method_l()" id="c_l" enabled="false" x="62" y="10" fontFamily="Georgia" width="44" height="24" minWidth="24" minHeight="24" label="<"> </mx:Button> <mx:ComboBox rowCount="10" change="method_select()" id="c_select" enabled="false" x="114" y="10" width="54"></mx:ComboBox> <mx:Button click="method_r()" id="c_r" enabled="false" x="176" y="10" fontFamily="Georgia" width="44" height="24" minWidth="24" minHeight="24" label=">"> </mx:Button> <mx:Button click="method_re()" label=">>" id="c_re" enabled="false" x="228" y="10" fontFamily="Georgia" width="44" height="24" minWidth="24" minHeight="24">
</mx:Button> <mx:Script> <![CDATA[ import mx.controls.Alert; private var mRecordCount:int=0; private var mPageSize:int =8;//指定每页显示条数 private var mPageIndex:int =0; private var mPageCount:int = 0; public function method_l():void { mPageIndex=mPageIndex-1; SetState(); OnPageChange(); } public function method_le():void { mPageIndex =0; SetState(); OnPageChange(); } public function method_r():void { mPageIndex=mPageIndex+1; SetState(); OnPageChange(); } public function method_re():void { mPageIndex=mPageCount-1; SetState(); OnPageChange(); } public function method_select():void { mPageIndex = c_select.selectedItem.data; SetState(); OnPageChange(); } public function get PageIndex():int { return mPageIndex; } //设置记录总数 public function set RecordCount(count:int):void { mRecordCount= count; if(count >0) { SetState(); } } private function SetState():void { if(mRecordCount%mPageSize > 0) { mPageCount = mRecordCount/mPageSize+1; } else { mPageCount = mRecordCount/mPageSize; } var pages:Array = new Array(); for(var i:int =1;i<=mPageCount;i++) { pages.push( {label:i.toString(), data:i-1}); } c_select.dataProvider= pages; c_select.selectedIndex= mPageIndex; if(mPageCount>1) { c_select.enabled=true; c_l.enabled=true; c_le.enabled=true; c_r.enabled=true; c_re.enabled=true; if(mPageIndex==0) { c_l.enabled=false; c_le.enabled=false; } if(mPageIndex == mPageCount-1) { c_r.enabled=false; c_re.enabled=false; } } else { c_select.enabled=false; c_l.enabled=false; c_le.enabled=false; c_r.enabled=false; c_re.enabled=false; } pageinfo.text="Records:" + mRecordCount+"/" + mPageCount+"pages"; } //获取记录总数 public function get RecordCount():int { return mRecordCount; } //打开分页控件 public function Open():void{ mPageIndex =0; OnPageChange(); } //刷新当前页面 public function Refresh():void { OnPageChange(); } private function OnPageChange():void { var e:PageChangeEvent = new PageChangeEvent(mPageIndex,mPageSize); dispatchEvent(e); } ]]> </mx:Script> <mx:Label x="281" y="10" width="175" fontSize="12" id="pageinfo"/> </mx:Canvas>
|
用例页面代码:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application initialize="oninit()" xmlns:mx="" layout="vertical" xmlns:ns2="*">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import flash.events.Event;
private var datas:Array = new Array();
public function oninit():void
{
for(var i:int=0;i<40;i++)
{
datas.push({UserName:"Henry"+i,Notes:"GuangZhou" +i})
}
pagebar1.RecordCount =datas.length;
pagebar1.Open();
}
public function pagechange(e:PageChangeEvent):void
{
datalist.dataProvider = e.Filter(datas)
}
]]>
</mx:Script>
<mx:DataGrid width="100%" id="datalist" verticalScrollPolicy="on">
<mx:columns>
<mx:DataGridColumn headerText="UserName" dataField="UserName"/>
<mx:DataGridColumn headerText="Notes" dataField="Notes"/>
</mx:columns>
</mx:DataGrid>
<ns2:PageBar id="pagebar1" PageChange="pagechange(event)">
</ns2:PageBar>
</mx:Application>
| | |
阅读(458) | 评论(1) | 转发(0) |