透過泛型處理常式執行Kendo UI Grid Widget的CRUD

摘要:透過泛型處理常式執行Kendo UI Grid Widget的CRUD

從過去的jQueryGrid、FlexGrid,.net的 GridView,這方面的元件在寫web的日子裡,總是會出現在需求之中,但是真正好上手、漂亮又方便、甚至具備處理效能的,老實說心中都沒有個明確的對象。
Kendo UI 是Telerik所發行的一套基於jQuery、AJAX以及包含最新的HTML5、CSS3等技術所集合而成的UI Widgets(同時也兼容HTML 4等舊有版本)。

大概是這東西還很新、而且官方Sample還是以ASP.NET MVC的關係,國內外相關資料並不多。

故本篇文章便介紹如何實作KendoGrid的CRUD,藉此拋磚引玉,希望能有更多人來玩玩這套UI Widgets。

首先當然是到該網站下載囉:http://www.kendoui.com/get-kendo-ui.aspx
我是下載KendoUI Q2 2012 BETA版進行開發,若要選擇OpenSource的版本,必須要注意的是Opensource中的js file引用與beta版的不太一樣,會以各個不同的UI Widgets各別引用,其關聯可以參考此頁:http://www.kendoui.com/documentation/javascript-dependencies.aspx

一、JS、CSS的引用:


<link rel="stylesheet" type="text/css" href="JS/KendoUI/styles/kendo.black.css" />
<link rel="stylesheet" type="text/css" href="JS/KendoUI/styles/kendo.common.css" />
<script type="text/javascript" src="JS/jQuery/jquery.min.js"></script>
<script type="text/javascript" src="JS/KendoUI/js/kendo.all.min.js"></script>

二、HTML:


<div id="grid"> </div> //在此只要丟上一塊DIV即可

三、套用Widget的Script:


$(document).ready(function () {

    var dataSrc = new kendo.data.DataSource({
        transport: { //資料操作的CRUD設定
            create:
            {
                type: "POST",//Ajax的資料送出模式
                url: "/Handlers/CustomerHandler.ashx",//對應的資料存取檔案路徑
                dataType: "json",//資料格式,也可為XML、JSONP
                data: {//額外自訂的資料物件
                    Operator: "Create" 
                }
            },
            read: {
                type: "POST",
                url: "/Handlers/CustomerHandler.ashx",
                dataType: "json"
            }
            ,
            update: {
                type: "POST",
                url: "/Handlers/CustomerHandler.ashx",
                dataType: "json",
                data: { Operator: "Update" }
            }
            ,
            destroy: {
                type: "POST",
                url: "/Handlers/CustomerHandler.ashx",
                dataType: "json",
                data: { Operator: "Delete" }
            }
        },
        schema: {
            data: function (d) { return d.Data; },   //取出資料陣列,d為最上層物件,d之中的Data包含顧客資料表的資料 
            total: function (d) { return d.TotalCount; }, //取出資料總筆數(計算頁數用),d之中的TotalCount為Data的筆數
            model: {//設定資料模型
                id: "Customerid",
                fields: {
                    Customerid:
                        {
                            editable: true,//若設為True,此欄位資料便可編輯
                            nullable: false//若設為False,則此欄位資料不可為Null
                        },
                    Customername:
                        {
                            editable: true,
                            nullable: true
                        },
                    Contactname:
                {
                    editable: true,
                    nullable: true
                },
                    Phone:
                {
                    editable: true,
                    nullable: true
                },
                }

            }
        },

        pageSize: 5, //Grid的每頁資料筆數
        serverPaging: true,//使用server端的分頁,點選分頁將會重新綁定DataSoure給Grid
        serverSorting: true//使用server端的排序,點選排序將會重新綁定DataSoure給Grid

    });

    $("#grid").kendoGrid({//對div的套用Grid widget
        height: 350,
        width: 560,
        dataSource: dataSrc,//指定資料來源
        scrollable: true,
        pageable: true,
        columns://Grid的資料欄位
        [{
            field: "Customerid",//DataSource Modal對應的資料欄位(field)
            width: 50,//Grid欄位寬度
            title: "顧客編號"//Grid欄位名稱
        },
         {
             field: "Customername",
             width: 100,
             title: "顧客名稱"
         },
        {
            field: "Contactname",
            width: 100,
            title: "聯絡人名稱"
        },
        {
            field: "Phone",
            width: 100,
            title: "連絡電話"
        },
    {
        command: [
    { name: "edit", text: "修改" }, // 使用預設的修改按鈕
    { name: "destroy", text: "刪除" } //使用預設的刪除按鈕
        ],
        // 設定指令欄位的標題名稱
        title: " ",
        width: "300px"
    }
        ],
        toolbar: [{ name: "create", text: "建立顧客資料" }],//建立資料按鈕

        editable: {
            mode: "popup", //使用Popup的模式編輯資料
            update: true, // 若設定為True,當按下Update即更新server資料
        }

    });
    $("#grid").on("click", ".k-grid-edit , .k-grid-add", function () { //修改Popup視窗中的Button文字
        $('.k-grid-update').text('儲存');
        $('.k-grid-cancel').text('取消');
        $('.k-window-title').text('會員資料');
    })
});

