Ext Js简单Grid创建使用及AJAX处理-阿里云开发者社区

开发者社区> 开发与运维> 正文

Ext Js简单Grid创建使用及AJAX处理

简介:

Ext Js简单Grid创建使用及AJAX处理

在使用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
View Code

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两个序列化器的差异,可参见:小心DataContractJsonSerializer和JavaScriptSerializer的内部实现差异)

复制代码
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
{
    /// <summary>
    /// TestGridAjax1 的摘要说明
    /// </summary>
    public class TestGridAjax1 : IHttpHandler
    {
        private List<Student> 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();
        }

        /// <summary>
        /// JS序列化,将对象转换为Json数据
        /// 注意:JS对于List对象的,处理需要对传出的Json数据,进行简单字符替换
        /// </summary>
        /// <param name="listStus">List集合</param>
        /// <returns>序列化的数据</returns>
        private string JavaScriptSerialize(List<Student> 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;
        }
        /// <summary>
        /// JS反序列化操作
        /// 注意:根据前面设计的数据格式,可以直接反序列化
        /// </summary>
        /// <param name="json">前台格式的数据</param>
        /// <returns>List集合</returns>
        private List<Student> JavaScriptDeserialize(string json)
        {
            List<Student> tempStus = new List<Student>();
            if (!string.IsNullOrEmpty(json))
            {
                JavaScriptSerializer jsDeserializer = new JavaScriptSerializer();
                tempStus = jsDeserializer.Deserialize<List<Student>>(json);
            }
            return tempStus;
        }

        /// <summary>
        /// Json序列化,将对象转化为Json数据
        /// 注意:对于C#处理的Json可以直接使用
        /// </summary>
        /// <param name="listStus"></param>
        /// <returns></returns>
        private string JsonSerialize(List<Student> listStus)
        {
            string json = string.Empty;
            if (listStus != null && listStus.Count > 0)
            {
                DataContractJsonSerializer jsonSerializer = new DataContractJsonSerializer(typeof(List<Student>));
                MemoryStream ms = new MemoryStream();
                jsonSerializer.WriteObject(ms, listStus);
                json += Encoding.UTF8.GetString(ms.ToArray());
                ms.Close();
            }
            return json;
        }
        /// <summary>
        /// Json反序列化操作
        /// 注意:根据前面提供的数据需要小小的字符串处理
        /// </summary>
        /// <param name="json"></param>
        /// <returns></returns>
        private List<Student> JsonDeserialize(string json)
        {

            List<Student> tempStus = new List<Student>();
            if (!string.IsNullOrEmpty(json))
            {
                json = json.Replace("'", "\"");//字符串处理
                DataContractJsonSerializer jsonDeserializer = new DataContractJsonSerializer(typeof(List<Student>));
                MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(json));
                tempStus = (List<Student>)jsonDeserializer.ReadObject(ms);
            }
            return tempStus;
        }

        /// <summary>
        /// 根据前台传入的Json数据,保存数据
        /// </summary>
        /// <param name="jsonData"></param>
        /// <returns>是否成功的Json数据</returns>
        private string SaveData(string jsonData)
        {
            string message = "{'Msg':'保存失败!'}";
            List<Student> tempStudents = new List<Student>();

            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;
        }

        /// <summary>
        /// 单条数据的保存操作
        /// </summary>
        /// <param name="request"></param>
        /// <returns></returns>
        private string SaveSingle(HttpRequest request)
        {
            string message = "{success:false,Msg:'保存失败!'}";
            try
            {//表单提交,HttpRequest获取所有的对象
                string stuID = request["StuID"].ToString() == "" ? "0" : request["StuID"].ToString();
                string stuName = request["StuName"].ToString();
                int stuAge = int.Parse(request["StuAge"].ToString());
                string stuSex = request["StuSex"].ToString();
                string stuDesp = request["StuDesp"].ToString();
                string stuDate = request["StuDate"].ToString();

                Student stu = new Student() { StuID = stuID, StuAge = stuAge, StuName = stuName, StuSex = stuSex, StuDesp = stuDesp, StuDate = stuDate };
                AddAndUpdateStus(stu);
                message = "{success:true,Msg:'保存成功!'}";
            }
            catch (Exception exp)
            {
                throw new Exception("异常信息");
            }
            return message;
        }

        /// <summary>
        /// 根据传入的学生ID集合删除数据,可以单条\多条记录删除,这里执行数据库删除
        /// </summary>
        /// <param name="jsonData"></param>
        /// <returns></returns>
        private string DeleteData(string jsonData)
        {
            string message = "{'Msg':'删除失败!'}";
            if (!string.IsNullOrWhiteSpace(jsonData))
            {
                List<Student> tempLambStus = listStus.FindAll(student => jsonData.Contains(student.StuID));//Lambda查询获取数据
                List<Student> tempLinqStus = new List<Student>((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;
        }

        /// <summary>
        /// 添加\修改操作,这里执行数据库的增\改
        /// </summary>
        /// <param name="stus"></param>
        /// <returns></returns>
        private int AddAndUpdateStus(List<Student> 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;
        }

        /// <summary>
        /// 对于单条记录的处理,这里执行单条记录的增\改
        /// </summary>
        /// <param name="stu"></param>
        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;
            }
        }

        /// <summary>
        /// 对于数据的分页处理
        /// </summary>
        /// <param name="request"></param>
        /// <returns></returns>
        private string GetPagingData(HttpRequest request)//这里执行数据库分页操作
        {
            string json = string.Empty;
            int start = request["start"] != null ? int.Parse(request["start"]) : 0;//开始记录数
            int limit = request["limit"] != null ? int.Parse(request["limit"]) : 2;//页大小

            var stus = (from student in listStus orderby student.StuID select student).Skip(start).Take(limit);//Linq分页查询
            List<Student> tempLinqStus = new List<Student>(stus.ToList());//转化为List集合

            List<Student> 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;
        }

        /// <summary>
        /// 初始化数据,这里执行数据库查询初始化操作
        /// </summary>
        /// <returns></returns>
        private List<Student> GetDataSet()
        {
            List<Student> listStus = new List<Student> { //初始化数据
            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序列化和反序列化操作
        /// <summary>
        /// Json序列化
        /// </summary>
        /// <typeparam name="T"></typeparam>
        /// <param name="t"></param>
        /// <returns></returns>
        private string JsonSerialize<T>(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;
        }
        /// <summary>
        /// Json反序列化
        /// </summary>
        /// <typeparam name="T"></typeparam>
        /// <param name="jsonString"></param>
        /// <returns></returns>
        private T JsonDeserialize<T>(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
    }

    /// <summary>
    /// 学生类
    /// </summary>
    public class Student
    {
        public string StuID;
        public string StuName;
        public int StuAge;
        public string StuSex;
        public string StuDesp;
        public string StuDate;
    }
}
复制代码

 这个一般处理程序文件也包括对于Grid的分页处理的AJAX调用处理,下篇随笔将分享对于Grid如何进行数据分页的处理。 


本文转自SanMaoSpace博客园博客,原文链接:http://www.cnblogs.com/SanMaoSpace/archive/2013/01/26/2878155.html,如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章