下午写做DataGrid的时候突然想到做过自定义分页控件,目的是为了写自定义控件,所以分页功能不够完善!
ComPage.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="548" height="38"> <mx:Script> <!--[CDATA[ import mx.utils.StringUtil; import mx.collections.ArrayCollection; //总数据 [Bindable] private var countdatas:ArrayCollection=new ArrayCollection(); //当前页面数据 [Bindable] public var datas:ArrayCollection=new ArrayCollection(); //总记录数 [Bindable] private var counts:int; //总页数 [Bindable] private var pages:int; //页记录数 [Bindable] private var page:int=2; //当前页 [Bindable] private var currpag:int; [Bindable] public function set setData(arr:ArrayCollection):void{ countdatas=arr; counts=arr.length; pages=Math.ceil(counts/this.page); var db:Array=new Array(); for(var i:int=1;i<=pages;i++) db.push("第"+i+"页"); comb.dataProvider=db; currpag=1; addCurr(); } public function set setPag(pag:int):void{ if(page>0) this.page=page; } private function setpag(i:int):void{ if(i==-2) i=currpag-1; if(i==-3) i=currpag+1; if(i==-4) i=pages; currpag=i; if(i<=0){ currpag=1; } else if(i>pages){ currpag=pages; } addCurr(); } private function goPage():void{ var pp:String=StringUtil.trim(inputpage.text); if(pp.length==0) return; try{ var i:int=Number(pp); } catch(e:Error){ inputpage.text=""; return; } setpag(i); } private function addCurr():void{ datas.removeAll(); var start:int=0; var end:int=0; start=page*(currpag-1); end=page*currpag; if(end>countdatas.length){ end=countdatas.length; } for(var i:int=start;i<end;i++){ var item:Object=countdatas.getItemAt(i); datas.addItem(item); } } ]]--> </mx:Script> <mx:HBox x="15" y="4" width="533"> <mx:Button label="首页" fontSize="12" id="first" click="setpag(1)"/> <mx:Button label="上一页" fontSize="12" id="up" click="setpag(-2)"/> <mx:Button label="下一页" fontSize="12" id="down" click="setpag(-3)"/> <mx:Button label="尾页" id="end" fontSize="12" click="setpag(-4)"/> <mx:ComboBox id="comb" width="58" editable="false" change="setpag(comb.selectedIndex+1)"></mx:ComboBox> <mx:TextInput width="36" id="inputpage"/> <mx:Button label="GO" click="goPage()"/> <mx:Label width="82" height="21" text="当前{currpag}/{pages}" fontSize="12"/> </mx:HBox> </mx:Canvas>
调用
DataTest.mxml
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var datas:ArrayCollection=new ArrayCollection([{username:"王治郅",phone:"1658999",email:"wzz@sohu.com"}, {username:"巴特尔",phone:"1658998",email:"bater@sina.com"}, {username:"姚明",phone:"1658997",email:"ym@163.com"} ]); private function add():void{ if(ba.label=="增加") datas.addItem({username:a.text,phone:b.text,email:c.text}); else{ var item:Object=dg.selectedItem; var i:int=datas.getItemIndex(item); datas.removeItemAt(i); datas.addItemAt({username:a.text,phone:b.text,email:c.text},i); ba.label="增加"; } cc(); } private function cc():void{ a.text=""; b.text=""; c.text=""; ba.label="增加"; } private function isv():void{ pa.visible=ch.selected; } public function deletedate():void{ var item:Object=dg.selectedItem; var i:int=datas.getItemIndex(item); datas.removeItemAt(i); } public function update():void{ var item:Object=dg.selectedItem; a.text=item.username; b.text=item.phone; c.text=item.email; ba.label="修改"; } ]]> </mx:Script> <mx:ApplicationControlBar x="151" y="61" width="539" height="29"> <mx:Label text="增删改功能" width="67"/> <mx:CheckBox id="ch" label="显示" change="isv()"/> </mx:ApplicationControlBar> <mx:Panel x="151" y="98" width="608" id="pa" height="374" layout="absolute" headerHeight="6" color="#0B333C" > <mx:Label x="10" y="10" text="姓名:" fontSize="12"/> <mx:Label x="162" y="10" text="电话:" fontSize="12"/> <mx:Label x="298" y="10" text="电子邮件:" fontSize="12"/> <mx:TextInput x="46" y="10" width="108" id="a"/> <mx:TextInput x="198" y="10" width="92" id="b"/> <mx:TextInput x="362" y="10" width="138" id="c"/> <mx:Button x="61" y="40" id="ba" label="增加" fontSize="12" click="add()"/> <mx:Button x="138" y="40" label="撤销" click="cc()" fontSize="12"/> <mx:DataGrid id="dg" x="10" y="81" width="548" dataProvider="{dddd.datas}"> <mx:columns> <mx:DataGridColumn headerText="姓名" dataField="username"/> <mx:DataGridColumn headerText="电话" dataField="phone"/> <mx:DataGridColumn headerText="邮件" dataField="email"/> <mx:DataGridColumn headerText="操作" > <mx:itemRenderer> <mx:Component> <mx:HBox> <mx:Button label="修改" fontSize="12" click="outerDocument.update()"/> <mx:Button label="删除" fontSize="12" click="outerDocument.deletedate()"/> </mx:HBox> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> <ns1:ComPage id="dddd" x="20" y="298" height="39" setData="{datas}" setPag="2"> </ns1:ComPage> </mx:Panel></mx:Application>写组件的时候不能使用<mx:Button label="上一页" fontSize="12" id="up" click="setpag({currpag})"/>,不知道为什么?去网上也没有相关的答案.