flex datagrid 分页组件

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" xmlns:mydg="*">
<mx:Script>
<![CDATA[
/**//*
自定义datagrid控件元素
总共的页数
当前页面的页码
所有的记录数
当前也的记录
没有翻页的记录

*/
import mx.collections.ArrayCollection;
[Bindable]
private var mypagedata:ArrayCollection = new ArrayCollection();//当前也没种该显示的记录
[Bindable]
public var mygridcolumns:Array;
public var mydata:ArrayCollection;//所有的数据
public var pagecount:int=10;//表示每页记录的条数,默认10条,可以由用户自行定义
public var curpage:int;//当前的页码
public var totalpage:int;//一共的页数
public var totalcount:int;//一共的记录条数

public function initdata(value:ArrayCollection):void
{
mydata = value;//将所有数据都赋值给mydata变量
mypagedata.removeAll();//移出当前页面中所有数据记录

if(mydata.length>0 && null!=mydata)
{
totalcount = mydata.length;
totalpage = (totalcount + pagecount - 1) / pagecount;
setPager(0);
inputpage.minimum=1;
inputpage.maximum=totalpage;
}else{
totalcount = 0;
totalpage = 0;
curpage = 0;
inputpage.minimum = 0;
inputpage.maximum = 0;
pagedetail.text = "第0页/共0页 共0条纪录";
}
}
public function setPager(value:int):void
{
if(value<0 || value>totalpage) return;
curpage = value;
var curNum:int = value*pagecount;//计算出要跳转到的页面种的第一条记录在所有的记录种是第几条记录
mypagedata.removeAll();//移出变量中的数据,以便插入新数据,页面中显示的是这个变量中的数据
for(var i:int=0;curNum<mydata.length&&i<pagecount;i++,curNum++)
//循环的次数既要小于所有的记录数,也要小于每个页面能显示的记录数;并且curNum变量中的值也要增加
{
mypagedata.addItem(mydata.getItemAt(curNum));//依次抽取记录
}
var temp:int = curpage+1;//页码中第一张页面是0,也就是说实际显示的页码是+1后的值
pagedetail.text = "第"+temp+"页/共"+totalpage+"页 共条"+totalcount+"记录";
}
]]>
</mx:Script>

<mx:DataGrid id="cudg" dataProvider="{mypagedata}"
columns="{mygridcolumns}" width="100%" height="100%">
</mx:DataGrid>
<mx:HBox width="100%" horizontalAlign="left" verticalAlign="middle">
<!--<mx:LinkButton label="全选"/>
<mx:LinkButton label="全不选"/>-->
<mx:Spacer width="100%" height="1"></mx:Spacer>
<mx:Label text="第0页/共0页" id="pagedetail"/>
<mx:LinkButton label="首页" click="setPager(0)"/>
<mx:LinkButton label="上一页" click="setPager(curpage-1)"/>
<mx:LinkButton label="下一页" click="setPager(curpage+1)"/>
<mx:LinkButton label="末页" click="setPager(totalpage-1)"/>
<mx:NumericStepper id="inputpage" stepSize="1" minimum="0" maximum="0" cornerRadius="0"/>
<mx:LinkButton label="跳转" click="setPager(inputpage.value-1)"/>
</mx:HBox>
</mx:VBox>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:nsl="*" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
public var items:ArrayCollection;
private function init():void
{
items = new ArrayCollection();
for(var i:int =1;i<16;i++)
{
var obj:Object = new Object();
obj.loginaccount = "andy";
obj.name = "Andy";
obj.loginaccount += i;
obj.name += i;
items.addItem(obj);
}

mydg.initdata(items);
}

]]>
</mx:Script>
<mx:Panel id="panel1" title="MyDataGrid">
<nsl:CustomDataGrid width="100%" height="100%" id="mydg">
<nsl:mygridcolumns>
<mx:DataGridColumn headerText="登录名" dataField="loginaccount" width="200"/>
<mx:DataGridColumn headerText="姓名" dataField="name" width="200"/>
</nsl:mygridcolumns>
</nsl:CustomDataGrid>
</mx:Panel>

</mx:Application>
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////

DataGrid使用columns属性来标识列信息，column属性是一个mx.controls.gridclasses.DataGridColumn数组，所以要动态创建表格列，只需要创建一个DataGridColumn数组，然后将其赋值给DataGrid的columns属性就可以了。前面示例的代码，我们改进如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2005/mxml" xmlns="*"
layout="vertical" creationComplete="loadDgView()">
<mx:Script>
<![CDATA[
import mx.controls.gridclasses.DataGridColumn;

[Bindable]
public var works:Array= [
{ id: 1, name: ’feiy’, sex: ’male’},
{ id: 2, name: ’wenj’, sex: ’fmale’}];
private var worksColumns:Array= [
{ columnName: "id",headerText: "work’s id",width: 100},
{ columnName: "name",headerText: "work’s name",width: 200},
{ columnName: "sex",headerText: "work’s sex",width: 100}];
[Bindable]
public var departments:Array=[
{ id: 1, name: ’tech dept.’},
{ id: 2, name: ’service dept.’}];
private var departmentsColumns:Array= [
{ columnName: "id",headerText: "department’s id",width: 200},
{ columnName: "name",headerText: "department’s name",width:200}];
private function loadDgView(){
if(type_cb.selectedIndex==0){
var columns:Array=new Array();
for(var i:int;i<worksColumns.length;i++){
var item:Object=worksColumns[i];
var dgColumn:DataGridColumn=new DataGridColumn();
dgColumn.columnName=item.columnName;
dgColumn.headerText=item.headerText;
dgColumn.width=item.width;
columns.push(dgColumn);
}
view_dg.columns=columns;
view_dg.dataProvider=works;
}else{
var columns:Array=new Array();
for(var i:int;i<departmentsColumns.length;i++){
var item:Object=departmentsColumns[i];
var dgColumn:DataGridColumn=new DataGridColumn();
dgColumn.columnName=item.columnName;
dgColumn.headerText=item.headerText;
dgColumn.width=item.width;
columns.push(dgColumn);
}
view_dg.columns=columns;
view_dg.dataProvider=departments;
}
}
]]>
</mx:Script>
<mx:HBox>
<mx:ComboBox id="type_cb" change="loadDgView()">
<mx:dataProvider>
<mx:Array>
<mx:Object label="works"/>
<mx:Object label="departments"/>
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
</mx:HBox>
<mx:DataGrid id="view_dg" />
</mx:Application>

红色部分为增加的代码，相对之前的代码，我们增加了两个数组：worksColumns和departmentsColumns，分别存放相应数据的DataGridColumn属性，然后在loadDgView函数中，根据相应的Column数组创建相应的DataGridColumn数组，最后将其赋值给view_db.columns。