AJAX式資料清單的新選擇-Kendo UI Grid
這幾年在專案中，針對表格式資料的呈現，我多已摒棄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重新顯示資料
$("#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，祝大家新年快樂~~
