FLEX2中DataGrid控件的分页 (Flex 自定义DataGrid控件)

FLEX2中DataGrid控件的分页 (Flex 自定义DataGrid控件)

新建一个Flex Library Project项目,
新建一个MXML Component的文件,名字么就觉customdatagrid,flex的代码像java,也像javascrpt,可以自己去看看

 1 <? xml version = " 1.0 "  encoding = " utf-8 " ?>
 2 < mx:VBox xmlns:mx = " http://www.adobe.com/2006/mxml "  width = " 400 "  height = " 300 "  xmlns:mydg = " * " >
 3      < mx:Script >
 4          <! [CDATA[
 5          /**/ /*
 6            自定义datagrid控件元素
 7            总共的页数
 8            当前页面的页码
 9            所有的记录数
10            当前也的记录
11            没有翻页的记录
12            
13        */
14              import  mx.collections.ArrayCollection;
15             [Bindable]
16              private  var mypagedata:ArrayCollection  =   new  ArrayCollection(); // 当前也没种该显示的记录
17             [Bindable]
18              public  var mygridcolumns:Array;
19              public  var mydata:ArrayCollection; // 所有的数据
20              public  var pagecount: int = 10 ; // 表示每页记录的条数,默认10条,可以由用户自行定义
21              public  var curpage: int ; // 当前的页码
22              public  var totalpage: int ; // 一共的页数
23              public  var totalcount: int ; // 一共的记录条数
24             
25              public  function initdata(value:ArrayCollection): void
26              {
27                mydata = value;//将所有数据都赋值给mydata变量
28                mypagedata.removeAll();//移出当前页面中所有数据记录
29                
30                if(mydata.length>0 && null!=mydata)
31                {
32                    totalcount = mydata.length;
33                    totalpage = (totalcount + pagecount - 1) / pagecount;
34                    setPager(0);
35                    inputpage.minimum=1;
36                    inputpage.maximum=totalpage;
37                }else{
38                    totalcount = 0;
39                    totalpage = 0;
40                    curpage = 0;
41                     inputpage.minimum = 0;
42                     inputpage.maximum = 0;
43                    pagedetail.text = "第0页/共0页   共0条纪录";
44                }
45            }
46              public  function setPager(value: int ): void
47              {
48                if(value<0 || value>totalpage) return;
49                curpage = value;
50                var curNum:int = value*pagecount;//计算出要跳转到的页面种的第一条记录在所有的记录种是第几条记录
51                mypagedata.removeAll();//移出变量中的数据,以便插入新数据,页面中显示的是这个变量中的数据
52                for(var i:int=0;curNum<mydata.length&&i<pagecount;i++,curNum++)
53                //循环的次数既要小于所有的记录数,也要小于每个页面能显示的记录数;并且curNum变量中的值也要增加
54                {
55                    mypagedata.addItem(mydata.getItemAt(curNum));//依次抽取记录
56                }
57                var temp:int = curpage+1;//页码中第一张页面是0,也就是说实际显示的页码是+1后的值
58                pagedetail.text = "第"+temp+"页/共"+totalpage+"页   共条"+totalcount+"记录";
59            }
60         ]] >
61      </ mx:Script >
62     
63      < mx:DataGrid id = " cudg "  dataProvider = " {mypagedata} "   
64         columns = " {mygridcolumns} "  width = " 100% "  height = " 100% " >
65      </ mx:DataGrid >
66      < mx:HBox width = " 100% "  horizontalAlign = " left "  verticalAlign = " middle " >
67          <!--< mx:LinkButton label = " 全选 " />
68          < mx:LinkButton label = " 全不选 " />-->
69          < mx:Spacer width = " 100% "  height = " 1 " ></ mx:Spacer >
70          < mx:Label text = " 第0页/共0页 "  id = " pagedetail " />
71          < mx:LinkButton label = " 首页 "  click = " setPager(0) " />
72          < mx:LinkButton label = " 上一页 "  click = " setPager(curpage-1) " />
73          < mx:LinkButton label = " 下一页 "  click = " setPager(curpage+1) " />
74          < mx:LinkButton label = " 末页 "  click = " setPager(totalpage-1) " />
75          < mx:NumericStepper id = " inputpage "  stepSize = " 1 "  minimum = " 0 "  maximum = " 0 "  cornerRadius = " 0 " />
76          < mx:LinkButton label = " 跳转 "  click = " setPager(inputpage.value-1) " />
77      </ mx:HBox >
78 </ mx:VBox >
79

以上是自定义控件的代码,下面是使用这个控件的代码
新建一个Flex Project项目
新建一个MXML Application文件,名字就叫MyDataGrid吧
需在项目中将刚刚编写的Flex Library Project 导入到这个项目中的Library path中

 1 <? xml version = " 1.0 "  encoding = " utf-8 " ?>
 2 < mx:Application xmlns:mx = " http://www.adobe.com/2006/mxml "  layout = " absolute "  xmlns:nsl = " * "   creationComplete = " init() " >
 3      < mx:Script >
 4          <! [CDATA[
 5              import  mx.collections.ArrayCollection;
 6              public  var items:ArrayCollection;
 7              private  function init(): void
 8              {
 9                items = new  ArrayCollection();
10                for(var i:int =1;i<16;i++)
11                {
12                    var obj:Object = new Object();
13                    obj.loginaccount = "andy";
14                    obj.name = "Andy";
15                    obj.loginaccount += i;
16                    obj.name += i;
17                    items.addItem(obj);
18                }
19                
20                mydg.initdata(items);
21            }
22             
23         ]] >
24      </ mx:Script >
25          < mx:Panel id = " panel1 "  title = " MyDataGrid " >
26          < nsl:customgrid width = " 100% "  height = " 100% "  id = " mydg " >
27              < nsl:mygridcolumns >
28                  < mx:DataGridColumn headerText = " 登录名 "  dataField = " loginaccount "  width = " 200 " />
29                  < mx:DataGridColumn headerText = " 姓名 "  dataField = " name "  width = " 200 " />
30              </ nsl:mygridcolumns >
31          </ nsl:customgrid >
32      </ mx:Panel >
33     
34 </ mx:Application >