四、處理CRUD的泛型處理常式:


public void ProcessRequest(HttpContext context)
        {
            if (context.Request["Operator"] != null)
            {
                string _Operator = context.Request["Operator"].ToString();
                if (_Operator == "Update") //呼叫的動作為修改時
                {
                    info.Customerid = context.Request["CUSTOMERID"] != null ? context.Request["CUSTOMERID"].ToString() : null;
                    info.Customername = context.Request["CUSTOMERNAME"] != null ? context.Request["CUSTOMERNAME"].ToString() : null;
                    info.Contactname = context.Request["CONTACTNAME"] != null ? context.Request["CONTACTNAME"].ToString() : null;
                    info.Phone = context.Request["PHONE"] != null ? context.Request["PHONE"].ToString() : null;
                    bool ExeState = Instance.UpdateCustomer(info);
                }
                else if (_Operator == "Create")//呼叫的動作為新增時
                {
                    info.Customerid = context.Request["CUSTOMERID"] != null ? context.Request["CUSTOMERID"].ToString() : null;
                    info.Customername = context.Request["CUSTOMERNAME"] != null ? context.Request["CUSTOMERNAME"].ToString() : null;
                    info.Contactname = context.Request["CONTACTNAME"] != null ? context.Request["CONTACTNAME"].ToString() : null;
                    info.Phone = context.Request["PHONE"] != null ? context.Request["PHONE"].ToString() : null;
                    bool ExeState = Instance.InsertCustomer(info);
                }
                else if (_Operator == "Delete")//呼叫的動作為刪除時
                {
                    info.Customerid = context.Request["CUSTOMERID"] != null ? context.Request["CUSTOMERID"].ToString() : null;
                    bool ExeState = Instance.DeleteCustomer(info);
                }
            }

   
  
            DataTable dt = Instance.SelectCustomer(); 
            ResultData RD = new ResultData();
            List CustomerData = new List();
            for (int i = 0; i <= dt.Rows.Count - 1; i++) //將顧客轉為List
            {
                CustomerData.Add(new NWCustomerInfo.Customers()
                {
                    Customerid = dt.Rows[i]["CUSTOMERID"].ToString(),
                    Customername = dt.Rows[i]["CUSTOMERNAME"].ToString(),
                    Contactname = dt.Rows[i]["CONTACTNAME"].ToString(),
                    Phone = dt.Rows[i]["PHONE"].ToString(),
                });


            }

            int pageSize = 10, take = 10, skip = 0; //分頁設定預設值:分頁資料筆數、取出筆數、當前頁位置
            int.TryParse(context.Request["pageSize"], out pageSize); //取得分頁的資料筆數設定
            int.TryParse(context.Request["take"], out take);
            int.TryParse(context.Request["skip"], out skip);
            var paged = CustomerData.Skip(skip).Take(take); 

            JavaScriptSerializer jss = new JavaScriptSerializer(); 
            context.Response.ContentType = "application/json";
            context.Response.Write(jss.Serialize(new ResultData() //將顧客資料、顧客資料筆數總組合為ResultData物件,並序列化為JSON
            {
                Data = paged.ToList(),
                TotalCount = CustomerData.Count()
            }));
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
        public class ResultData
        {
            public object Data;
            public int TotalCount;
        }

執行畫面1:

執行畫面2:


參考資料:黑暗執行緒 AJAX式資料清單的新選擇Kendo UI GridTelerik Kendo UI Grid