<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="gridShowTest.aspx.cs" Inherits="ExtPra.gridShowTest" %> 
<!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>顯示gird</title> 
<link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css" /> 
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script> 
<script type="text/javascript" src="ExtJS/ext-all.js"></script> 
<script type="text/javascript" src="ExtJS/build/locale/ext-lang-zh_CN.js"></script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<script type="text/javascript"> 
function ready() 
{ 
Ext.BLANK_IMAGE_URL="ExtJS/docs/resources/s.gif"; //空白圖片設(shè)置為本地,否則按默認(rèn)方式從官方網(wǎng)站下載(在聯(lián)網(wǎng)環(huán)境下) 
var url="myGridJson.aspx?Param=select"; 
var sm=new Ext.grid.CheckboxSelectionModel();//復(fù)選按鈕 
var cm=new Ext.grid.ColumnModel //列模版定義(該例中定義顯示數(shù)據(jù)庫表Employees中的四列) 
([ 
sm,//在每行的第一列添加一個復(fù)選按鈕 , 
new Ext.grid.RowNumberer({header:"自動顯示行號",width:100}),//添加自動顯示行號的列 
{header:'員工編號',dataIndex:'EmployeeID',sortable:true, width:100}, 
{header:'名字',dataIndex:'LastName',sortable:true,width:100,editor:new Ext.form.TextField()}, 
{header:'姓氏',dataIndex:'FirstName',sortable:true,width:100,editor:new Ext.form.TextField()}, 
{header:'出生日期',dataIndex:'BirthDate',sortable:true,width:100,renderer:Ext.util.Format.dateRenderer('Y年m月d日')} //,renderer:Ext.util.Format.dateRenderer('Y年m月d日') 
]); 
// cm.defaultSortable=true; //設(shè)置所有列是可以排序的 
var fields= //字段 
[ 
{name:"EmployeeID",mapping: 'EmployeeID'}, 
{name:"LastName",mapping: 'LastName'}, 
{name:"FirstName",mapping:'FirstName'}, 
{name:"BirthDate",mapping:'BirthDate',type:'date'} 
]; 
//store 是Ext中數(shù)據(jù)存儲的和數(shù)據(jù)交換的緩沖區(qū) 在grid等控件中要使用store作為填充的數(shù)據(jù)源 
var store=new Ext.data.Store //JsonReader支持分頁 totalProperty獲得記錄的總數(shù) ,root是從服務(wù)器返回的json串 
({ 
proxy:new Ext.data.HttpProxy({url:url}),//proxy告訴我們從哪里獲取數(shù)據(jù) 
reader:new Ext.data.JsonReader //reader 告訴我們?nèi)绾谓馕鰯?shù)據(jù) 
({ 
totalProperty:"totalCount",root:"root",//totalCount 
fields:fields //fields 告訴我們按照定義的規(guī)范進行解析 每行讀取4個數(shù)據(jù),第一個是EmployeeID 第二個是LastName ... 
}) //與ColumnModel中的dataIndex想對應(yīng),這樣ColumnModel就知道那列應(yīng)該顯示那條數(shù)據(jù)了 
// remoteSort:true //支持服務(wù)器端排序 設(shè)置 store.remoteSort = true ,會向后臺提交兩個參數(shù) sort ,dir,sort排序字段 dir升序或降序 
}); //此時不支持前臺排序，否則只是前臺排序 
store.load({params:{start:0,limit:3}}); //對數(shù)據(jù)進行初始化 start表示起始頁 limit表示每頁大小,最好與分頁toolbar中的pageSize一致 
var pagingBar=new Ext.PagingToolbar //分頁toolbar 
({ 
displayInfo:true, 
emptyMsg:"沒有數(shù)據(jù)顯示", 
displayMsg:"顯示從{0}條數(shù)據(jù)到{1}條數(shù)據(jù),共{2}條數(shù)據(jù)", 
store:store, 
pageSize:3 //客戶端的模擬分頁 可以再分頁欄中看到根據(jù)該pageSize和總記錄數(shù)(pageCount)計算得到的頁數(shù) pageCount/pageSize 
}); 
var grid=new Ext.grid.GridPanel 
({ 
// el:"testGrid", 
id:"MenuGrid", 
title:"顯示列表", 
// autoWidth:true, 
autoHeight:true, 
width:550, 
//height:300, //千萬別忘了設(shè)置height,否則默認(rèn)的height的值是0,顯示不了讀取的數(shù)據(jù) 
renderTo:document.body, 
layout:"fit", 
frame:true, 
border:true, 
// autoScroll:true, 
sm:sm, //GridPanel中的復(fù)選按鈕,可以全選所有的行,若沒有設(shè)置該屬性,則GridPanel得全選功能不能實現(xiàn) 
cm:cm, 
store:store, 
// viewConfig:{forceFit: true},設(shè)置該屬性為true則grid中的列寬設(shè)置無效,grid會根據(jù)這些數(shù)值計算出比例，對各列分配寬度 
bbar:pagingBar 
}); 
grid.addListener('sortchange', sortchangeFn); //給grid增加一個'sortchange'事件,當(dāng)發(fā)生排序改變的事件,啟動服務(wù)器端排序(即remoteSort:true) 
//和重新加載數(shù)據(jù)( 即store.reload({params:{start:0,limit:3}}) ) 
function sortchangeFn(grid, sortinfo) 
{ 
//alert('排序'+ sortinfo.field + "方向" + sortinfo.direction); 
remoteSort:true 
store.reload({params:{start:0,limit:3}}); //每次store.reload的時候,向后臺傳遞sort ,dir dir每點擊一次就會自動做相應(yīng)的改變從desc->asc,asc->desc 
} 
} 
Ext.onReady(ready); 
</script> 
<div id="testGrid"> 
</div> 
</div> 
</form> 
</body> 
</html>

