Flex4之DataGrid四个的示例.docx
- 文档编号:10081430
- 上传时间:2023-05-23
- 格式:DOCX
- 页数:59
- 大小:59.91KB
Flex4之DataGrid四个的示例.docx
《Flex4之DataGrid四个的示例.docx》由会员分享,可在线阅读,更多相关《Flex4之DataGrid四个的示例.docx(59页珍藏版)》请在冰点文库上搜索。
Flex4之DataGrid四个的示例
Flex4之DataGrid四个的示例【客户端和服务器端】
博客分类:
∙Flex4专栏
jsonFlexAdobeActionScriptServlet
由于我的DataGrid与JAVA后台交互需要返回JSON格式的字符串,所以需要在客户端来解析JSON串,用到JSON相关类,所以Flex4还缺少一个文件corelib.swc
将corelib.swc拷贝到Flex安装目录的sdks\4.0.0\frameworks\libs下
这个文件导入后重启MyEclipse就可以使用JSON类了
1,客户端、服务端
(1)客户端分页:
将数据一次性取到客户端,客户要看哪一页的数据,显示哪一页的数据。
(2)服务端分页:
客户要看哪一页的数据,向服务端请求哪一页的数据,客户端将请求到的数据显示给用户(可以在客户端、服务端分别做缓存,加快数据的读取),由于flex本身不具有数据库访问能力,可以考虑通过WebServices向服务器传递数据,数据的表示形式可以是XML、JSON(本文采用XML的形式)
2,分页表示层的设计
(1)页码条中4个按钮;这四个按钮分别为转到第一页,前一页,后一页,最后一页;当这四个按钮中的任意一点被点击时,页码要重绘,当前页码变化;且还要考虑当页码中有第一页时,前两个按钮要隐藏起来;当页码中有最后一页时,后两个按钮要隐藏起来。
(2)页码条中页码;当点击页码条中的页码时,DataGrid中更新显示数据即可,当前页码变化。
(3)显示总页数,总记录数;
(4)每页记录数,让用户通过下拉框选择;当用户选择新的每页显示记录数时,页码要重绘,总页数发生变化,当前页码变化。
(5)页码输入框,让用户输入任意页码(要检查输入数据是否合法),DataGrid显示页码中的数据,页码要重绘,总页数变化。
(6)查看所有;分页中的特殊情况,将每页记数置为记录总数即可达到要求!
页码要重绘,总页数发生变化,当前页码变化
代码说明
(1)分页功能条,做一个自定义组件
(2)页码条绘制方法,传参数为页码中的第一个页码
3.分页触发的方法,组件中有一个属性为pagingFunction,为向服务端请求数据的函数;当该函数为空时,调用客户端分页;反之调用该方法进行服务端分页。
首先说明下:
以下的四个例子中每一个都含有客户端获取DataGrid数据的代码
下面的每个mxml中都涉及用到的组件mxml,位于com/control目录下
Xml代码
1. medium"> xml version="1.0" encoding="utf-8"? > 2. HBox xmlns: mx=" backgroundColor="white"> 3. Script> 4. [CDATA[ 5. import mx.collections.ArrayCollection; 6. import mx.events.ItemClickEvent; 7. import flash.events.KeyboardEvent; 8. import mx.controls.DataGrid; 9. import mx.validators.NumberValidator; 10. 11. [Bindable] 12. [Embed(source='assets/first.jpg')] 13. private var firstIcon: Class; 14. private var firstPage: uint; 15. 16. [Bindable] 17. [Embed(source='assets/pre.jpg')] 18. private var preIcon: Class; 19. private var prePage: uint; 20. 21. [Bindable] 22. [Embed(source='assets/next.jpg')] 23. private var nextIcon: Class; 24. private var nextPage: uint; 25. 26. [Bindable] 27. [Embed(source='assets/last.jpg')] 28. private var lastIcon: Class; 29. private var lastPage: uint; 30. 31. //页码条数据,绑定 32. [Bindable] 33. private var nav: ArrayCollection = new ArrayCollection(); 34. 35. //默认起始页码,第1页 36. private var currentPageIndex: uint = 0; 37. 38. //是否已初始化 39. private var isInit: Boolean=true; 40. 41. //总页数 42. private var totalPages: uint = 0; 43. 44. //是否重绘页码条,当使用服务端分页时使用 45. private var isCreateNavBar: Boolean = true; 46. 47. /************************************************************/ 48. 49. //显示到Grid的数据 50. [Bindable] 51. public var viewData: ArrayCollection=null; 52. 53. //所有的数据 54. public var orgData: ArrayCollection=null; 55. 56. //每页记录数下拉框 57. public var pageSizeDropDownListData: ArrayCollection=null; 58. 59. // 每页记录数 60. public var pageSize: uint = 5; 61. 62. // 页码条上显示页码的个数 63. public var navSize: uint = 5; 64. 65. //记录总数,调用服务端发页时使用 66. public var totalRecord: int=0; 67. 68. //分页函数 69. public var pagingFunction: Function=null; 70. 71. //分页条对应的Grid 72. public var dataGrid: DataGrid=null; 73. 74. /***************************************************************/ 75. 76. public function dataBind(isServerSide: Boolean=false): void{ 77. //是否初始化 78. if(isInit){ 79. if(pageSizeDropDownListData==null){ 80. pageSizeDropDownListData = new ArrayCollection(); 81. pageSizeDropDownListData.addItem({label: 5,data: 5}); 82. pageSizeDropDownListData.addItem({label: 10,data: 10}); 83. pageSizeDropDownListData.addItem({label: 20,data: 20}); 84. pageSizeDropDownListData.addItem({label: 30,data: 30}); 85. } 86. pageSizeComobox.dataProvider=pageSizeDropDownListData; 87. isInit=false; 88. } 89. // 90. refreshDataProvider(currentPageIndex,isCreateNavBar,pageSize,isServerSide); 91. } 92. 93. 94. 95. /** 96. * 构建页码条 97. * pages: 总页数 98. * pageIndex: 当前页(注意,从0开始) 99. * 100. */ 101. private function createNavBar(pageIndex: uint = 0): void{ 102. nav.removeAll(); 103. //向前图标操作,first,Pre 104. if( pageIndex > 1 ){ 105. firstPage=0; 106. firstNavBtn.visible=true; 107. // 108. var intLFive: int = pageIndex-navSize; // calculate start of last 5; 109. // 110. prePage=intLFive; 111. preNavBtn.visible=true; 112. } 113. else{ 114. firstNavBtn.visible=false; 115. preNavBtn.visible=false; 116. } 117. //页码条 118. for( var x: uint = 0; x < navSize; x++){ 119. var pg: uint = x + pageIndex; 120. nav.addItem({label: pg + 1,data: pg}); 121. // 122. var pgg: uint = pg+1; 123. if(pgg>=totalPages){ //搜索到最后一个页码,停止添加到navbar 124. x=navSize; 125. } 126. } 127. //计算最后一组页码条中第一个页码的页码编号 128. var lastpage: Number = 0; 129. for( var y: uint = navSize; y <= totalPages-1;y = y + navSize ){ //lets calculate the lastpage button 130. if(y+5 > navSize){ 131. lastpage = y; 132. } 133. } 134. //向后图标 135. if( pg < totalPages - 1 ){ 136. nextPage=pg + 1; 137. nextNavBtn.visible=true; 138. lastPage=lastpage; 139. lastNavBtn.visible=true; 140. } 141. else{ 142. nextNavBtn.visible=false; 143. lastNavBtn.visible=false; 144. } 145. } 146. 147. /** 148. * 页码按钮按下(页码条点击) 149. */ 150. private function navigatePage(event: ItemClickEvent): void 151. { 152. refreshDataProvider(event.item.data,false); 153. } 154. 155. /** 156. * 页码按钮按下,first,pre,next,last 157. */ 158. private function navigateButtonClick(pageString: String): void{ 159. var pageIndex: uint=0; 160. switch(pageString){ 161. case "firstPage": 162. pageIndex=firstPage; 163. break; 164. case "prePage": 165. pageIndex=prePage; 166. break; 167. case "nextPage": 168. pageIndex=nextPage; 169. break; 170. default: //lastPage 171. pageIndex=lastPage; 172. } 173. // 174. refreshDataProvider(pageIndex); 175. } 176. 177. /** 178. * 更新数据源,更新表格显示数据 179. *
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Flex4 DataGrid 四个 示例
![提示](https://static.bingdoc.com/images/bang_tan.gif)