在使用Ext Js对于Grid组件使用必不可少的，对于它的掌握也是需要的。简单贴一些代码，看看Grid的创建使用，就不细讲每一步了，代码注释还可以，不明白的可以在评论中写一下，或发邮件给我，一定帮助解答，欢迎交流。
1.简单Ext Js Grid的创建使用(创建Ext.grid.GridPanel需要store(proxy\reader)\colModel)//创建GridPanel对象function createGrid() { //创建表格的列信息 var cm1 = new Ext.grid.ColumnModel([ { header: '编号', dataIndex: 'id', width: 80, sortable: true }, //sortable:是否排序,width:重设列宽 {header: '名称', dataIndex: 'name', sortable: true }, { header: '描述', dataIndex: 'desn', id: 'desn' } //实现自动扩展列的效果，设置对应的列的id赋值，autoExpandColum ]); //添加数据信息 var data = [ ['1', 'name1', 'desn1'], ['2', 'name2', 'desn2'], ['3', 'name3', 'desn3'], ['4', 'name4', 'desn4'], ['5', 'name5', 'desn5'] ]; var dataObj = Ext.data.Record.create([//创建Record对象结构 {name: "id" }, { name: "name" }, { name: "desn" } ]); //创建数据存储对象 var ds = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [//此处的结构还可以使用上文对象，dataObj {name: 'id' }, { name: 'name' }, { name: 'desn' } ] ) }); ds.load(); //这个非常必要，load为自动传入数据；loadData手动传入数据 //表格列模型定义好了，原始数据和数据转换完成，再装配到一起，Grid就创建成功了 var grid = new Ext.grid.GridPanel({ renderTo: "divGrid", //rendTo属性指示将表格渲染到什么地方 width: 500, height: 500, store: ds, //数据 colModel: cm1, //列显示 stripeRows: true, //斑马线效果 loadMask: true, //读取数据遮罩和提示,Loading.... enableColumnMove: false, //取消列的拖放 enableColumnResize: true, //取消列的大小改变 viewConfig: { forceFit: true//自动填满Grid,填满父容器"grid"的大小， } });} 2.简单封装一些Grid的创建，添加对于时间数据的显示控制
View Code function testGrid() { var myColModel = new Ext.grid.ColumnModel([//列模式 new Ext.grid.RowNumberer(), //行号 {header: "ID", dataIndex: "id", sortable: true }, { header: "Name", dataIndex: "name", sortable: true }, { header: "Description", dataIndex: "desn", sortable: true }, { header: "DateTime", dataIndex: "lastDate", type: "date", renderer: Ext.util.Format.dateRenderer("Y年m月d日 H时m分s秒") }//添加一列日期,设置日期格式 ]); var data = [//数据 ["001", "张三", "学生", '2009-09-12T09:09:09'], ['002', '李四', '工作', '2009-09-20T09:09:09'], ['003', '王五', '教师', '2010-10-10T09:09:09'], ['004', '李白', '诗人', '2011-10-01T09:09:09'], ['005', 'QQ', '娱乐', '2012-09-09T09:09:09'] ]; var dataRecord = Ext.data.Record.create([//创建Record对象 {name: "id" }, { name: "name" }, { name: "desn" }, { name: "lastDate", type: "date", dateFormat: "Y-m-dTH:m:s"}//设定日期读取格式 ]); var myStore = new Ext.data.Store({ //创建Store对象 proxy: new Ext.data.MemoryProxy(data), //创建指定代理 reader: new Ext.data.ArrayReader({}, dataRecord)//创建指定数组读取器 }); myStore.load(); //加载数据 var grid = new Ext.grid.GridPanel({ renderTo: Ext.getBody(), width: 400, height: 500, style: "margin-left: 100px; margin-top: 100px", store: myStore, colModel: myColModel, loadMask: true, stripeRows: true, enableColumnMove: true, enableColumnResize: true, viewConfig: { forceFit: false//如果强制填充,将不会有滚动条显示 } }); //行和列自动根据Grid的大小和数据的显示滚动条 grid.setAutoScroll(true);} View Code //本地数据创建GridPanelfunction createGridPanel() { var grid = new Ext.grid.GridPanel({ width: 600, height: 300, frame: true, iconCls: "icon-grid", title: "GridTest", stripRow: true, loadMask: true, enableColumnMove: true, enableColumnResize: true, sm: createSelModel(), store: createStore(), colModel: createColumns(), renderTo: Ext.getBody(), viewConfig: { forceFit: true}//自动填充 });}//创建GridColumnsfunction createColumns() { var cols = new Ext.grid.ColumnModel({ defaults: { width: 100, sortable: true }, columns: [ { id: "company", header: "Company", dataIndex: "company", width: 120, sortable: true }, { header: "Price", dataIndex: "price", renderer: Ext.util.Format.usMoney }, { header: "Change", dataIndex: "change" }, { header: "LastUpdate", dataIndex: "lastDate", type: "date", renderer: Ext.util.Format.dateRenderer("Y年m月d日") } ] }); return cols;}//创建数据存储Storefunction createStore() { //符合格式的数据 var myData = [ ["company1", 1, "change1", "2009-09-17"], ["company2", 2, "change2", "2012-10-10"], ["company3", 3, "change3", "2010-06-10"], ["company4", 4, "change4", "2012-07-10"], ["company5", 5, "change5", "2010-05-10"], ["company6", 6, "change6", "2012-11-10"] ]; //创建Reader，按指定格式读取 var myReader = Ext.data.Record.create([ { name: "company" }, { name: "price" }, { name: "change" }, { name: "lastDate", type: "date", dateFormat: "Y-m-d"}//注意时间转换 ]); //创建数据集对象Store var store = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(myData), reader: new Ext.data.ArrayReader({}, myReader) }); store.load(); //load为自动传入数据；loadData手动传入数据 return store;}//创建选中模式function createSelModel() { var selModel = new Ext.grid.RowSelectionModel({ singleSelect: true }); return selModel;} 3.简单可编辑Grid的AJAX操作：加载、添加、修改、删除数据
前台ExtJs的创建EditorGridPanel，以及加载、添加、修改、删除操作：Ext.onReady(function () { gridAjaxTest();});function gridAjaxTest() { var checkSelModel = new Ext.grid.CheckboxSelectionModel({ checkOnly: true }); //单行选中{ singleSelect: true },checkBox显示 var cm = new Ext.grid.ColumnModel([//设置列的结构 checkSelModel, { header: '学生ID', dataIndex: 'StuID', width: 80 }, { header: '学生姓名', dataIndex: 'StuName', editor: new Ext.grid.GridEditor(new Ext.form.TextField({})) }, { header: '学生年龄', dataIndex: 'StuAge', editor: new Ext.grid.GridEditor(new Ext.form.TextField({ allowBlank: false })) }, { header: '学生性别', dataIndex: 'StuSex', editor: new Ext.grid.GridEditor(new Ext.form.ComboBox({ store: ['男', '女'], triggerAction: 'all', editable: false, autoSelect: true })) }, { header: '学生描述', dataIndex: 'StuDesp', id: 'StuDesp', editor: new Ext.grid.GridEditor(new Ext.form.TextArea({ allowBlank: false })) }, { header: '入学日期', dataIndex: 'StuDate', width: 150, editor: new Ext.grid.GridEditor(new Ext.form.DateField({ editable: false, format: 'Y-m-d', value: new Date().format('Y-m-d') })) } ]); var ds = new Ext.data.JsonStore({ //设置数据绑定 url: 'TestGridAjax.ashx', //请求地址 baseParams: { Option: 'GetData' }, fields: ['StuID', 'StuName', 'StuAge', 'StuSex', 'StuDesp', 'StuDate']//绑定字段 }); ds.load(); var gridAjax = new Ext.grid.EditorGridPanel({ //可编辑GridPanel width: 800, height: 500, renderTo: Ext.getBody(), style: { marginLeft: 100, marginTop: 100 }, store: ds, //数据 colModel: cm, //列显示结构 //sm:checkSelModel,//checkBox显示选中 sm: new Ext.grid.RowSelectionModel(), //单行选中{ singleSelect: true },不设为多行选中 loadMask: true, stripeRows: true, autoExpandColumn: 'StuDesp', //设置一列自动填充剩余部分 clicksToEdit: 2, //双击触发修改 tbar: new Ext.Toolbar([ { text: '添加', handler: function () { addData(gridAjax); } }, '-', //添加操作 {text: '删除', id: 'btnDelete', handler: function () { //删除操作 Ext.MessageBox.confirm('信息提示', '你确定要删除吗？', function (btn) { if (btn == 'yes') { delData(gridAjax); } }); } }, '-', { text: '保存', id: 'tbnSave', handler: function () { saveData(gridAjax); } }//保存操作 ]) });}function addData(gridAjax) { //添加操作,传入GridPanel对象 var stu = new Ext.data.Record({ StuID: 0, StuName: '学生名', StuAge: 20, StuSex: '', StuDesp: '', StuDate: '' }); //添加默认数据 gridAjax.stopEditing(); gridAjax.store.insert(0, stu); //在第0行插入该记录 gridAjax.startEditing(0, 1);}function delData(gridAjax) { //删除数据(实现单行\多行记录删除) if (gridAjax.selModel.getCount() > 0) { //获取选中的行总数 //var record = gridAjax.selModel.getSelected(); //获取选中的单条记录 var records = gridAjax.selModel.getSelections(); //获取选中的所有记录 var stuIDS = ""; //要删除学生ID集合 for (var i = 0; i < records.length; i++) { stuIDS += records[i].data.StuID + ","; } if (stuIDS.indexOf(',')) { stuIDS = stuIDS.substring(0, stuIDS.lastIndexOf(',')); } //去掉最后一个"," Ext.Ajax.request({ method: 'POST', //请求方式大小写敏感 url: 'TestGridAjax.ashx', params: { Option: 'DeleteData', JsonData: stuIDS }, success: function (response, options) { //执行成功 gridAjax.store.remove(records); //数据库删除成功,前台删除选中的所有记录 gridAjax.reconfigure(gridAjax.store, gridAjax.colModel); //绑定对象并刷新 Ext.MessageBox.alert('信息提示', Ext.util.JSON.decode(response.responseText).Msg); //获取后台返回的Json数据Msg键的值 }, failure: function (response, options) { Ext.MessageBox.alert('信息提示', Ext.util.JSON.decode(response.responseText).Msg); } }); } else { Ext.MessageBox.alert('信息提示', '请选择你要删除的数据！'); }}function saveData(gridAjax) { //保存数据 var records = null; //清空数据组数据 var jsonData = ""; //清空Json格式数据 records = gridAjax.store.getModifiedRecords(); //获取所有修改的记录(添加\修改的记录) if (records.length <= 0) { return; } jsonData = '['; //Json数据 for (var i = 0; i < records.length; i++) { //遍历集合,将所有修改的拼接成Json数据 jsonData += String.format("{'StuID':{0},'StuName':'{1}','StuAge':{2},'StuSex':'{3}','StuDesp':'{4}','StuDate':'{5}'},", records[i].data.StuID, records[i].data.StuName, records[i].data.StuAge, records[i].data.StuSex, records[i].data.StuDesp, records[i].data.StuDate == '' ? new Date().format('Y-m-d') : records[i].data.StuDate.format('Y-m-d')); //如果为空转换为当前时间 } if (jsonData.indexOf(',')) { jsonData = jsonData.substr(0, jsonData.lastIndexOf(',')); } //去除最后一个"," jsonData += "]"; Ext.Ajax.request({ method: 'POST', //请求方式大小写敏感 url: 'TestGridAjax.ashx', params: { Option: 'SaveData', jsonData: jsonData }, success: function (response, opts) { var json = Ext.util.JSON.decode(response.responseText); Ext.MessageBox.alert('信息提示', json.Msg) }, //获取返回的Json数据 failure: function (response, opts) { Ext.MessageBox.alert('信息提示', Ext.util.JSON.decode(response.responseText)); } }); gridAjax.store.reload();} 后台对于AJAX的响应操作创建一般处理程序.ashx文件，对于加载、增、删、改数据的响应，使用List集合模拟数据操作，对于List集合转化为Json和Json转化为List集合,即Json的序列化和反序列化操作：
(注意对于命名空间的引入以及JavaScriptSerializer和DataContractJsonSerializer两个序列化器的差异，可参见：)using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Runtime.Serialization.Json;using System.Text;using System.Web;using System.Web.Script.Serialization;namespace WebExtJS.WebTest{ /// /// TestGridAjax1 的摘要说明 /// public class TestGridAjax1 : IHttpHandler { private List listStus = null;//(或全局静态变量)学生数据集合 public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; listStus = GetDataSet();//初始化数据,假的模拟数据 string strOption = context.Request["Option"] != null ? context.Request["Option"].Trim().ToString() : null; string jsonData = context.Request["JsonData"] != null ? context.Request["JsonData"].Trim().ToString() : string.Empty; string outPutMsg = string.Empty; switch (strOption) { case "GetData": outPutMsg = JavaScriptSerialize(listStus); break;//获取数据 case "SaveData": outPutMsg = SaveData(jsonData); break;//保存数据 case "DeleteData": outPutMsg = DeleteData(jsonData); break;//删除数据 case "SaveSingle": outPutMsg = SaveSingle(context.Request); break;//保存单条记录 case "GetPagingData": outPutMsg = GetPagingData(context.Request); break;//分页查询处理 default: break; } context.Response.Write(outPutMsg);//将处理后的Json数据传出 context.Response.End(); } /// /// JS序列化，将对象转换为Json数据 /// 注意：JS对于List对象的,处理需要对传出的Json数据,进行简单字符替换 /// /// List集合 /// 序列化的数据 private string JavaScriptSerialize(List listStus) { string json = string.Empty; if (listStus != null && listStus.Count > 0) { JavaScriptSerializer jsSerializer = new JavaScriptSerializer(); json += jsSerializer.Serialize(listStus).Replace("\"", "'");//字符处理 } //json = json.Insert(0, "{'TotalCount':'" + listStus.Count + "',rows:");//这是数据保存统一的输出格式需要的 //json = json.Insert(json.Length, "}"); return json; } /// /// JS反序列化操作 /// 注意：根据前面设计的数据格式,可以直接反序列化 /// /// 前台格式的数据 /// List集合 private List JavaScriptDeserialize(string json) { List tempStus = new List (); if (!string.IsNullOrEmpty(json)) { JavaScriptSerializer jsDeserializer = new JavaScriptSerializer(); tempStus = jsDeserializer.Deserialize >(json); } return tempStus; } /// /// Json序列化,将对象转化为Json数据 /// 注意：对于C#处理的Json可以直接使用 /// /// /// listStus) { string json = string.Empty; if (listStus != null && listStus.Count > 0) { DataContractJsonSerializer jsonSerializer = new DataContractJsonSerializer(typeof(List )); MemoryStream ms = new MemoryStream(); jsonSerializer.WriteObject(ms, listStus); json += Encoding.UTF8.GetString(ms.ToArray()); ms.Close(); } return json; } /// /// Json反序列化操作 /// 注意：根据前面提供的数据需要小小的字符串处理 /// /// /// JsonDeserialize(string json) { List tempStus = new List (); if (!string.IsNullOrEmpty(json)) { json = json.Replace("'", "\"");//字符串处理 DataContractJsonSerializer jsonDeserializer = new DataContractJsonSerializer(typeof(List )); MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(json)); tempStus = (List )jsonDeserializer.ReadObject(ms); } return tempStus; } /// /// 根据前台传入的Json数据,保存数据 /// /// /// 是否成功的Json数据 private string SaveData(string jsonData) { string message = "{'Msg':'保存失败！'}"; List tempStudents = new List (); if (!string.IsNullOrEmpty(jsonData)) { //tempStudents = JavaScriptDeserialize(jsonData);//JS反序列化 tempStudents = JsonDeserialize(jsonData);//C#反序列化 int rows = AddAndUpdateStus(tempStudents);//添加修改操作 if (rows > 0) { message = "{'Msg':'传出Json数据,保存成功!'}";//向前台输出Json数据 } else { message = "{'Msg':'传出Json数据,保存失败！'}"; } } return message; } /// /// 单条数据的保存操作 /// /// /// /// 根据传入的学生ID集合删除数据,可以单条\多条记录删除,这里执行数据库删除 /// /// /// tempLambStus = listStus.FindAll(student => jsonData.Contains(student.StuID));//Lambda查询获取数据 List tempLinqStus = new List ((from student in listStus where jsonData.Contains(student.StuID) select student).ToList());//Linq查询获取数据转化为List集合 listStus.RemoveAll(student => jsonData.Contains(student.StuID));//删除符合条件的记录 message = "{'Msg':'删除成功！'}"; } return message; } /// /// 添加\修改操作,这里执行数据库的增\改 /// /// /// stus) { int rows = 0; if (stus.Count > 0) { try { foreach (Student stu in stus)//遍历所有集合 { AddAndUpdateStus(stu);//对于单条数据的处理 } rows = stus.Count;//返回影响行数 } catch (Exception exp) { rows = -1; } } return rows; } /// /// 对于单条记录的处理,这里执行单条记录的增\改 /// /// private void AddAndUpdateStus(Student stu) { if (stu.StuID == "0")//ID为0表示新加记录 { listStus.Add(stu); } else { //根据ID获取对象,修改数据 Student oldStu = listStus.Find(student => student.StuID == stu.StuID);//查找该对象是否存在 //var oldStudent = from student in listStus where student.StuID == stu.StuID select student;//获取符合ID的对象 //var stuIDS = from student in listStus where student.StuID == stu.StuID select student.StuID;//获取所有的ID集合 oldStu.StuAge = stu.StuAge; oldStu.StuDate = stu.StuDate; oldStu.StuDesp = stu.StuDesp; oldStu.StuName = stu.StuName; oldStu.StuSex = stu.StuSex; } } /// /// 对于数据的分页处理 /// /// /// tempLinqStus = new List (stus.ToList());//转化为List集合 List tempLambStus = listStus.OrderBy(student => student.StuID).Skip(start).Take(limit).ToList();//Lambda分页查询 //字符拼接,指定总记录数(totalProperty)和显示数据的根(root) json = JavaScriptSerialize(tempLinqStus).Insert(0, "{'TotalCount':'" + listStus.Count + "',Datas:"); json = json.Insert(json.Length, "}"); //json = JsonSerialize(tempLinqStus).Insert(0, "{\"TotalCount\":\"" + listStus.Count + "\",Datas:"); //json = json.Insert(json.Length, "}"); return json; } /// /// 初始化数据,这里执行数据库查询初始化操作 /// /// GetDataSet() { List listStus = new List { //初始化数据 new Student(){ StuID="1", StuAge=20, StuName="李白", StuSex="男", StuDesp="学生1", StuDate=DateTime.Now.ToString()}, new Student(){ StuID="2", StuAge=21, StuName="李明",StuSex="男",StuDesp="学生2",StuDate=DateTime.Now.AddDays(1).ToString() }, new Student(){StuID="3",StuAge=18,StuName="李丽",StuSex="女",StuDesp="学生3",StuDate=DateTime.Now.AddDays(2).ToString()}, new Student(){StuID="4",StuAge=27,StuName="韩梅",StuSex="女",StuDesp="学生4",StuDate=DateTime.Now.AddDays(-2).ToString()}, new Student(){StuID="5",StuAge=20,StuName="李磊",StuSex="男",StuDesp="学生5",StuDate=DateTime.Now.AddDays(-1).ToString()} }; return listStus; } public bool IsReusable { get { return false; } } #region Json序列化和反序列化操作 /// /// Json序列化 /// /// (T t) { DataContractJsonSerializer jsonSerializer = new DataContractJsonSerializer(typeof(T)); MemoryStream ms = new MemoryStream(); jsonSerializer.WriteObject(ms, t); string json = Encoding.UTF8.GetString(ms.ToArray()); ms.Close(); return json; } /// /// Json反序列化 /// /// (string jsonString) { DataContractJsonSerializer jsonDeserializer = new DataContractJsonSerializer(typeof(T)); MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(jsonString)); T obj = (T)jsonDeserializer.ReadObject(ms); return obj; } #endregion } /// /// 学生类 /// public class Student { public string StuID; public string StuName; public int StuAge; public string StuSex; public string StuDesp; public string StuDate; }}
这个一般处理程序文件也包括对于Grid的分页处理的AJAX调用处理，下篇随笔将分享对于Grid如何进行数据分页的处理。