AJAX式資料清單的新選擇-Kendo UI Grid

标签: Kendo UI | 发表时间:2011-12-31 18:23 | 作者:Jeffrey
出处:http://blog.darkthread.net/blogs/darkthreadtw/default.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重新顯示資料
                $("#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,祝大家新年快樂~~

相关 [ajax kendo ui] 推荐:

AJAX式資料清單的新選擇-Kendo UI Grid

- - 黑暗執行緒
這幾年在專案中,針對表格式資料的呈現,我多已摒棄PostBack寫法,改用AJAX動態提取方式處理換頁、排列、重新查詢等資料查詢需求,如此可避免傳統PostBack時畫面會閃一下的缺點,提供使用者較流暢的操作感受. 前陣子寫過一篇筆記: Telerik RadGrid AJAX更新範例,介紹的便是應用Telerik的RadControls for ASP.NET AJAX元件庫,實現純AJAX式資料來源的GridView.

原生AJAX

- - Web前端 - ITeye博客
对象是ajax的基础,几乎所有的浏览器都支持他,只是创建方式不同,如IE5,IE6. 2、AJAX - 向服务器发送请求请求. 与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用. 然而,在以下情况中,请使用 POST 请求:. 无法使用缓存文件(更新服务器上的文件或数据库). 向服务器发送大量数据(POST 没有数据量限制).

初识Ajax

- - CSDN博客推荐文章
Ajax(Asynchronous JavaScript and XMLS异步JavaScript和XML)(“阿贾克斯”)技术. 完成页面的局部刷新,从而提升操作性能. AJAX 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术. 依赖的核心对象:XMLHttpRequest.

jquery ajax 跨域请求

- - 博客园_首页
使用 jquery 中的ajax  进行跨域请求. 说明:dataType 为  "jsonp"  ;type 只能为 GET.                    //处理错误. 后台处理代码 ValidAccountsExists.aspx.

ajax核心js代码

- - ITeye博客
                         //针对firefox,mozillar,opera,safari,IE7,IE8.                          //针对某些特定版本的mozillar浏览器的bug进行修正.                          //针对IE6,IE5.5,IE5.

[转] jQuery ui框架

- - CSDN博客Web前端推荐文章
   jQuery ui框架很多,除了官方提供的 jquery UI(如果你还不知道什么是 jQuery UI,请看 下载了jquery ui后如何使用),还有很多第三方提供的ui框架,因官方提供的jquery ui框架体积较大,所以很多人都不喜欢用,但不论是官方提供还是第三方提供,他们都是基于 jquery核心类库实现的ui框架.

UI框架选型

- - ITeye博客
  最近公司的一个新项目要进行UI框架的选型,我把选型的思路和过程跟大家分享一下.   在选型之前,我们先要定一下选型的标准,就像人生一样,想清楚“自己要的是什么”是最重要的.   选型的标准分为几部分:. 业务是根本,和大部分的技术一样,框架没有好坏之分,只有适合与不适合.         我们项目是一个通讯类的监控项目,用户群是移动、电信等运营商的运维人员,系统的特点是:.

反向Ajax,第1部分:Comet介绍

- 茫茫 - 译言-每日精品译文推荐
来源Reverse Ajax, Part 1: Introduction to Comet. web开发在过去的几年中有了很大的进展,我们已经远超了把静态网页链接在一起的做法,这种做法会引起浏览器的刷新,并且要等待页面的加载. 现在需要的是能够通过web来访问的完全动态的应用,这些应用通常需要尽可能的快,提供近乎实时的组件.

ajax后退解决方案(一)

- We_Get - 博客园-首页原创精华区
一、使用iframe,通过document.write产生历史. . 点击按钮后更新页面DOM(模拟ajax提交),会发现浏览器后退按钮可用了. 这种方式缺点是只支持IE和Firefox. 作者: snandy 发表于 2011-09-18 08:42 原文链接.

反向Ajax,第2部分:WebSocket

- KnightE - 译言-电脑/网络/数码科技
来源Reverse Ajax, Part 2: WebSockets. 时至今日,用户期待的是可通过web访问快速、动态的应用. 这一文章系列展示了如何使用反向Ajax(Reverse Ajax)技术来开发事件驱动的web应用. 系列的第1部分介绍了反向Ajax、轮询(polling)、流(streaming)、Comet和长轮询(long polling).