Flex4之DataGrid四个的示例.docx

资源描述

Flex4之DataGrid四个的示例.docx

《Flex4之DataGrid四个的示例.docx》由会员分享，可在线阅读，更多相关《Flex4之DataGrid四个的示例.docx（59页珍藏版）》请在冰豆网上搜索。

Flex4之DataGrid四个的示例.docx

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代码

medium">

xml version="1.0" encoding="utf-8"?

HBox xmlns:

mx=" backgroundColor="white">

Script>

[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. *

展开阅读全文