EditGrid可编辑表格的示例（json发送到后台）
参考网站： http://www.blogjava.net/algz/articles/213006.html
前台代码：
<!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 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: 'sex' }, { name: 'addtime' } ] ) //构建Store var store = new Ext.data.Store({ proxy: proxy, reader: reader }); // create the grid var grid = new Ext.grid.EditorGridPanel({ store: store, columns: [ new Ext.grid.RowNumberer(), //自动显示行号列 {header: "ID", width: 60, dataIndex: 'ID', sortable: true, editor: new Ext.grid.GridEditor(new Ext.form.TextField({ allowBlank: false })) }, //添加可编辑文本框，不允许空 {header: "name", width: 80, dataIndex: 'name', editor: new Ext.grid.GridEditor(new Ext.form.TextField({ allowBlank: false })) }, { header: "sex", width: 60, 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列为自动伸展列 clicksToEdit: 1, //单击修改!!!!!!!!!!! tbar: new Ext.Toolbar(['-', { text: '保存', handler: function () {//保存修改表格后的结果!!!!!!!!!!! var m = store.modified.slice(0); var jsonArray = []; //定义修改后的JSON对象 Ext.each(m, function (item) {//将修改后的行对象生成json对象 jsonArray.push(item.data); }); //几个测试数据alert(jsonArray.length);jsonArray[0].ID + ' ' + jsonArray[0].name if (jsonArray.length == 0) { Ext.Msg.alert('提示', '没有对数据进行任何更改！'); return; } Ext.Ajax.request(//提交修改后的结果，处理 { url: 'EditGridAjax.ashx', success: function (response) { Ext.Msg.alert("提交成功", response.responseText); //必须返回json类型 context.Response.Write("{ success: true, errors:{} }"); }, failure: function (response) { Ext.Msg.alert("提交失败", response.responseText); //必须返回json类型{ success: false, errors:{info: '错误了'} } }, params: { UpdateInfo: Ext.encode(jsonArray)}//参数使用 Ext.encode方法将JSON对象编码成字符串，传递到后台！！！！！！ } ); } }]), 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; namespace WebApplication_study.EXT_DB { /// <summary> /// Summary description for EditGridAjax /// </summary> public class EditGridAjax : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string json = context.Request.Form["UpdateInfo"].ToString();//获取json字符串 List<student> result = JosnDeserialize<List<student>>(json, null);//通过泛型进行反序列化，解析成list foreach (var item in result )//进行逻辑处理，数据库交互 { student s = item; } context.Response.Write("successful"); } public bool IsReusable { get { return false; } } public class student { public string ID { set; get; } public string name { set; get; } public string sex { get; set; } public string addtime { get; set; } } /// <summary> /// 将指定的 JSON 字符串转换为 T 类型的对象。 /// </summary> /// <typeparam name="T">所生成对象的类型。</typeparam> /// <param name="input">要进行反序列化的 JSON 字符串。</param> /// <param name="def">反序列化失败时返回的默认值。(null)</param> /// <returns>反序列化的对象。</returns> public static T JosnDeserialize<T>(string input, T def) { if (string.IsNullOrEmpty(input)) return def; try { JavaScriptSerializer jsSerializer = new JavaScriptSerializer(); return jsSerializer.Deserialize<T>(input); } catch (InvalidOperationException) { return def; } } /// <summary> /// 将对象转换为 JSON 字符串。 /// </summary> /// <param name="obj">要序列化的对象。</param> /// <returns>序列化的 JSON 字符串。</returns> public static string JsonSerialize(object obj) { JavaScriptSerializer jsSerializer = new JavaScriptSerializer(); return jsSerializer.Serialize(obj); } } }