加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

Flex4自定义分页组件

发布时间：2020-12-15 04:32:23 所属栏目：百科 来源：网络整理
导读：下面贴出代码 PagingBar.mxml [html] view plain copy ? xml ? version = "1.0" ? encoding = "utf-8" ? ?? mx:HBox ? xmlns:fx = "http://ns.adobe.com/mxml/2009" ??? ????????? xmlns:s = "library://ns.adobe.com/flex/spark" ??? ????????? xmlns:mx =

下面贴出代码

PagingBar.mxml

[html] view plain copy
  1. <?xml?version="1.0"?encoding="utf-8"?>??
  2. <mx:HBox?xmlns:fx="http://ns.adobe.com/mxml/2009"???
  3. ?????????xmlns:s="library://ns.adobe.com/flex/spark"???
  4. ?????????xmlns:mx="library://ns.adobe.com/flex/mx"?>??
  5. ????<fx:Script>??
  6. ????????<![CDATA[?
  7. ????????????import?mx.collections.ArrayCollection;?
  8. ????????????import?mx.events.ItemClickEvent;?
  9. ????????????import?flash.events.KeyboardEvent;?
  10. ????????????import?mx.controls.DataGrid;?
  11. ????????????import?mx.validators.NumberValidator;?
  12. ????????????import?mx.rpc.events.ResultEvent;??
  13. ????????????import?mx.rpc.events.FaultEvent;?
  14. ????????????import?mx.controls.Alert;?
  15. ????????????[Bindable]?
  16. ????????????[Embed(source='com/iman/sps/sheet/image/first.jpg')]?
  17. ????????????public?var?firstIcon:Class;????????????????
  18. ????????????public?var?firstPage:uint;??
  19. ?????????????
  20. ????????????[Bindable]?
  21. ????????????[Embed(source='com/iman/sps/sheet/image/pre.jpg')]?
  22. ????????????public?var?preIcon:Class;?
  23. ????????????public?var?prePage:uint;??
  24. ?????????????
  25. ????????????[Bindable]?
  26. ????????????[Embed(source='com/iman/sps/sheet/image/next.jpg')]?
  27. ????????????public?var?nextIcon:Class;?
  28. ????????????public?var?nextPage:uint;??
  29. ?????????????
  30. ????????????[Bindable]?
  31. ????????????[Embed(source='com/iman/sps/sheet/image/last.jpg')]?
  32. ????????????public?var?lastIcon:Class;?
  33. ????????????public?var?lastPage:uint;?
  34. ?????????????
  35. ????????????[Bindable]public?var?pageSize:int=15;//单页行数?
  36. ????????????[Bindable]public?var?totalPage:int=1;//总页数?
  37. ????????????[Bindable]public?var?currentPage:int=1;//当前页?
  38. ????????????[Bindable]public?var?totalClum:int=0;//总记录数?
  39. ?????????????
  40. ????????????//分页函数?
  41. ????????????public?var?localFunction:Function=null;?
  42. ?????????????
  43. ????????????//重新为当前页的变量赋值?
  44. ????????????public?function?loadData(pageNum:int):void{?
  45. ????????????????this.pageSize?=?setPageSize.selectedItem.data?as?Number;??
  46. ????????????????this.totalPage?=Math.ceil(this.totalClum/this.pageSize);?
  47. ????????????????if(pageNum>0?&&?pageNum<=this.totalPage){?
  48. ????????????????????this.currentPage=pageNum;?
  49. ????????????????????if(this.localFunction!=null){?
  50. ?????????????????????????
  51. ????????????????????????localFunction(pageNum);?
  52. ????????????????????}else{?
  53. ????????????????????????Alert.show("请设置回调方法！");?
  54. ????????????????????}?
  55. ????????????????}?
  56. ????????????}?
  57. ?????????????
  58. ????????????//重新设置每页显示记录数?
  59. ????????????public?function?changePagesize():void{?
  60. ????????????????//当前页首条记录的序号?
  61. ????????????????var?currentPageRows:int=((this.currentPage-1)*this.pageSize);?
  62. ????????????????//Alert.show(String(currentPageRows));?
  63. ????????????????//重新设置以后，单页显示记录数?
  64. ????????????????this.pageSize?=?setPageSize.selectedItem.data?as?Number;??
  65. ????????????????//重新设置以后，总页数?
  66. ????????????????this.totalPage?=Math.ceil(this.totalClum/this.pageSize);?
  67. ????????????????//重新调整当前页码???????????
  68. ????????????????//Alert.show(String(newPageNum));?
  69. ????????????????if(this.localFunction!=null){?
  70. ????????????????????localFunction(this.currentPage);?
  71. ????????????????}else{?
  72. ????????????????????Alert.show("请设置回调方法！");?
  73. ????????????????}?
  74. ????????????}?
  75. ????????]]>??
  76. ????</fx:Script>??
  77. ????<mx:Text?id="temp"?text=""?visible="false"?includeInLayout="false"/>??
  78. ????<mx:HBox???
  79. ????????verticalGap="0"????
  80. ????????horizontalGap="0"???
  81. ????????horizontalAlign="center"??
  82. ????????verticalAlign="middle"??
  83. ????????>???
  84. ????????<mx:Text?text="{'???共'+(totalClum)+'条记录'}"?fontSize="12"/>??????????????????
  85. ????????<mx:Label???text="每页显示："/>??
  86. ????????<mx:ComboBox?id="setPageSize"?width="52"?height="16"?change="changePagesize()">??
  87. ????????????<mx:dataProvider>??
  88. ????????????????<fx:Array>???????
  89. ????????????????????<fx:Object?label="15"?data="15"?/>???????????????????????????????????????????????????????????????????????????????????????????????????????????
  90. ????????????????????<fx:Object?label="20"?data="20"?/>??
  91. ????????????????????<fx:Object?label="30"?data="30"?/>???
  92. ????????????????????<fx:Object?label="40"?data="40"?/>???????????????????????????????????????????????????????????????????????????????????????????????????????????
  93. ????????????????????<fx:Object?label="50"?data="50"?/>??
  94. ????????????????????<fx:Object?label="60"?data="60"?/>??????
  95. ????????????????????<fx:Object?label="70"?data="70"?/>???????????????????????????????????????????????????????????????????????????????????????????????????????????
  96. ????????????????????<fx:Object?label="80"?data="80"?/>?????????????????????????????????????
  97. ????????????????</fx:Array>??
  98. ????????????</mx:dataProvider>??
  99. ????????</mx:ComboBox>??
  100. ????????<mx:Label?text="条"/>??
  101. ??????????
  102. ????????<mx:Button?id="firstNavBtn"?icon="{firstIcon}"?width="10"?height="10"?click="loadData(1)"?enabled="{lbtnPrevious.enabled}"/>??
  103. ????????<mx:LinkButton?id="lbtnFirst"?label="首页"?click="loadData(1)"?enabled="{lbtnPrevious.enabled}"?fontSize="12"/>??
  104. ??????????
  105. ????????<mx:Button?id="preNavBtn"?icon="{preIcon}"?width="7"?height="10"?click="loadData(currentPage-1)"?enabled="{currentPage!=1?true:false}"/>??
  106. ????????<mx:LinkButton?id="lbtnPrevious"?label="上一页"?click="loadData(currentPage-1)"?enabled="{currentPage!=1?true:false}"?fontSize="12"/>??
  107. ??????????
  108. ????????<mx:Text?text="{'【?'+(Math.ceil(this.totalClum/this.pageSize)>0?(currentPage):1)+'/'+(Math.ceil(this.totalClum/this.pageSize)>0?Math.ceil(this.totalClum/this.pageSize):1)+'页】??'}"?fontSize="12"/>??
  109. ??????????
  110. ????????<mx:Button?id="nextNavBtn"?icon="{nextIcon}"?width="7"?height="10"?click="loadData(currentPage+1)"?enabled="{Math.ceil(this.totalClum/this.pageSize)>(currentPage)?true:false}"/>??
  111. ????????<mx:LinkButton?id="lbtnNext"?label="下一页"?click="loadData(currentPage+1)"?enabled="{Math.ceil(this.totalClum/this.pageSize)>(currentPage)?true:false}"?fontSize="12"/>??
  112. ??????????
  113. ????????<mx:Button?id="lastNavBtn"?icon="{lastIcon}"?width="10"?height="10"?click="loadData(Math.ceil(this.totalClum/this.pageSize))"?enabled="{lbtnNext.enabled}"/>??
  114. ????????<mx:LinkButton?id="lbtnLast"?label="尾页"?click="loadData(Math.ceil(this.totalClum/this.pageSize))"?enabled="{lbtnNext.enabled}"?fontSize="12"/>??
  115. ??????????
  116. ????????<mx:Label?text="跳转到"/>??
  117. ????????<mx:NumericStepper?id="nsPageNum"?width="50"?height="22"?stepSize="1"?minimum="1"?maximum="{Math.ceil(this.totalClum/this.pageSize)}"?enabled="{lbtnJump.enabled}"?cornerRadius="0"?fontSize="12"/>??
  118. ????????<mx:Label?text="页"/>??
  119. ????????<mx:LinkButton?id="lbtnJump"?label="GO"??click="loadData(nsPageNum.value)"?enabled="{Math.ceil(this.totalClum/this.pageSize)>1?true:false}"?fontSize="12"/>????????????????
  120. ??????????
  121. ????</mx:HBox>??
  122. </mx:HBox>??


