从http://blog.csdn.net/faith_zerg/archive/2007/12/24/1965362.aspx 这位仁兄的
文章中了解到了怎么去自定义一个
Datagrid,但是在使用的时候,发现他的这个自定义组件存在两个不尽人意的地方。第一,页面翻页假设总页数为9页的话,点击下一页,可以跳转到第10页。而且,上翻下翻按钮状态没有根据页码发生变化,比如说到第9页的时候,下翻按钮应该灰色不可点击。为了解决这个问题,我在这位仁兄的基础上稍微修改了一下,虽然代码有些恶心,但好歹解决了这两个问题。
<?xml version="1.0" encoding="utf-8"?>
<!--<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="492" height="300" xmlns:mydg="*">-->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:mydg="*" width="620" height="324">
<mx:Script>
<![CDATA[
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==(totalpage-1))
{
next.enabled=false;
}
else
{
next.enabled=true;
}
if(value==0)
{
last.enabled=false;
}
else
{
last.enabled=true;
}
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;
temp = curpage+1;//页码中第一张页面是0,也就是说实际显示的页码是+1后的值
pagedetail.text = "第"+temp+"页/共"+totalpage+"页 共条"+totalcount+"记录";
}
]]>
</mx:Script>
<mx:DataGrid id="cudg" dataProvider="{mypagedata}"
columns="{mygridcolumns}" width="619" height="290" editable="true">
</mx:DataGrid>
<mx:HBox width="619" horizontalAlign="left" verticalAlign="middle" borderColor="#F0F2D2">
<mx:Label text="第0页/共0页" id="pagedetail" width="107"/>
<!--<mx:LinkButton label="全选"/>
<mx:LinkButton label="全不选"/>-->
<mx:Spacer width="100%" height="1"></mx:Spacer>
<mx:LinkButton label="首页" click="setPager(0)"/>
<mx:LinkButton label="上一页" click="setPager(curpage-1)" id="last"/>
<mx:LinkButton label="下一页" click="setPager(curpage+1)" id="next"/>
<mx:LinkButton label="末页" click="setPager(totalpage-1)" width="47"/>
<mx:NumericStepper id="inputpage" stepSize="1" minimum="0" maximum="0" cornerRadius="0"/>
<mx:LinkButton label="跳转" click="setPager(inputpage.value-1)"/>
</mx:HBox>
</mx:VBox>