前臺(tái)頁面：
代碼如下:
<%@ 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,//在每行的第一列添加一個(gè)復(fù)選按鈕 ,
new Ext.grid.RowNumberer({header:"自動(dòng)顯示行號(hào)",width:100}),//添加自動(dòng)顯示行號(hào)的列
{header:'員工編號(hào)',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ù)存儲(chǔ)的和數(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ī)范進(jìn)行解析 每行讀取4個(gè)數(shù)據(jù),第一個(gè)是EmployeeID 第二個(gè)是LastName ...
}) //與ColumnModel中的dataIndex想對(duì)應(yīng),這樣ColumnModel就知道那列應(yīng)該顯示那條數(shù)據(jù)了
// remoteSort:true //支持服務(wù)器端排序 設(shè)置 store.remoteSort = true ,會(huì)向后臺(tái)提交兩個(gè)參數(shù) sort ,dir,sort排序字段 dir升序或降序
}); //此時(shí)不支持前臺(tái)排序，否則只是前臺(tái)排序
store.load({params:{start:0,limit:3}}); //對(duì)數(shù)據(jù)進(jìn)行初始化 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)計(jì)算得到的頁數(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得全選功能不能實(shí)現(xiàn)
cm:cm,
store:store,
// viewConfig:{forceFit: true},設(shè)置該屬性為true則grid中的列寬設(shè)置無效,grid會(huì)根據(jù)這些數(shù)值計(jì)算出比例，對(duì)各列分配寬度
bbar:pagingBar
});
grid.addListener('sortchange', sortchangeFn); //給grid增加一個(gè)'sortchange'事件,當(dāng)發(fā)生排序改變的事件,啟動(dòng)服務(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的時(shí)候,向后臺(tái)傳遞sort ,dir dir每點(diǎn)擊一次就會(huì)自動(dòng)做相應(yīng)的改變從desc->asc,asc->desc
}
}
Ext.onReady(ready);
</script>
<div id="testGrid">
</div>
</div>
</form>
</body>
</html>
后臺(tái)代碼：
代碼如下:
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();
}
}
}
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
