http://blog.darkthread.net/post-2011-12-31-kendo-ui-grid.aspx
這幾年在專案中，針對表格式資料的呈現，我多已摒棄PostBack寫法，改用AJAX動態提取方式處理換頁、排列、重新查詢等資料查詢需求，如此可避免傳統PostBack時畫面會閃一下的缺點，提供使用者較流暢的操作感受。
前陣子寫過一篇筆記: Telerik RadGrid AJAX更新範例，介紹的便是應用Telerik的RadControls for ASP.NET AJAX元件庫，實現純AJAX式資料來源的GridView。不過，該元件基於ASP.NET AJAX Client Library並非jQuery，加上元件為ASP.NET控制項，不能安插於純HTML網頁中，限制較多；之前還介紹過另一套Telerik Extensions for ASP.NET MVC，是以jQuery為基礎打造的Client-Side Library，但它主要設計在ASP.NET MVC cshtml中被呼叫，若要在非ASP.NET MVC環境中使用，需要花功夫自己包Plug-In。(是的，這事兒我也幹了...)
本月初(2011/12)，Telerik推出了Kendo UI Framework，一套以HTML5 + jQuery打造的精緻UI元件組，依循如Telerik RadControls for ASP.NET的傳統，照例網羅了日期選擇器、頁籤、選單、Grid、TreeView... 等網頁開發會用到的大小控制項，一方面善用HTML5 + CSS3的威力，另一方面繼續保持跨平台相容(跨IE, Firefox, Chrome, Safari, Opera等瀏覽器, 但HTML5支援度較差的IE7/IE8也OK，還支援WP7, iOS及Android等行動裝置)，看起來是純Client-Side元件的一項不錯選擇。
在授權上，Kendo UI跟Extensions for ASP.NET MVC一樣採雙授權方式: 商業版本可享有技術支援，每月更新，並可包在商品中發行販售；GPL授權則提供每季更新的開放源碼，若只應用在自己開發的網站中，不會再將網站程式本體作為商品販售散佈，理論上均可自由取得及修改，即使網路對外營運也在合法授權範圍內。(網站引用GPL元件授權議題可參見上回討論)
從此，要在網站專案中實現AJAX式的GridView，又多了一項選擇。這裡就依著上回Telerik RadGrid AJAX更新範例的規格，改用Kendo UI Grid來實做驗證一番! 如下圖，分頁、排序、關鍵字查詢功能都不是問題，看來足以滿足專案的基本需求。
Grid1.htm程式碼如下:
排版顯示 純文字 <!DOCTYPE html> <html> <head> <title>Grid Lab 1</title> <!--In the header of your page, paste the following for Kendo styles--> <link href="../styles/kendo.common.min.css" rel="stylesheet" type="text/css" /> <link href="../styles/kendo.default.min.css" rel="stylesheet" type="text/css" /> <!--Then paste the following for Kendo scripts--> <script src="../js/jquery.min.js" type="text/javascript"></script> <script src="../js/kendo.all.min.js" type="text/javascript"></script> <style> body { font-size: 9pt; } #dvGrid { width: 500px; } span.hi-lite { color: red; } #dvGrid th.k-header { text-align: center } </style> <script> $(function () { //建立資料來源物件 var dataSrc = new kendo.data.DataSource({ transport: { read: { //以下其實就是$.ajax的參數 type: "POST", url: "JsonDataSrc.ashx", dataType: "json", data: { //額外傳至後方的參數 keywd: function () { return $("#tKeyword").val(); } } } }, schema: { //取出資料陣列 data: function (d) { return d.Data; }, //取出資料總筆數(計算頁數用) total: function (d) { return d.TotalCount; } }, pageSize: 10, serverPaging: true, serverSorting: true }); //JSON日期轉換 var dateRegExp = /^\/Date\((.*?)\)\/$/; window.toDate = function (value) { var date = dateRegExp.exec(value); return new Date(parseInt(date[1])); } $("#dvGrid").kendoGrid({ dataSource: dataSrc, columns: [ { field: "UserNo", title: "會員編號" }, { field: "UserName", title: "會員名稱", template: '#= "<span class=\\"u-name\\">" + UserName + "</span>" #' }, { field: "RegDate", title: "加入日期", template: '#= kendo.toString(toDate(RegDate), "yyyy/MM/dd")#' }, { field: "Points", title: "累積點數" }, ], sortable: true, pageable: true, dataBound: function () { //AJAX資料Bind完成後觸發 var kw = $("#tKeyword").val(); //若有設關鍵字，做Highlight處理 if (kw.length > 0) { var re = new RegExp(kw, "g"); $(".u-name").each(function () { var $td = $(this); $td.html($td.text() .replace(re, "<span class='hi-lite'>$&</span>")); }); } } }); //按下查詢鈕 $("#bQuery").click(function () { //要求資料來源重新讀取(並指定切至第一頁) dataSrc.read({ page: 1, skip: 0 }); //Grid重新顯示資料 2013-07-19更正，以下可省略 //$("#dvGrid").data("kendoGrid").refresh(); }); }); </script> </head> <body> <div style="padding: 10px;"> 關鍵字: <input id="tKeyword" /><input type="button" value="查詢" id="bQuery" /> </div> <div id="dvGrid"></div> </body> </html>後端我寫了一個JsonDataSrc.ashx來負責資料供給，其中程式邏輯與上回RadGrid版本幾乎完全相同。(只要能正確傳回JSON即可，要改寫成PHP、Ruby應該也不會是難事)
排版顯示 純文字 <%@ WebHandler Language="C#" Class="JsonDataSrc" %> using System; using System.Web; using System.Web.Script.Serialization; using System.Collections.Generic; using System.Drawing; using System.Reflection; using System.Linq; public class JsonDataSrc : IHttpHandler { //模擬資料物件 public class SimMemberInfo { public string UserNo; //會員編號 public string UserName; //會員名稱 public DateTime RegDate; //註冊日期 public int Points; //累積點數 } static List<SimMemberInfo> _SimuDataStore = null; //結果物件 public class ResultData { public object Data; public int TotalCount; } public void ProcessRequest (HttpContext context) { if (_SimuDataStore == null) { Random rnd = new Random(); //借用具名顏色名稱來產生隨機資料 string[] colorNames = typeof(Color) .GetProperties(BindingFlags.Static | BindingFlags.Public) .Select(o => o.Name).ToArray(); _SimuDataStore = colorNames .Select(cn => new SimMemberInfo() { UserNo = string.Format("C{0:00000}", rnd.Next(99999)), UserName = cn, RegDate = DateTime.Today.AddDays(-rnd.Next(1000)), Points = rnd.Next(9999) }).ToList(); } string keywd = context.Request["keywd"]; string sortField = context.Request["sort[0][field]"]; string sortDir = context.Request["sort[0][dir]"]; //指定關鍵字時，使用Contains()對UserName進行比對 var res = _SimuDataStore.Where(o => string.IsNullOrEmpty(keywd) || o.UserName.Contains(keywd)); if (!string.IsNullOrEmpty(sortField)) { //宣告一個函數可傳回SimMemberInfo之指定屬性值用於依動態欄位排序 Func<SimMemberInfo, string, string> GetColString = (o, c) => { switch (c) { case "UserNo": return o.UserNo; case "UserName": return o.UserName; case "RegDate": return o.RegDate.ToString("yyyyMMdd"); case "Points": return o.Points.ToString(); default: throw new ArgumentException(); } }; if (sortDir == "asc") res = res.OrderBy(o => GetColString(o, sortField)); else res = res.OrderByDescending(o => GetColString(o, sortField)); } JavaScriptSerializer jss = new JavaScriptSerializer(); context.Response.ContentType = "text/plain"; 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 = res.Skip(skip).Take(take); context.Response.Write(jss.Serialize(new ResultData() { Data = paged.ToList(), TotalCount = res.Count() })); } public bool IsReusable { get { return false; } } }想馬上實際動手玩的朋友可以試試上述範例程式的線上版。
寫完2011年最後一篇文囉! 準備迎接2012，祝大家新年快樂~~
