前台代码:
<!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> <title></title> <link href="extS/resources/css/ext-all.css" mce_href="extS/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <mce:script src="extS/ext-base.js" mce_src="extS/ext-base.js" type="text/javascript"></mce:script> <mce:script src="extS/ext-all.js" mce_src="extS/ext-all.js" type="text/javascript"></mce:script> <mce:script src="extS/ext-lang-zh_CN.js" mce_src="extS/ext-lang-zh_CN.js" type="text/javascript"></mce:script> <mce:script src="extS/PagingMemoryProxy.js" mce_src="extS/PagingMemoryProxy.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- Ext.onReady(function () { var proxy = new Ext.data.HttpProxy({ url: 'getJson.ashx' }); //定义reader var reader = new Ext.data.JsonReader( { },[ { name: 'ID' },{ name: 'name' },{ name: 'class' },{ name: 'sex' },{ name: 'addtime' } ] ) //构建Store var store = new Ext.data.Store({ proxy: proxy,reader: reader }); // create the grid var grid = new Ext.grid.GridPanel({ store: store,columns: [ new Ext.grid.RowNumberer(),//自动显示行号列 {header: "ID",width: 60,dataIndex: 'ID',sortable: true },//支持列排序 {header: "name",width: 80,dataIndex: 'name' },{ header: "class",width: 90,dataIndex: 'class' },{ header: "sex",dataIndex: 'sex',renderer: setSex//控制列内数据的显示(html) function setSex(value) value为其值 },{ header: "addtime",width: 150,dataIndex: 'addtime',id: 'addtime'} //dateFormat:'Y-M-dTH:i:s' ],renderTo: 'example-grid',width: 500,height: 300,stripeRows: true,//显示斑马线 autoExpandColumn: 'addtime',//设置id列为自动伸展列 bbar: new Ext.PagingToolbar( { pageSize: 3,store: store,displayInfo: true,displayMsg: '显示第{0}条到{1}条记录,一共{2}条',emptyMsg: "没有记录" } ) }); //载入 store.load(); }) function setSex(value) { if (value == "0") { return "<span style="color:#ff0000;font-weight:bold" mce_style="color:#ff0000;font-weight:bold">男</span>" } if (value == "1") { return "<span style="color:#ff0000;font-weight:bold" mce_style="color:#ff0000;font-weight:bold">女</span>" } } // --></mce:script> </head> <body> <div id="example-grid"> </div> </body> </html>
后台代码:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Script.Serialization; using System.Data; using System.Text; namespace WebApplication_study.EXT_DB { /// <summary> /// Summary description for getJson /// </summary> public class getJson : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; #region getJsonByObject userinfo user = new userinfo(); user.name = "wangjue"; user.age = 14; user.test = "132"; userinfo user2 = new userinfo(); user2.name = "ff"; user2.age = 11; user2.test = "46"; List<userinfo> listset = new List<userinfo>(); listset.Add(user); listset.Add(user2); string str = new JavaScriptSerializer().Serialize(listset);//序列化为json对象 using System.Web.Script.Serialization; #endregion DataTable dt = GetDTData(); foreach (DataRow dr in dt.Rows) { dr["addtime"] = Convert.ToDateTime(dr["addtime"].ToString()).ToString("yyyy年MM月dd日"); } string str2 = DataTable2Json(dt); context.Response.Write(str2); } public bool IsReusable { get { return false; } } #region GetDT public DataTable GetDTData() { DataTable dt = new DataTable(); DataColumn dc1 = new DataColumn(); dc1.ColumnName = "ID"; dc1.DataType = typeof(int); dc1.AutoIncrement = true; dc1.AutoIncrementSeed = 1; dc1.AutoIncrementStep = 1; DataColumn dc2 = new DataColumn(); dc2.ColumnName = "name"; dc2.DataType = typeof(string); DataColumn dc3 = new DataColumn(); dc3.ColumnName = "class"; dc3.DataType = typeof(string); DataColumn dc4 = new DataColumn(); dc4.ColumnName = "sex"; dc4.DataType = typeof(int); DataColumn dc5 = new DataColumn(); dc5.ColumnName = "addtime"; dc5.DataType = typeof(string); dt.Columns.Add(dc1); dt.Columns.Add(dc2); dt.Columns.Add(dc3); dt.Columns.Add(dc4); dt.Columns.Add(dc5); for (int i = 0; i < 50; i++) { DataRow dr = dt.NewRow(); dr[1] = "王爵" + i.ToString(); dr[2] = "计算机07-" + (i + 1).ToString(); dr[3] = 0; dr[4] = DateTime.Now;//.Year + "-" + DateTime.Now.Month + "-" + DateTime.Now.Day; dt.Rows.Add(dr); } return dt; } #endregion /// <summary> /// 构造一个对象 /// </summary> public class userinfo { public string name { get; set; } public int age { get; set; } public string _test; public string test { get { return _test; } set { _test = value; } } } #region dataTable转换成Json格式 /// <summary> /// dataTable转换成Json格式 /// </summary> /// <param name="dt"></param> /// <returns></returns> public static string DataTable2Json(DataTable dt) { StringBuilder jsonBuilder = new StringBuilder(); jsonBuilder.Append("["); // jsonBuilder.Append(dt.TableName.ToString()); // jsonBuilder.Append("/":["); for (int i = 0; i < dt.Rows.Count; i++) { jsonBuilder.Append("{"); for (int j = 0; j < dt.Columns.Count; j++) { jsonBuilder.Append("/""); jsonBuilder.Append(dt.Columns[j].ColumnName); jsonBuilder.Append("/":/""); jsonBuilder.Append(dt.Rows[i][j].ToString()); jsonBuilder.Append("/","); } jsonBuilder.Remove(jsonBuilder.Length - 1,1); jsonBuilder.Append("},"); } jsonBuilder.Remove(jsonBuilder.Length - 1,1); jsonBuilder.Append("]"); // jsonBuilder.Append("}"); return jsonBuilder.ToString(); } #endregion dataTable转换成Json格式 } }