Flex组件DataGrid分页技术

最新推荐文章于 2016-11-08 14:23:20 发布

libanghua

最新推荐文章于 2016-11-08 14:23:20 发布

阅读量601

点赞数

本文链接：https://blog.csdn.net/libanghua/article/details/8209735

版权

flex 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

下载地址:http://download.csdn.net/detail/libanghua/4447295

Flex DataGrid分页的概念，这两天做了一个Flex DataGrid分页（paging）控件，虽然是用Flex做的，但只要掌握了思路，用别的编程语言也能达到同样的效果。

Flex DataGrid分页（客户端、服务端）

　这两天做了一个Flex DataGrid分页（paging）控件，支持客户端、服务端两种分页形式；这里着重分享一下思路，虽然是用flex做的，但只要掌握了思路，用别的编程语言也能达到同样的效果。

设计思路：

　　1，客户端、服务端

（1）客户端分页：将数据一次性取到客户端，客户要看哪一页的数据，显示哪一页的数据。

（2）服务端分页：客户要看哪一页的数据，向服务端请求哪一页的数据，客户端将请求到的数据显示给用户（可以在客户端、服务端分别做缓存，加快数据的读取），由于flex本身不具有数据库访问能力，可以考虑通过WebServices向服务器传递数据，数据的表示形式可以是XML、JSON（本文采用XML的形式）。

2，Flex DataGrid分页表示层的设计

（1）页码条中4个按钮；这四个按钮分别为转到第一页，前一页，后一页，最后一页；当这四个按钮中的任意一点被点击时，页码要重绘，当前页码变化；且还要考虑当页码中有第一页时，前两个按钮要隐藏起来；当页码中有最后一页时，后两个按钮要隐藏起来。

（2）页码条中页码；当点击页码条中的页码时，DataGrid中更新显示数据即可，当前页码变化。

（3）显示总页数，总记录数；

（4）每页记录数，让用户通过下拉框选择；当用户选择新的每页显示记录数时，页码要重绘，总页数发生变化，当前页码变化。

（5）页码输入框，让用户输入任意页码（要检查输入数据是否合法），DataGrid显示页码中的数据，页码要重绘，总页数变化。

（6）查看所有；分页中的特殊情况，将每页记数置为记录总数即可达到要求！页码要重绘，总页数发生变化，当前页码变化

ArrowImage.as(脚本文件)

[Bindable]
[Embed(source='images/first.jpg')]
private var firstIcon:Class;
private var firstPage:uint;

[Bindable]
[Embed(source='images/pre.jpg')]
private var preIcon:Class;
private var prePage:uint;

[Bindable]
[Embed(source='images/next.jpg')]
private var nextIcon:Class;
private var nextPage:uint;

[Bindable]
[Embed(source='images/last.jpg')]
private var lastIcon:Class;
private var lastPage:uint;

组件代码:PageBar.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="50%" height="100%" horizontalGap="2" direction="horizontal">

<fx:Declarations>


