ExtJS中的GridPanel增删改查以及分页

1.Demo.htm

    <script src="js/JScript.js" type="text/javascript"></script> <script type="text/javascript">
        Ext.onReady(function () {
            Ext.QuickTips.init(); //启动悬停提示
            Ext.form.Field.prototype.msgTarget = 'side';
            var sm = new Ext.grid.CheckboxSelectionModel();
            var cm = new Ext.grid.ColumnModel([
                    sm,  //复选框
                    new Ext.grid.RowNumberer({ header: "编号", width: 50 }), //显示序号
                    {header: "ID", width: 100, dataIndex: "id", tooltip: "id", sortable: true },
                    { header: "UID", width: 100, dataIndex: "uid", sortable: true },
            //列模型提供了一个回调函数,该函数可以根据当前列的信息进行再加工
            // { header: "性别", width: 40, dataIndex: "Sex", align: "center"
            // renderer: function (v) {
            //if (v == "男") { return "<img src=''/>"; }
            //else { return "<img src=''/>"; }
            // }
            // },
                    {header: "密码", width: 100, dataIndex: "pwd", sortable: true },
                    { header: "Email", width: 100, dataIndex: "email", sortable: true },
                    { header: "部门id", width: 100, dataIndex: "departmentid" },
                    { header: "状态", width: 100, dataIndex: "status" },

                ]);
            var proxy = new Ext.data.HttpProxy({
                url: url
            });
            var Member = Ext.data.Record.create([
              { name: "id", type: "int", mapping: "ID" },
              { name: "uid", type: "string", mapping: "UID" },
              { name: "pwd", type: "string", mapping: "PWD" },
              { name: "email", type: "string", mapping: "Email" },
              { name: "departmentid", type: "int", mapping: "DepartmentId" },
              { name: "status", type: "int", mapping: "Status" },

              ]);

            var reader = new Ext.data.JsonReader({
                totalProperty: "totalProperty",
                root: "root"
            }, Member);

            var store = new Ext.data.Store({
                proxy: proxy,
                reader: reader
                //  sortInfo: { field: "id", direction: "DESC" }
            });
            var pagingToolbar = new Ext.PagingToolbar
                ({
                    emptyMsg: "没有数据",
                    displayInfo: true,
                    displayMsg: "显示从{0}条数据到{1}条数据，共{2}条数据",
                    store: store,
                    pageSize: 10,
                    items: [
                        {
                            text: '添加',
                            handler: add

                        }, {
                            text: '修改',
                            handler: edit

                        }, {
                            text: '删除',
                            handler: del
                        }, {
                            text: '查询',
                            handler: function () {
                                Ext.Msg.prompt("Email查询", "请输入要查询的Email:", function (btn, text) {
                                    if (btn == "ok") {
                                        store.filter("email", text);
                                    }
                                });
                            }
                        }
                    ]
                });
            var dataGrid = new Ext.grid.GridPanel
                ({
                    id: "gridPanel",
                    renderTo: Ext.getBody(),
                    title: '结果显示',
                    frame: true,
                    store: store,
                    width: 685,
                    height: 500,
                    cm: cm,
                    sm: sm,
                    bbar: pagingToolbar,
                    buttonAlign: "center",
                    buttons: [{
                        text: "第一行",
                        handler: function () {
                            var rsm = dataGrid.getSelectionModel(); //得到选择模型
                            rsm.selectFirstRow();
                        }
                    }, {
                        text: "上一行",
                        handler: function () {
                            var rsm = dataGrid.getSelectionModel(); //得到选择模型
                            if (!rsm.hasPrevious()) {
                                Ext.MessageBox.alert("警告", "已到达第一行");
                            }
                            else {
                                rsm.selectPrevious();
                            }
                        }
                    }, {
                        text: "下一行",
                        handler: function () {
                            var rsm = dataGrid.getSelectionModel(); //得到选择模型
                            if (!rsm.hasNext()) {
                                Ext.MessageBox.alert("警告", "已到达最后一行");
                            }
                            else {
                                rsm.selectNext();
                            }
                        }
                    }, {
                        text: "最后一行",
                        handler: function () {
                            var rsm = dataGrid.getSelectionModel(); //得到选择模型
                            rsm.selectLastRow();
                        }
                    }, {
                        text: "全选",
                        handler: function () {
                            var rsm = dataGrid.getSelectionModel(); //得到选择模型
                            rsm.selectAll();
                        }
                    }, {
                        text: "全不选",
                        handler: function () {
                            var rsm = dataGrid.getSelectionModel(); //得到选择模型
                            rsm.deselectRange(0, dataGrid.getView().getRows().length - 1);
                        }
                    }, {
                        text: "反选",
                        handler: function () {
                            var rsm = dataGrid.getSelectionModel(); //得到选择模型
                            for (var i = dataGrid.getView().getRows().length - 1; i >= 0; i--) {
                                if (rsm.isSelected(i)) {
                                    rsm.deselectRow(i);
                                }
                                else {
                                    rsm.selectRow(i, true);  //必须保留原来的,否则效果无法显示
                                }
                            }
                        }
                    }]
                });

            store.load({ params: { start: 0, limit: 10} });

        });
    </script>

