ExtJS Grid组件实现分页功能

在网上找了半天，也没有找到很好的Grid组件实现分页功能的实例。

用了半天时间搞定了，来记录下

前端使用的是ExtJS MVC模式

1. store

/// <reference path="../../../Ext/ext-all.js" />

Ext.define("AM.store.UserInfo", {
extend: 'Ext.data.Store',
model: 'AM.model.UserInfo',
pageSize: 4,  //注意：这里表示的是每页的显示条数目
proxy: {
type: 'ajax',
url: 'getPagedData.ashx', //请求后台的一般处理程序
reader: {
type: 'json',
root: 'rows',
//totalProperty: 'total', //注意：这里表示的是从后台返回的json数组中所获得的总条目数
},
writer: {
type: 'json',
},
},
//start代表的是要显示的页码上面的第一个条目在总条目中的index（也就是排第几个）
//而limit就是每页要显示的条目数量
autoLoad: { start: 0, limit: 4 },

});

store层要注意的就是注释的这几个配置项，具体内容看看API就清楚了

2. 看看API源码是怎么实现分页的

getPageData : function(){
var store = this.store,
totalCount = store.getTotalCount();

return {
total : totalCount,
currentPage : store.currentPage,
pageCount: Math.ceil(totalCount / store.pageSize),
fromRecord: ((store.currentPage - 1) * store.pageSize) + 1,
toRecord: Math.min(store.currentPage * store.pageSize, totalCount)

};
},

store中的totalProperty代表的就是total

store.pageSize就是每页条目数

这样就算出来有多少页 pageCount

之后fromRecord,toRecord是通过条目在总条目中的index来确定起始和终止范围

3. view层添加paging分页组件

dockedItems: [{
xtype: 'pagingtoolbar',
store: 'UserInfo',
dock: 'bottom',
displayInfo: true,
displayMsg: '显示{0}-{1}条，共{2}条',
emptyMsg: '没有数据'
}],

View层不涉及什么分页配置， 只是分页组件显示功能的配置

4. 后台实现（使用的是ASP.NET 一般处理程序 ashx）

Extjs向后台通过get method，传递start和limit两个参数，

后台获得这两个参数后，再根据实际情况计算出页码。比如：pageIndex = start/limit + 1 就是要显示的页码，

再根据pageIndex去数据库获取需要的数据，之后包装成json返回给store的url

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace IIPC.BookShop.Html
{
public class BaseHandler:IHttpHandler
{

public bool IsReusable
{
get { return false; }
}

public HttpRequest Request { get; set; }
public HttpResponse Response { get; set; }
public virtual void ProcessRequest(HttpContext context)
{
Request = context.Request;
Response = context.Response;
Response.ContentType = "text/html";
}
}
}

using IIPC.BookShop.BLL;
using IIPC.BookShop.Model;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;

namespace IIPC.BookShop.Html
{
/// <summary>
/// getPagedData 的摘要说明
/// </summary>
public class getPagedData : BaseHandler
{

public override void ProcessRequest(HttpContext context)
{
base.ProcessRequest(context);

int startIndex = 0;
int pageIndex = 1;
int pageSize = 4;
int pageCount;

string limit = Request.QueryString["limit"];
if (!int.TryParse(limit, out pageSize))
{
pageSize = 4;
}

string s = Request.QueryString["start"];
if (!int.TryParse(s, out startIndex))
{
startIndex = 0;
}

pageIndex = startIndex / pageSize + 1;

UserInfoService userInfoService = new UserInfoService();
List<UserInfo> list = userInfoService.GetPagedData(pageIndex, pageSize, out pageCount);

PagedData pd = new PagedData();
pd.total = userInfoService.GetList().Count;
pd.rows = list;
Response.Write(JsonConvert.SerializeObject(pd));
}

}
}

pagedData类

public class PagedData
{
public int total;
public List<UserInfo> rows;
}

最终返回json形式{"total":9,"rows":[{},{}...]}

其中total就是store层的totalProperty属性值，表示总条目数

5. DAL层实现取分页数据功能

public List<UserInfo> GetPagedData(int pageIndex, int pageSize, out int pageCount)
{
SqlParameter[] ps =
{
new SqlParameter("@pageIndex",SqlDbType.Int){Value = pageIndex},
new SqlParameter("@pageSize",SqlDbType.Int){Value = pageSize},
//输出参数
new SqlParameter("@pageCount",SqlDbType.Int){Direction = ParameterDirection.Output}
};
List<UserInfo> list = new List<UserInfo>();
DataTable dt = SqlHelper.ExecuteDataTableSP("[dbo].[usp_pagedUserInfo]", ps);
pageCount = Convert.ToInt32(ps[2].Value);
if (dt.Rows.Count > 0)
{
foreach (DataRow item in dt.Rows)
{
list.Add(RowToUserInfo(item));
}
}
return list;
}

这里pageCount并没有什么实际用途，可无视

6. 在数据库使用了存储过程进行分页数据的获取

USE [book_shop3]
GO
/****** Object: StoredProcedure [dbo].[usp_pagedUserInfo] Script Date: 2015/12/26 12:11:33 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
ALTER proc [dbo].[usp_pagedUserInfo]
@pageIndex int,
@pageSize int,
@pageCount int output
as
begin
declare @count int
select @count = count(*) from UserInfo where IsDel = 0
set @pageCount = ceiling(@count * 1.0 / @pageSize)
select
*
from
(SELECT *, row_number() OVER(ORDER BY Id DESC) AS num FROM UserInfo where IsDel = 0) AS t
where
num between (@pageIndex-1)*@pageSize+1 AND @pageIndex*@pageSize
AND
IsDel = 0
order BY
Id desc
end

7. 小结

首先要注意每个配置参数写的位置，如store层包含proxy，proxy又包含reader

其次简单读一下源码可以厘清很多概念

最后觉得分层写代码思路更清晰