fhuan123 发表于 2013-1-27 04:51:03

flex分页控件的使用

分页显示数据是网站浏览中必备的元素之一,在FLEX中通过数据分页的方法来获取当前显示数据,即能降低网络传的负担同时也能减少Flex的处理工作。
分页控件需要的功能有:首页,上一页,下一页,未页和页数跳转等。
http://sz.photo.store.qq.com/rurl2=88917bc76e79eaf6b597d644e7c11011d117522125322699e7b4dd2f7622c712f6c075fa047a7ba3b9ee99935355b4ef4d749c40f4f2dccc5d84a42be87b0f0439d4791703bd22af5ed2e2693b2a9c8bf6ba76b3

http://sz.photo.store.qq.com/rurl2=c1d51b934ca020f6f1dbf92c8e78f93d7c38e56269390beeb982b1d7cc654912d9493e152f74922b4c009c3eace05432a6404f866d78bfd828a6ad53f60ce03f106f22896a02c9afbfc4d4746e2b23828f8650bf

定义分页控件的事件: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); } else break; } return newlist; } } }
分页控件的代码:
<?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="466" height="40"> <mx:Metadata> </mx:Metadata> <mx:Button click="method_le()" id="c_le" enabled="false" x="10" y="10" fontFamily="" width="24" height="24" minWidth="24" minHeight="24"> <mx:icon>@Embed('LE.gif')</mx:icon> </mx:Button> <mx:Button click="method_l()" id="c_l" enabled="false" x="42" y="10" fontFamily="" width="24" height="24" minWidth="24" minHeight="24"> <mx:icon>@Embed('L.gif')</mx:icon> </mx:Button> <mx:ComboBox rowCount="10" change="method_select()" id="c_select" enabled="false" x="74" y="10" width="54"></mx:ComboBox> <mx:Button click="method_r()" id="c_r" enabled="false" x="136" y="10" fontFamily="" width="24" height="24" minWidth="24" minHeight="24"> <mx:icon>@Embed('R.gif')</mx:icon> </mx:Button> <mx:Button click="method_re()" id="c_re" enabled="false" x="168" y="10" fontFamily="" width="24" height="24" minWidth="24" minHeight="24"> <mx:icon>@Embed('RE.gif')</mx:icon> </mx:Button> <mx:Script> <!]> </mx:Script> <mx:Label x="200" y="10" width="175" fontSize="12" id="pageinfo"/> </mx:Canvas> 用例页面代码: <?xml version="1.0" encoding="utf-8"?> <mx:Application initialize="oninit()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:ns1="Units.*" xmlns:ns2="*"> <mx:Script> <!]> </mx:Script> <mx:DataGrid width="100%" id="datalist"> <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>
页: [1]
查看完整版本: flex分页控件的使用