- Local:Kelvin_LinkButton是我重写的一个LinkButton,换成mx: LinkButton即可.
- kelvin_DataGrid.mxml代码:
- <?xml version="1.0" encoding= "utf-8" ?>
- <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width= "400" height= "300" xmlns:local= "*" >
- <mx:Script>
- <![CDATA[
- /*分页DataGrid
- by Kelvin 2008-02-24
- MSN:xiaobolove@hotmail.com
- Email:xiaobolove334421@163.com
- 因为是一次取出全部数据,所以适合数据量不会太大的情况。
- 加了一个pageSize,用来控制每页显示的行数,可以在调用这个组件的时候为pageSize属性赋值,
- 默认为每页显示10行数据,不需要为DataGrid指定高度。
- 参考 古刹飞鹰@E鹰创作室 的文章
- */
- import mx.collections.ArrayCollection;
- [Bindable]public var pageSize: int = 10 ; //每页显示行数
- [Bindable]private var totalPage: int = 0 ; //总页数
- [Bindable]private var currentPage: int = 0 ; //当前页
- [Bindable]
- public var acAllData:ArrayCollection; //所有数据
- [Bindable]
- private var acPageData:ArrayCollection= new ArrayCollection(); //当前页数据
- [Bindable]
- public var arrColumns:Array; //DataGrid列,在调用时需要为这个数组设置数据
- //初始化
- public function init(value:ArrayCollection): void
- {
- acAllData=value;
- if (acAllData.length!= 0 && acAllData!= null )
- {
- totalPage=Math.ceil(acAllData.length/pageSize);
- loadData(0 );
- }else {
- currentPage=0 ;
- totalPage=0 ;
- }
- }
- //加载数据
- private function loadData(pageNum: int ): void
- {
- if (pageNum>= 0 && pageNum<totalPage)
- {
- acPageData.removeAll();
- currentPage=pageNum;//重新为当前页的变量赋值
- var startIndex:int =pageNum*pageSize; //计算起始索引
- for (var i: int = 0 ;i<pageSize && startIndex<acAllData.length;i++)
- {
- acPageData.addItem(acAllData[startIndex]);
- startIndex++;
- }
- }
- }
- ]]>
- </mx:Script>
- <mx:VBox x="0" y= "0" width= "100%" height= "100%" verticalGap= "0" horizontalAlign= "center" backgroundColor= "white" >
- <mx:DataGrid id="customgrid" width= "100%" dataProvider= "{acPageData}" columns= "{arrColumns}" rowCount= "{pageSize}" />
- <mx:HBox cornerRadius="12" borderStyle= "solid" horizontalAlign= "center" verticalAlign= "middle" >
- <mx:Text text="{' 第'+(totalPage>0?(currentPage+1):0)+'页/共'+totalPage+'页'+' 共'+(acAllData!=null?acAllData.length:0)+'条记录'}" fontSize= "12" />
- <local:Kelvin_LinkButton id="lbtnFirst" label= "首页" click= "loadData(0)" enabled= "{lbtnPrevious.enabled}" fontSize= "12" />
- <local:Kelvin_LinkButton id="lbtnPrevious" label= "上一页" click= "loadData(currentPage-1)" enabled= "{currentPage!=0?true:false}" fontSize= "12" />
- <local:Kelvin_LinkButton id="lbtnNext" label= "下一页" click= "loadData(currentPage+1)" enabled= "{totalPage>(currentPage+1)?true:false}" fontSize= "12" />
- <local:Kelvin_LinkButton id="lbtnLast" label= "尾页" click= "loadData(totalPage-1)" enabled= "{lbtnNext.enabled}" fontSize= "12" />
- <mx:NumericStepper id="nsPageNum" stepSize= "1" minimum= "1" maximum= "{totalPage}" enabled= "{lbtnJump.enabled}" />
- <local:Kelvin_LinkButton id="lbtnJump" label= "跳转" click= "loadData(nsPageNum.value-1)" enabled= "{totalPage>1?true:false}" fontSize= "12" />
- </mx:HBox>
- </mx:VBox>
- </mx:Canvas>
- 调用Test.mxml:
- <?xml version="1.0" encoding= "utf-8" ?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout= "absolute" xmlns:local= "*"
- creationComplete="creationComplete()" >
- <mx:Script>
- <![CDATA[
- import mx.collections.ArrayCollection;
- [Bindable]
- private var ac:ArrayCollection;
- private function creationComplete(): void
- {
- loadAcData();
- }
- //如果查询出来的数据为xml格式,调用这个方法
- private function loadXmlData(xml:XML): void
- {
- ac=new ArrayCollection();
- for each(item in xml.Table) //将Table换成XML中的根元素名称
- {
- ac.addItem(item);
- }
- dg.init(ac);
- }
- //查询出来的结果为数组,直接传递给init即可
- private function loadAcData(): void
- {
- ac=new ArrayCollection();
- //测试数据
- for (var i: int = 0 ;i< 35 ;i++)
- {
- var obj:Object=new Object();
- obj.photo_id=i.toString();
- obj.photo_name="photo" +i;
- ac.addItem(obj);
- }
- dg.init(ac);
- }
- ]]>
- </mx:Script>
- <!--设置pageSize为8 ,表示每页显示 8 条记录,不设置默认显示 10 条记录-->
- <local:kelvin_DataGrid id="dg" width= "100%" height= "100%" pageSize= "8" >
- <local:arrColumns><!--为这个标签设置DataGridColumn,指示在DataGrid上显示的列-->
- <mx:DataGridColumn headerText="id" dataField= "photo_id" />
- <mx:DataGridColumn headerText="name" dataField= "photo_name" />
- </local:arrColumns>
- </local:kelvin_DataGrid>
- </mx:Application>
Flex 分页DataGrid
最新推荐文章于 2012-11-21 21:07:41 发布