2.getAll.ashx

<%@ WebHandler Language="C#" Class="getAll" %>

using System;
using System.Web;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Text;
public class getAll : IHttpHandler {

    public static  int start = 0;
    public static int limit = 0;
    public void ProcessRequest (HttpContext context) {
         context.Response.ContentType = "text/plain";
         Service service = new Service();
         if (context.Request["start"] != null && context.Request["limit"] != null)
         {
             start = int.Parse(context.Request["start"]);
             limit = int.Parse(context.Request["limit"]);
             context.Response.Write(service.getAllTransferJson());
         }
        
        
         if (context.Request["para"] != null && context.Request["para"].ToString()=="add")
         {
              Member member = new Member();
              member.UID = context.Request["uid"];
              member.PWD = context.Request["passw"];
              member.Email = context.Request["email"];
              member.DepartmentId = int.Parse(context.Request["depid"]);
              member.Status = int.Parse(context.Request["status"]);
              service.add(member);
         }
         if (context.Request["para"] != null && context.Request["para"].ToString() == "edit")
         {
             Member member = new Member();
             member.ID = int.Parse(context.Request["id"]);
             member.UID = context.Request["uid"];
             member.PWD = context.Request["passw"];
             member.Email = context.Request["email"];
             member.DepartmentId = int.Parse(context.Request["depid"]);
             member.Status = int.Parse(context.Request["status"]);
             service.edit(member);
         }
         if (context.Request["para"] != null && context.Request["para"].ToString() == "delete")
         {
             string ids = context.Request["ids"];
             service.delete(ids);
           
         }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }
}

public class Member
{
    public int ID { get; set; }
    public string UID { get; set; }
    public string PWD { get; set; }
    public string Email { get; set; }
    public int DepartmentId { get; set; }
    public int Status { get; set; }
}

public class Service 
{
    private string conn = @"Data Source=QADB\SQL2005;Initial Catalog=TestDB;User ID=sa;Password=abc@123";
    public string Conn { get { return conn; } }

