在这个显示篇里,简单的从后台绑定数据,包括分页和刷新的功能.源代码下载先看看图片展示的效果:Ext实现
[复制到剪贴板] CODE: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="gridShow.aspx.cs" Inherits="gridShow" %> <!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 rel="Stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css" /> <link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/xtheme-green.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/ext-lang-zh_CN.js"></script> </head> <body> <form id="form1" runat="server"> <div> <script type="text/javascript"> function ready() { var url = "jsonGrid.aspx?Param=select"; var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel ([ sm,new Ext.grid.RowNumberer({header:"编号",width:50}), {header:"编号",dataIndex:"ID",width:10,hidden:true}, {header:"标题",dataIndex:"TypeCName",width:100,editor:new Ext.form.TextField()}, {header:"英文名称",dataIndex:"TypeEName",width:100,editor:new Ext.form.TextField()}, {header:"状态",dataIndex:"DelFlag",width:100,renderer:function(value){if(value==false) {return "显示";} else {return "隐藏";}}}, {header:"添加日期",dataIndex:"AddDate",width:100,renderer:Ext.util.Format.dateRenderer('Y年m月d日')} ]); cm.defaultSortable = true; var fields = [ {name:"ID"}, {name:"TypeCName"}, {name:"TypeEName"}, {name:"DelFlag"}, {name:"AddDate"} ]; var store = new Ext.data.Store ({ proxy:new Ext.data.HttpProxy({url:url}), reader:new Ext.data.JsonReader({totalProperty:"totalPorperty",root:"root",fields:fields}) }); store.load({params:{start:0,limit:15}}); var pagingBar = new Ext.PagingToolbar ({ displayInfo:true,emptyMsg:"没有数据显示",displayMsg:"显示从{0}条数据到{1}条数据，共{2}条数据", store:store, pageSize:15 }); var grid = new Ext.grid.GridPanel ({ id:"MenuGridPanel", renderTo:document.body, layout:"fit", frame:true, border:true, width:600, height:450, autoScroll:true, store:store, sm:sm, cm:cm, viewConfig:{forceFit: true}, title:'Ext2.2全新功能版系列之--显示列表', bbar:pagingBar }); } </script> <script type="text/javascript"> Ext.onReady(ready); </script> </div> </form> </body> </html>后台代码实现
[复制到剪贴板] CODE: 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.Collections.Generic; using Newtonsoft.Json; public partial class jsonGrid : 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 = "ID"; asc_desc = "desc"; } 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 param = Request["Param"]; switch (param) { case "select": Select(field, asc_desc, pagesize, start); break; case "search": break; default: break; } } void Select(string field, string asc_desc, int pagesize, int start) { string json = ""; try { DataSet ds = ExtUtil.PaginationByTableName(field, asc_desc, pagesize, start, "TypeTable"); if (ds != null && ds.Tables[0].Rows.Count > 0) { json = ExtUtil.GetJsonString(ds); int count = ExtUtil.GetCountByTableName("TypeTable"); json = "{totalPorperty:" + count + ",root:" + json + "}"; } } catch (Exception ee) { string error = ee.Message; } Response.Write(json); } }其它部分详见源代码下载文件源代码下载
出处：http://goyangtao123.blog.163.com/blog/static/482929212008113113015180/