在其他组件中引用 其中common 是我自定义的标签 里面引入了这个分页组件的所在位置?例如： xmlns:common="com.iman.common.*"

?

[html] view plain copy
  1. <common:PagingBar?width="100%"?height="5%"?id="pageBar">??
  2. ????????</common:PagingBar>??

?

写完之后说说怎么用。里面每次改变分页某个属性 就会触发一个叫做localFunction的函数 这个函数是对外暴漏给引用页面来实现他的功能的

下面是一个示例代码：作用是 首先设置初始页 然后获得 每页显示的数据记录条数 然后 实现分页组件暴露出来的分页功能函数

[html] view plain copy
  1. protected?function?test_clickHandler(event:MouseEvent):void??
  2. ????????{???firstStart=0;??
  3. ????????????pagesize=pageBar.pageSize;??
  4. ????????????pageBar.localFunction=fun;??
  5. ??
  6. ??????????????????????????}??


下面我们来实现这个函数 也就是fun 这个fun获得当前页数? 因为后台调用了Oracle实现的分页查询 所以我要算出数据从第几条开始 到第几条结束 然后就是调用查询方法了

[html] view plain copy
  1. public?function?fun(pageNo:int):void??
  2. ????????{??
  3. ????????????this.firstStart=(pageNo?-?1)?*?pageBar.pageSize;??
  4. ????????????pagesize=pageBar.pageSize;??
  5. ????????????commonQuery.commonQuery(firstStart,?pagesize,?commonQueryData,accountInfo);??
  6. ????????}??

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同