   /// <summary>
    /// 获取数据转换为json
   /// </summary>
   /// <returns></returns>
    public string getAllTransferJson() 
    {
        using (SqlConnection conn = new SqlConnection(Conn))
        {
            conn.Open();
            string sql = string.Format("select top {0} * from  Member where ID not in(select top {1} ID from Member order by   ID)  order by ID",  getAll.limit,getAll.start);
            SqlCommand cmd = new SqlCommand(sql, conn);
            SqlDataReader reader = cmd.ExecuteReader();
            Member member = null;
            List<Member> list = new List<Member>();
            while(reader.Read())
            {
                member = new Member();
                member.ID = reader.GetInt32(0);
                member.UID = reader.GetString(1);
                member.PWD = reader.GetString(2);
                member.Email = reader.GetString(3);
                member.DepartmentId = reader.GetInt32(4);
                member.Status = reader.GetInt32(5);
                list.Add(member);
            }
            conn.Close();
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            StringBuilder sb=new StringBuilder();
            serializer.Serialize(list, sb);
            string str = "{totalProperty:" + getRecords() + ",root:";
            return str+sb.ToString()+"}";
       }
    }
/// <summary>
/// 获得总记录条数
/// </summary>
    public int getRecords() 
    {
        int result = 0;
        using (SqlConnection conn = new SqlConnection(Conn))
        {
            conn.Open();
            SqlCommand cmd = new SqlCommand("select count(*) from Member", conn);
            result=(Int32)cmd.ExecuteScalar();
            conn.Close();
            return result;
        }
    }
    /// <summary>
    /// 新增
    /// </summary>
    public int add(Member member) 
    {
        int result = 0;
        using (SqlConnection conn = new SqlConnection(Conn))
        {
            conn.Open();
            string sql = string.Format("insert into Member values({0},'{1}','{2}',{3},{4})",member.UID,member.PWD,member.Email,member.DepartmentId,member.Status);
            SqlCommand cmd = new SqlCommand(sql, conn);
            result = cmd.ExecuteNonQuery();
            conn.Close();
            return result;
        }
    }
    /// <summary>
    /// 修改
    /// </summary>
    public int edit(Member member)
    {
        int result = 0;
        using (SqlConnection conn = new SqlConnection(Conn))
        {
            conn.Open();
            string sql = string.Format("update Member set UID='{0}',PWD='{1}',Email='{2}',DepartmentId={3},Status={4} where ID={5}", member.UID, member.PWD, member.Email, member.DepartmentId, member.Status,member.ID);
            SqlCommand cmd = new SqlCommand(sql, conn);
            result = cmd.ExecuteNonQuery();
            conn.Close();
            return result;
        }
    }
    /// <summary>
    /// 删除
    /// </summary>
    public int delete(string ids) 
    {
        string[] arr= ids.Split(',');
        int result = 0;
        using (SqlConnection conn = new SqlConnection(Conn))
        {
            conn.Open();
            for (int i = 0; i < arr.Length;i++ ) 
            {
            string sql = string.Format("delete from Member where id={0}",arr[i]);
            SqlCommand cmd = new SqlCommand(sql, conn);
            result = cmd.ExecuteNonQuery();
            } 
            conn.Close();
            return result;
        }
    
    }
}

3.JScript.js

var url = "getAll.ashx";
function add() {
    var win = new Ext.Window({
        title: "添加记录窗口",
        width: 347,
        height: 250,
        iconCls: "center_icon",
        items: [{
            xtype: "form",
            id: "form1",
            height: "250",
            borderStyle: "padding-top:3px",
            frame: true,
            defaultType: "textfield",
            labelAlign: "right",
            labelWidth: 57,
            defaults: {
                allowBlank: false, width: 200
            },
            items: [
               { fieldLabel: "UID", id: "uid", blankText: "请输入UID" },
               { fieldLabel: "密码", id: "passw", blankText: "请输入密码" },
               { fieldLabel: "Email", id: "email", blankText: "请输入Email", vtype: "email", vtypeText: "您输入的Email格式不正确" },
               { fieldLabel: "部门ID", id: "depid", blankText: "请输入部门ID", xtype: "numberfield" },
               { fieldLabel: "状态", id: "status", blankText: "状态不能为空", xtype: "numberfield" },
               {
                   fieldLabel: "备注", regex: /^[\u4E00-\u9FA5]+$/, regexText: "只能输入中文"
               }
            ]
        }],
        buttons: [
             {
                 xtype: "button",
                 text: "确定",
                 handler: function () {
                     if (!Ext.getCmp("form1").getForm().isValid()) {
                         alert("您输入的信息有误,请重新输入...");
                         return false;
                     }
                     var uid = Ext.getCmp("uid").getValue("");
                     var passw = Ext.getCmp("passw").getValue("");
                     var email = Ext.getCmp("email").getValue("");
                     var depid = Ext.getCmp("depid").getValue("");
                     var status = Ext.getCmp("status").getValue("");
                     Ext.Ajax.request({
                         url: url + "?para=add",
                         params: {
                             "uid": uid, "passw": passw, "email": email, "depid": depid, "status": status
                         },
                         success: function (reponse, option) {
                             Ext.getCmp("gridPanel").store.reload();
                             alert("添加成功!");
                         },
                         failure: function () {
                             alert("添加失败!");
                         }
                     });
                 }
             },
                {
                    xtype: "button",
                    text: "取消",
                    handler: function () {
                        Ext.getCmp("uid").setValue("");
                        Ext.getCmp("passw").setValue("");
                        Ext.getCmp("email").setValue("");
                        Ext.getCmp("depid").setValue("");
                        Ext.getCmp("status").setValue("");
                    }
                }
            ]
    });
    win.show();
}

