flex自定义分页控件

    技术2022-05-11  21

     下午写做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})"/>,不知道为什么?去网上也没有相关的答案.


    最新回复(0)