ExtJs4.0 Grid分頁詳解

網上有好多關於Grid分頁的,各種語言都有,但大部分都是一樣的,都只是講了Grid分頁的語法,很少說到如何和後臺的數據庫交互,查出數據,同樣剛接觸Extjs,希望和菜鳥級別的兄弟姐妹們,共同進步。

前臺代碼:

var itemsPerPage = 2;
var store = Ext.create('Ext.data.Store', {
autoLoad: { start: 0, limit: itemsPerPage },
fields: ['AA001', 'AA002', 'AA003', 'AA004', 'AA005', 'AA006', 'AA007'],
pageSize: itemsPerPage,
proxy: {
type: 'ajax',
url: 'HandlerFun.ashx?Type=Support',
reader: {
type: 'json',
root: 'rows',
totalProperty: 'total'
}
}

});


var gridHeight = document.body.clientHeight * 19;


Ext.ClassManager.setAlias('Ext.selection.CheckboxModel', 'selection.checkboxmodel');

var grid = Ext.create('Ext.grid.Panel', {
title: '',
renderTo: "grid",
autoWidth: true,
height: gridHeight,
frame: true,
store: store,
multiSelect: false,
selModel: { selType: 'checkboxmodel' }, //在首列實現checkbox,僅此在首列
columns: [


{ header: '單據類別', width: 100, dataIndex: 'AA001', sortable: true },
{ header: '單據號碼', width: 150, dataIndex: 'AA002', sortable: true },
{ header: '單據日期', width: 80, dataIndex: 'AA003', sortable: true },
{ header: '客戶編號', width: 80, dataIndex: 'AA004', sortable: true },
{ header: '客戶分類', width: 80, dataIndex: 'AA005' },
{ header: '聯絡人', width: 80, dataIndex: 'AA006' }
{ header: '電話號碼', width: 80, dataIndex: 'AA007' }

],
bbar: [
{
xtype: 'pagingtoolbar',
store: store,
displayInfo: true
}
]
});
store.load({ params: { start: 0, limit: 2} });

後臺:

分頁原來和以前其他的分頁原理都是一樣的,就是當前是第幾頁,然後每一頁顯示多少條記錄,到數據庫中取出來,然後show出來就Ok了!

因為是.net ,在在.ashx文件中,獲取 start 和limit,有人說start是頁,limit是此頁的數目,其實

,int page代表是頁數,page=start/limit+1   //獲取第幾頁

int beginShowCount ,showCount=page*limit-limit+1;  //這是當前頁數的 起始位置

int endShowCount ,endShowCount=page*limit; //這是當前頁的  結束位置

表達可能不好,解釋一下起始位置,假如每頁顯示2條記錄,那就應該讀兩套記錄。那第一頁就是從第一條記錄到第二條記錄,起始就是第一條記錄,結束就是第二條記錄。

數據庫語句  select * from (select row_number() over (order by AA001) as ID,* from dbo.RegalAA) as b where ID between 1  and  5

把 1 換成 beginShowCount ,5換成 endShowCount就可以了,

JSON對象

private string Dtb2Json(DataTable dtb, int total)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
ArrayList dic = new ArrayList();
foreach (DataRow row in dtb.Rows)
{
Dictionary<string, object> drow = new Dictionary<string, object>();
foreach (DataColumn col in dtb.Columns)
{
drow.Add(col.ColumnName, row[col.ColumnName]);
}
dic.Add(drow);
}
string str = jss.Serialize(dic);
return "{" + "\"total\":" + total + ",\"rows\":" + str + "}";
// return str;
}

這裡的total是整個所有的記錄的總和哦!在前臺totalProerty那不能寫錯!

後臺代碼:

//當前是第幾頁
string start = context.Request["start"];
int currentpage = int.Parse(start);

//每一頁顯示的數目
string limit = context.Request["limit"];
int pagetotal = int.Parse(limit);
DataTable dt = BLL.GetDataToGridSupport(currentpage,pagetotal);//獲取喲顯示的記錄
DataTable dttotal = BLL.GetDataToGridSupport();//獲取總記錄數
int total = dttotal.Rows.Count;//獲取總記錄數 

context.Response.Write(Dtb2Json(dt, total));

posted @ 2013-04-27 17:44  赵雪丹  阅读(172)  评论(0编辑  收藏