</fx:Declarations>
<fx:Script source="ArrowImage.as"/>
<fx:Script>
<![CDATA[
import flash.events.KeyboardEvent;

import mx.collections.ArrayCollection;
import mx.controls.DataGrid;
import mx.events.ItemClickEvent;
import mx.validators.NumberValidator;

//页码条数据,绑定
[Bindable]
private var nav:ArrayCollection = new ArrayCollection();

//默认起始页码,第1页
[Bindable]
public var currentPageIndex:uint = 0;

//是否已初始化
private var isInit:Boolean=true;

//总页数
private var totalPages:uint = 0;

//是否重绘页码条，当使用服务端分页时使用
private var isCreateNavBar:Boolean = true;

/************************************************************/

//显示到Grid的数据
[Bindable]
public var viewData:ArrayCollection=null;

//所有的数据
public var orgData:ArrayCollection=null;

//每页记录数下拉框
public var pageSizeDropDownListData:ArrayCollection=null;

// 每页记录数
public var pageSize:uint = 20;

// 页码条上显示页码的个数
public var navSize:uint = 5;

//记录总数，调用服务端发页时使用
public var totalRecord:int=0;

//分页函数
public var pagingFunction:Function=null;

//分页条对应的Grid
public var dataGrid:DataGrid=null;

/***************************************************************/

public function dataBind(isServerSide:Boolean=false):void{
//是否初始化
if(isInit){
if(pageSizeDropDownListData==null){
pageSizeDropDownListData = new ArrayCollection();
pageSizeDropDownListData.addItem({label:20,data:20});
pageSizeDropDownListData.addItem({label:40,data:40});
pageSizeDropDownListData.addItem({label:50,data:50});
pageSizeDropDownListData.addItem({label:70,data:70});
}
pageSizeComobox.dataProvider=pageSizeDropDownListData;
isInit=false;
}

refreshDataProvider(currentPageIndex,isCreateNavBar,pageSize,isServerSide);
}

/**
* 构建页码条
* pages:总页数
* pageIndex:当前页（注意，从0开始）
*
*/
private function createNavBar(pageIndex:uint = 0):void{
nav.removeAll();
//向前图标操作,first,Pre
if( pageIndex > 1 ){
firstPage=0;
firstNavBtn.visible=true;
//
var intLFive:int = pageIndex-navSize; // calculate start of last 5;
//
prePage=intLFive;
preNavBtn.visible=true;
}
else{
firstNavBtn.visible=false;
preNavBtn.visible=false;
}
//页码条
for( var x:uint = 0; x < navSize; x++){
var pg:uint = x + pageIndex;
nav.addItem({label: pg + 1,data: pg});
//
var pgg:uint = pg+1;
if(pgg>=totalPages){ //搜索到最后一个页码，停止添加到navbar
x=navSize;
}
}
//计算最后一组页码条中第一个页码的页码编号
var lastpage:Number = 0;
for( var y:uint = navSize; y <= totalPages-1;y = y + navSize ){ //lets calculate the lastpage button
if(y+5 > navSize){
lastpage = y;
}
}
//向后图标
if( pg < totalPages - 1 ){
nextPage=pg + 1;
nextNavBtn.visible=true;
lastPage=lastpage;
lastNavBtn.visible=true;
}
else{
nextNavBtn.visible=false;
lastNavBtn.visible=false;
}
}

/**
* 页码按钮按下(页码条点击)
*/
private function navigatePage(event:ItemClickEvent):void
{
refreshDataProvider(event.item.data,false);
}

/**
* 页码按钮按下,first,pre,next,last
*/
private function navigateButtonClick(pageString:String):void{
var pageIndex:uint=0;
switch(pageString){
case "firstPage":
pageIndex=firstPage;
break;
case "prePage":
pageIndex=prePage;
break;
case "nextPage":
pageIndex=nextPage;
break;
default: //lastPage
pageIndex=lastPage;
}
//
refreshDataProvider(pageIndex);
}

/**
* 更新数据源,更新表格显示数据
*/
private function refreshDataProvider(pageIndex:uint,isCreateNavBar:Boolean=true,pageSize:uint=0,resultReturn:Boolean=false):void{
//分页函数
if(dataGrid==null) return;
currentPageIndex=pageIndex;
if(pageSize==0){
pageSize=this.pageSize;
}else{
this.pageSize=pageSize;
if(!resultReturn) totalPages = Math.ceil(orgData.length/pageSize);
}
if(!resultReturn){
if(this.pagingFunction!=null){
pagingFunction(pageIndex,pageSize);
this.isCreateNavBar=isCreateNavBar;
}
else{
viewData = new ArrayCollection( orgData.source.slice((pageIndex * pageSize),(pageIndex * pageSize) + pageSize) );
dataGrid.dataProvider=viewData;
pageNumber.text=(pageIndex+1).toString();

totalRecordLabel.text = '总记录数：' + orgData.length.toString();
}
}
else{
dataGrid.dataProvider=orgData;
totalPages = Math.ceil(totalRecord/pageSize);
pageNumber.text=(pageIndex+1).toString();
totalRecordLabel.text = '总记录数：' + totalRecord.toString()
}
totalPagesLabel.text = '总页数：' + totalPages;
if(isCreateNavBar) createNavBar(pageIndex);
}
//
/**
* 每页记录数变更（下拉框选择）
*/
private function pageSizeSelectChange():void{
refreshDataProvider(0,true,uint(pageSizeComobox.value));
}
/**
* 页码变更（直接输入）
*/
private function pageIndexInsertChange(event:Event):void{
var keyboardEvent:KeyboardEvent=event as KeyboardEvent;
if(keyboardEvent!=null&&keyboardEvent.keyCode== Keyboard.ENTER){
var pageIndex:uint=uint(pageNumber.text)-1;
if(pageIndex>0&&pageIndex<totalPages&&pageIndex!=currentPageIndex){
refreshDataProvider(pageIndex);
}
else{
pageNumber.text = (currentPageIndex+1).toString();
}
}
}
/**
* 查看所有
*/
private function viewAll():void{
var tempTotalRecord:uint=0;
if(pagingFunction!=null) tempTotalRecord=totalRecord;
else tempTotalRecord=orgData.length;
pageSizeComobox.text=tempTotalRecord.toString();
pageSizeComobox.selectedIndex=-1;
refreshDataProvider(0,true,tempTotalRecord);
}
]]>
</fx:Script>
<mx:Box paddingTop="8" direction="horizontal">
<mx:Button id="firstNavBtn" icon="{firstIcon}" width="8" height="10" click="navigateButtonClick('firstPage');" />
<mx:Button id="preNavBtn" icon="{preIcon}" width="7" height="10" click="navigateButtonClick('prePage');"/>
</mx:Box>
<mx:LinkBar id="pageNav" itemClick="navigatePage(event)" dataProvider="{nav}"/>
<mx:Box paddingTop="8" direction="horizontal">
<mx:Button id="nextNavBtn" icon="{nextIcon}" width="7" height="10" click="navigateButtonClick('nextPage');"/>
<mx:Button id="lastNavBtn" icon="{lastIcon}" width="10" height="10" click="navigateButtonClick('lastPage');"/>
</mx:Box>
<mx:VRule height="25"/>
<mx:Label paddingTop="3" id="totalPagesLabel" text="" />
<mx:Label paddingTop="3" id="totalRecordLabel" text="" />
<mx:Label paddingTop="3" text="每页记录:"/>
<mx:ComboBox id="pageSizeComobox" cornerRadius="0" paddingLeft="0" fontWeight="normal" width="50" arrowButtonWidth="10" change="pageSizeSelectChange()"/>
<mx:Label paddingTop="3" text="页码:" />
<mx:TextInput id="pageNumber" width="40" keyDown="pageIndexInsertChange(event);"/>
<mx:LinkButton id="viewAllLinkBtn" label="查看所有" click="viewAll();" />
</mx:Box>

使用：AS代码

//查询角色回来
private function roleSucecss(event:ResultEvent):void
{
var resobj:ResultObject=event.result as ResultObject;
if (resobj.requestState)
{
var roleac:ArrayCollection=resobj.objects as ArrayCollection;
if (roleac.length <= 0)
{
Alert.show("没有数据");
return;
}
- lastDG.source=roleac.source;
- lastDG.refresh();
- lastDG.dispatchEvent(new CollectionEvent(CollectionEvent.COLLECTION_CHANGE));
- lastDG.dataBind(true); //标示服务器分页
- lastDG.invalidateDisplayList();,强制刷新数据
}

}

UI组件

<mx:DataGrid textAlign="left" width="100%" height="100% id="lastDG">
<mx:columns>
<mx:DataGridColumn headerText="用户ID" dataField="id"/>
<mx:DataGridColumn headerText="名字" dataField="name"/>
<mx:DataGridColumn headerText="账户" dataField="account"/>
<mx:DataGridColumn headerText="邮箱" dataField="email"/>
<mx:DataGridColumn headerText="电话" dataField="phone1"/>
</mx:columns>
</mx:DataGrid>
<bar:Pagingbar id="lastPage" dataGrid="{lastDG}" orgData="{dplast}" height="25"/>