asp.net Ext grid 显示列表

　　前台页面：

　　<%@ 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">

　　<title>显示gird</title>

　　</head>

　　<body>

　　<div>

　　function ready()

　　{

　　Ext.BLANK_IMAGE_URL="ExtJS/docs/resources/s.gif"; //空白图片设置为本地,否则按默认方式从官方网站下载(在联网环境下)

　　var url="myGridJson.aspx?Param=select";

　　var sm=new Ext.grid.CheckboxSelectionModel();//复选按钮

　　var cm=new Ext.grid.ColumnModel //列模版定义(该例中定义显示数据库表Employees中的四列)

　　([

　　sm,//在每行的第一列添加一个复选按钮 ,

　　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; //设置所有列是可以排序的

　　var fields= //字段

　　[

　　{name:"EmployeeID",mapping: 'EmployeeID'},

　　{name:"LastName",mapping: 'LastName'},

　　{name:"FirstName",mapping:'FirstName'},

　　{name:"BirthDate",mapping:'BirthDate',type:'date'}

　　];

　　//store 是Ext中数据存储的和数据交换的缓冲区在grid等控件中要使用store作为填充的数据源

　　var store=new Ext.data.Store //JsonReader支持分页 totalProperty获得记录的总数 ,root是从服务器返回的json串

　　({

　　proxy:new Ext.data.HttpProxy({url:url}),//proxy告诉我们从哪里获取数据

　　reader:new Ext.data.JsonReader //reader 告诉我们如何解析数据

　　({

　　totalProperty:"totalCount",root:"root",//totalCount

　　fields:fields //fields 告诉我们按照定义的规范进行解析每行读取4个数据,第一个是EmployeeID 第二个是LastName ...

　　}) //与ColumnModel中的dataIndex想对应,这样ColumnModel就知道那列应该显示那条数据了

　　// remoteSort:true //支持服务器端排序设置 store.remoteSort = true ,会向后台提交两个参数 sort ,dir,sort排序字段 dir升序或降序

　　}); //此时不支持前台排序，否则只是前台排序

　　store.load({params:{start:0,limit:3}}); //对数据进行初始化 start表示起始页 limit表示每页大小,最好与分页toolbar中的pageSize一致

　　var pagingBar=new Ext.PagingToolbar //分页toolbar

　　({

　　displayInfo:true,

　　emptyMsg:"没有数据显示",

　　displayMsg:"显示从{0}条数据到{1}条数据,共{2}条数据",

　　store:store,

　　pageSize:3 //客户端的模拟分页可以再分页栏中看到根据该pageSize和总记录数(pageCount)计算得到的页数 pageCount/pageSize

　　});

　　var grid=new Ext.grid.GridPanel

　　({

　　// el:"testGrid",

　　id:"MenuGrid",

　　title:"显示列表",

　　// autoWidth:true,

　　autoHeight:true,

　　width:550,

　　//height:300, //千万别忘了设置height,否则默认的height的值是0,显示不了读取的数据

　　renderTo:document.body,

　　layout:"fit",

　　frame:true,

　　border:true,

　　// autoScroll:true,

　　sm:sm, //GridPanel中的复选按钮,可以全选所有的行,若没有设置该属性,则GridPanel得全选功能不能实现

　　cm:cm,

　　store:store,

　　// viewConfig:{forceFit: true},设置该属性为true则grid中的列宽设置无效,grid会根据这些数值计算出比例，对各列分配宽度

　　bbar:pagingBar

　　});

　　grid.addListener('sortchange', sortchangeFn); //给grid增加一个'sortchange'事件,当发生排序改变的事件,启动服务器端排序(即remoteSort:true)

　　//和重新加载数据( 即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每点击一次就会自动做相应的改变从desc->asc,asc->desc

　　}

　　Ext.onReady(ready);

　　</script>

　　</div>

　　</form>

　　</body>

　　</html>

　　后台代码：

复制代码代码如下:

　　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();

　　}

教程首页更多教程