KendoUI系列：Grid

　　1、基本使用

<div id="grid"></div>

<link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.default.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/kendo/2014.1.318/jquery.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/kendo/2014.1.318/kendo.web.min.js")" type="text/javascript"></script>

<script type="text/javascript">
    $(function () {
        $("#grid").kendoGrid({
            dataSource: {
                transport: {
                    dataType: "json",
                    read: "/Province/GetProvinceList"
                },
                pageSize: 10,
            },
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            columns: [{
                field: "ProvinceID",
                title: "省份ID",
                width: 200
            }, {
                field: "ProvinceNo",
                title: "省份編號"
            }, {
                field: "ProvinceName",
                title: "省份名稱"
            }]
        });
    });
</script>

　　效果預覽：

　　說明：pageSizes設定可選擇每頁顯示的條數，buttonCount設定最多顯示的頁數，超出時則顯示...。以上實現方式第一次從服務端載入出全部的資料，Kendo UI Grid進行客戶端分頁。

　　2、繫結本地資料

<div id="grid"></div>

<script type="text/javascript">
    $(function () {
        var provinces = [{ "ProvinceID": 1, "ProvinceNo": "110000", "ProvinceName": "北京市" }, { "ProvinceID": 2, "ProvinceNo": "120000", "ProvinceName": "天津市" }, { "ProvinceID": 3, "ProvinceNo": "130000", "ProvinceName": "河北省" }, { "ProvinceID": 4, "ProvinceNo": "140000", "ProvinceName": "山西省" }, { "ProvinceID": 5, "ProvinceNo": "150000", "ProvinceName": "內蒙古" }, { "ProvinceID": 6, "ProvinceNo": "210000", "ProvinceName": "遼寧省" }, { "ProvinceID": 7, "ProvinceNo": "220000", "ProvinceName": "吉林省" }, { "ProvinceID": 8, "ProvinceNo": "230000", "ProvinceName": "黑龍江" }, { "ProvinceID": 9, "ProvinceNo": "310000", "ProvinceName": "上海市" }, { "ProvinceID": 10, "ProvinceNo": "320000", "ProvinceName": "江蘇省" }, { "ProvinceID": 11, "ProvinceNo": "330000", "ProvinceName": "浙江省" }, { "ProvinceID": 12, "ProvinceNo": "340000", "ProvinceName": "安徽省" }, { "ProvinceID": 13, "ProvinceNo": "350000", "ProvinceName": "福建省" }, { "ProvinceID": 14, "ProvinceNo": "360000", "ProvinceName": "江西省" }, { "ProvinceID": 15, "ProvinceNo": "370000", "ProvinceName": "山東省" }, { "ProvinceID": 16, "ProvinceNo": "410000", "ProvinceName": "河南省" }, { "ProvinceID": 17, "ProvinceNo": "420000", "ProvinceName": "湖北省" }, { "ProvinceID": 18, "ProvinceNo": "430000", "ProvinceName": "湖南省" }, { "ProvinceID": 19, "ProvinceNo": "440000", "ProvinceName": "廣東省" }, { "ProvinceID": 20, "ProvinceNo": "450000", "ProvinceName": "廣西" }, { "ProvinceID": 21, "ProvinceNo": "460000", "ProvinceName": "海南省" }, { "ProvinceID": 22, "ProvinceNo": "500000", "ProvinceName": "重慶市" }, { "ProvinceID": 23, "ProvinceNo": "510000", "ProvinceName": "四川省" }, { "ProvinceID": 24, "ProvinceNo": "520000", "ProvinceName": "貴州省" }, { "ProvinceID": 25, "ProvinceNo": "530000", "ProvinceName": "雲南省" }, { "ProvinceID": 26, "ProvinceNo": "540000", "ProvinceName": "西藏" }, { "ProvinceID": 27, "ProvinceNo": "610000", "ProvinceName": "陝西省" }, { "ProvinceID": 28, "ProvinceNo": "620000", "ProvinceName": "甘肅省" }, { "ProvinceID": 29, "ProvinceNo": "630000", "ProvinceName": "青海省" }, { "ProvinceID": 30, "ProvinceNo": "640000", "ProvinceName": "寧夏" }, { "ProvinceID": 31, "ProvinceNo": "650000", "ProvinceName": "新疆" }, { "ProvinceID": 32, "ProvinceNo": "710000", "ProvinceName": "臺灣省" }, { "ProvinceID": 33, "ProvinceNo": "810000", "ProvinceName": "香港" }, { "ProvinceID": 34, "ProvinceNo": "820000", "ProvinceName": "澳門" }];

        $("#grid").kendoGrid({
            dataSource: {
                data: provinces,
                schema: {
                    model: {
                        fields: {
                            ProvinceID: { type: "number" },
                            ProvinceNo: { type: "string" },
                            ProvinceName: { type: "string" }
                        }
                    }
                },
                pageSize: 10
            },
            pageable: {
                input: true,
                numeric: false,
                messages: {
                    display: "{0} - {1} 共 {2} 條資料",
                    empty: "沒有資料",
                    page: "頁",
                    of: "/ {0}",
                    itemsPerPage: "條每頁",
                    first: "第一頁",
                    previous: "前一頁",
                    next: "下一頁",
                    last: "最後一頁",
                    refresh: "重新整理"
                }
            },
            columns: [{
                field: "ProvinceID",
                title: "省份ID"
            }, {
                field: "ProvinceNo",
                title: "省份編號"
            }, {
                field: "ProvinceName",
                title: "省份名稱"
            }]
        });
    });
</script>

　　3、繫結遠端資料

<div id="grid"></div>

<script type="text/javascript">
    $(function () {
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    type: "post",
                    url: "/Province/GetProvincePagedList",
                    dataType: "json",
                    contentType: "application/json"
                },
                parameterMap: function (options, operation) {
                    if (operation == "read") {
                        var parameter = {
                            page: options.page,
                            pageSize: options.pageSize
                        };
                        return kendo.stringify(parameter);
                    }
                }
            },
            batch: true,
            pageSize: 10,
            schema: {
                data: function (d) {
                    return d.data;
                },
                total: function (d) {
                    return d.total;
                }
            },
            serverPaging: true
        });

        $("#grid").kendoGrid({
            dataSource: dataSource,
            pageable: {
                pageSizes: true,
                buttonCount: 5,
                messages: {
                    display: "顯示{0}-{1}條，共{2}條",
                    empty: "沒有資料",
                    page: "頁",
                    of: "/ {0}",
                    itemsPerPage: "條/頁",
                    first: "第一頁",
                    previous: "前一頁",
                    next: "下一頁",
                    last: "最後一頁",
                    refresh: "重新整理"
                }
            },
            columns: [{
                field: "ProvinceID",
                title: "省份ID",
                width: 150
            }, {
                field: "ProvinceNo",
                title: "省份編號"
            }, {
                field: "ProvinceName",
                title: "省份名稱"
            }]
        });
    });
</script>

public ActionResult GetProvincePagedList(int page, int pageSize)
{
    ctx.Configuration.ProxyCreationEnabled = false;

    return Json(new { data = ctx.Provinces.OrderBy(p => p.ProvinceID).Skip((page - 1) * pageSize).Take(pageSize), total = ctx.Provinces.Count() }, JsonRequestBehavior.AllowGet);
}

　　效果預覽：

　　要點說明：

　　1>、dataSource中read的type一定要設定為post，不能為預設的get，否則服務端無法接收page及pageSize引數。

　　2>、dataSource中serverPaging需要設定為true，啟動服務端分頁。