Grid表格的示例（后台处理日期，DT发送到前台）_.grid() 加载表格对createtime 进行处理,只展示年月日-优快云博客

本文链接：https://blog.youkuaiyun.com/dannywj1371/article/details/6295066

本文介绍如何使用ExtJS实现网格数据展示，包括前后端代码示例。通过HTTP代理获取JSON数据，并利用JsonReader解析，最终呈现在GridPanel中。同时实现了分页、排序及特定列的样式定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前台代码：

<!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"></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格式 } }