后臺代碼：

復(fù)制代碼代碼如下:

using System; 
using System.Collections; 
using System.Configuration; 
using System.Data; 
using System.Linq; 
using System.Web; 
using System.Web.Security; 
using System.Web.UI; 
using System.Web.UI.HtmlControls; 
using System.Web.UI.WebControls; 
using System.Web.UI.WebControls.WebParts; 
using System.Xml.Linq; 
using System.Data.SqlClient; 
using System.Collections.Generic; 
using Newtonsoft.Json; 
namespace ExtPra 
{ 
public partial class myGridJson : System.Web.UI.Page 
{ 
protected void Page_Load(object sender, EventArgs e) 
{ 
#region 分頁 
int pagesize = 20; 
int start = 1; 
string field, asc_desc; 
if (string.IsNullOrEmpty(Request["sort"])) 
{ 
field = "EmployeeID"; 
asc_desc = "asc"; 
} 
else 
{ 
field = Request["sort"]; 
asc_desc = Request["dir"]; 
} 
if (!string.IsNullOrEmpty(Request["limit"])) 
{ 
pagesize = int.Parse(Request["limit"]); 
start = int.Parse(Request["start"]); 
} 
start = start / pagesize; 
start += 1; 
#endregion 
string strSql = string.Format("select EmployeeID, LastName,FirstName,BirthDate from Employees where EmployeeID between ({0}-1)*{1}+1 and {0}*{1} order by {2} {3} ",start,pagesize,field,asc_desc); 
string strConnection = "Data Source=.;Initial Catalog=Northwind;User ID=sa;password=sa"; 
SqlConnection con = new SqlConnection(strConnection); 
SqlDataAdapter da = new SqlDataAdapter(strSql, con); 
DataSet ds = new DataSet(); 
da.Fill(ds, "Employees"); 
string json = ""; 
IList<Hashtable> mList = new List<Hashtable>(); 
try 
{ 
foreach (DataRow row in ds.Tables[0].Rows) 
{ 
Hashtable ht = new Hashtable(); 
foreach (DataColumn col in ds.Tables[0].Columns) 
{ 
ht.Add(col.ColumnName, row[col.ColumnName]); 
} 
mList.Add(ht); 
} 
json = JavaScriptConvert.SerializeObject(mList); 
} 
catch (Exception ee) 
{ 
string error = ee.Message; 
} 
// int count = ds.Tables[0].Rows.Count; 
int count = 9; 
json = "{totalCount:" + count + ",root:" + json + "}"; 
Response.Write(json); 
Response.End(); 
} 
} 
} 