function edit() {
    var selRecords = Ext.getCmp("gridPanel").getSelectionModel().getSelections();
    var id,uid, passw, email, depid, status;
    if (selRecords.length >= 1) {
        id = selRecords[0].get("id");
        uid = selRecords[0].get("uid");
        passw = selRecords[0].get("pwd");
        email = selRecords[0].get("email");
        depid = selRecords[0].get("departmentid");
        status = selRecords[0].get("status")
    }
    else {
        Ext.MessageBox.alert("提示消息", "您未选中行");
        return false;
    }
    var win = new Ext.Window({
        title: "修改记录窗口",
        width: 347,
        height: 200,
        items: [{
            xtype: "form",
            id:"form1",
            height: "200",
            borderStyle: "padding-top:3px",
            frame: true,
            defaultType: "textfield",
            labelAlign: "right",
            labelWidth: 57,
            defaults: {
                allowBlank: false, width: 200
            },
            items: [
           { fieldLabel: "UID", id: "uid", blankText: "请输入UID",value:uid },
               { fieldLabel: "密码", id: "passw", blankText: "请输入密码",value:passw },
               { fieldLabel: "Email", id: "email", blankText: "请输入Email", vtype: "email", vtypeText: "您输入的Email格式不正确",value:email},
               { fieldLabel: "部门ID", id: "depid", blankText: "请输入部门ID", xtype: "numberfield", value: depid },
               { fieldLabel: "状态", id: "status", blankText: "状态不能为空", xtype: "numberfield",value:status }
            ]
        }],//vtype的值:alpha,alphanum,email,url
        buttons: [
            {
                xtype: "button",
                text: "确定",
                handler: function () {
                    if (!Ext.getCmp("form1").getForm().isValid()) {
                        alert("您输入的信息有误,请重新输入...");
                        return false;
                    }
                    uid = Ext.getCmp("uid").getValue();
                    passw = Ext.getCmp("passw").getValue();
                    email = Ext.getCmp("email").getValue();
                    depid = Ext.getCmp("depid").getValue();
                    status = Ext.getCmp("status").getValue();
                    Ext.Ajax.request({
                        url: url + "?para=edit",
                        params: { 
                           "id":id,"uid": uid, "passw": passw, "email": email,                               "depid": depid, "status": status },
                        success: function (reponse, option) {

                            Ext.getCmp("gridPanel").store.reload();
                            alert("修改成功");
                        },
                        failure: function () {
                            alert("修改失败");
                        }
                    
                    });
                }
            },
            {
                xtype: "button",
                text: "取消",
                handler: function () {
                   // alert("取消");
                } 
            }
        ]
        }).show();

    
}

function del() {
    var selRecords = Ext.getCmp("gridPanel").getSelectionModel().getSelections();
    var len = selRecords.length;
    var ids = "";
            if (len == 0) {
                Ext.MessageBox.alert("提示消息", "您未选中行");
                return false;
            }
            Ext.Msg.confirm("提示", "确定要删除吗?", function (btn) {
                if (btn == "yes") {
                    for (var i = 0; i < len; i++) {
                        if (i == len - 1) { ids += selRecords[i].get("id"); }
                        else {
                            ids += selRecords[i].get("id") + ",";
                        }
                    }
                    Ext.Ajax.request({
                        url: url + "?para=delete",
                        params: {
                            "ids": ids
                        },
                        success: function (reponse, option) {
                            Ext.getCmp("gridPanel").store.reload();
                        },
                        failure: function () {
                            alert("删除失败");
                        }

                    });
                }
            })
}

4.运行效果: