Ext.grid.GridPanel + asp.net 數(shù)據(jù)分頁
今天第一次在博客園寫東西，以前都是問問題，主要是為了怕自己以后忘記可以看看，寫的不好不許罵人 呵呵
現(xiàn)在做一個項目，老板要求用Ext開發(fā)，沒辦法，邊學(xué)邊做，今天碰到分頁的問題，搞了一個上午終于搞定了，在網(wǎng)上也搜了好久都沒找到答案
后來自己逐個檢查調(diào)試，終于搞定了。
客戶端顯示數(shù)據(jù)頁面，當(dāng)然也可以用靜態(tài)的html頁面
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MyQuestionList.aspx.cs" Inherits="MyQuestionList" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="ExtJS/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="ExtJS/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="ExtJS/ext-all.js" type="text/javascript"></script>
<link href="css/Styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
Ext.onReady(function() {
var ds = new Ext.data.Store({
url: "GetQuestionList.aspx",
reader: new Ext.data.JsonReader(
{ root: 'datalist', totalProperty: 'totalCount' },
[{ name: 'title', mapping: 'title' },
{ name: 'type', mapping: 'type' },
{ name: 'ct', mapping: 'ct', type: 'date', dateFormat: 'Y-n-j H:i:s' },
{ name: 'state', mapping: 'state' }
]
)
});
var pagingBar = new Ext.PagingToolbar({
pageSize: 30,
store: ds,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
});
var gv = new Ext.grid.GridPanel({
title: '問題列表',
el: 'divGvList',
height: 500,
loadMask: { msg: '正在加載數(shù)據(jù)，請稍侯……' },
autoWidth: true,
store: ds,
viewConfig:{forceFit:true},
columns: [
new Ext.grid.RowNumberer(),
{ header: '標題', dataIndex: 'title', sortable: true },
{ header: '分類', dataIndex: 'type', sortable: true },
{ header: '時間', width: 100, dataIndex: 'ct', sortable: true, renderer: Ext.util.Format.dateRenderer('Y.m.d') },
{ header: '回復(fù)狀態(tài)', width: 80, dataIndex: 'state', sortable: true }
],
bbar: pagingBar
});
gv.render();
ds.load({
params: { start: 0, limit: 30 },
callback: function(r, options, success) {
if (!success) {
alert("加載數(shù)據(jù)失敗，無對應(yīng)數(shù)據(jù)或者系統(tǒng)出現(xiàn)異常！");
}
}
});
});
</script>
</head>
<body style="padding-top:10px;">
<form id="form1" runat="server">
<div id="divGvList" style="margin:0 auto; width:99%;"></div>
</form>
</body>
</html>
這個是服務(wù)器端讀取數(shù)據(jù)的GetQuestionList.aspx頁面
private WebOrder.Server.Service sObj = WebOrder.Server.InterfaceFactory.CreatorServiceObj(); //這個是我自己寫的接口類
protected void Page_Load(object sender, EventArgs e)
{
StringBuilder jsonStr = new StringBuilder();
jsonStr.Append("{'datalist':[");
//這里補充下，有朋友問我第一次加載頁面數(shù)據(jù)顯示出來了，然后點下一頁的時候沒數(shù)據(jù)，不能翻頁
//這里的start不是頁碼，而是表示從第多少條數(shù)據(jù)開始取，limit是取多少條（也就是說如果是第二頁，每頁顯示6；start=6，limit=6；第三頁的時候start=12，limit=6）
int start = Convert.ToInt32(Request.Params["start"].Trim());
int limit = Convert.ToInt32(Request.Params["limit"].Trim());
int rowCount = 0;
WebOrder.Server.QuestionInfo[] qList = sObj.ReadQuestionList(start, limit, out rowCount); //這個是實體類數(shù)組，如果測試的話可以自己寫數(shù)據(jù)源，然后格式化成json數(shù)據(jù)類型返回就可以了
foreach (WebOrder.Server.QuestionInfo item in qList)
{
jsonStr.Append("{");
jsonStr.Append("'title':'" + item.標題 + "',");
jsonStr.Append("'type':'" + item.分類 + "',");
jsonStr.Append("'ct':'" + item.時間 + "',");
jsonStr.Append("'state':'" + (item.是否回復(fù) ? "已回復(fù)" : "") + "'");
jsonStr.Append("},");
}
jsonStr.Remove(jsonStr.Length - 1, 1);
jsonStr.Append("],'totalCount':" + rowCount.ToString() + "}");
Response.Write(jsonStr);
//這兩行代碼不寫的話客戶端接收不到數(shù)據(jù)，我弄了好久才發(fā)現(xiàn)這個問題，我在博客園其他的博文中也看到有人說就是顯示不了數(shù)據(jù)，不知道和我這個是不是一樣的問題，在網(wǎng)上看的例子都是只有Response.Write，然后自己拿來測試又顯示不了數(shù)據(jù)，
//郁悶了一上午，不過總算搞定了，希望對碰到和我一樣問題的人能節(jié)省點時間
Response.Flush();
Response.Close();
}
如對本文有疑問，請?zhí)峤坏浇涣髡搲瑥V大熱心網(wǎng)友會為你解答?。?點擊進入論壇
