Posted on 2007-06-26 10:15
路易 閱讀(2205)
評論(5) 編輯 收藏
好久沒來了,作孽!
進正題.
做項目的時候需要個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 <
/**//*
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>
35
編譯運行吧.
效果:
http://m.tkk7.com/images/blogjava_net/louieling/CustoumGrid.swf