在前面的文章中對于Kendo UI 中的Grid控件的一些基礎(chǔ)的配置和使用做了一些介紹，本文來看看如何將Kendo UI 中的Grid網(wǎng)格控件綁定到遠(yuǎn)程數(shù)據(jù)。

    眾所周知Grid網(wǎng)格控件是用戶界面的一個重要的接口，盡管jQuery已經(jīng)使得界面項目變得更加的容易，但是當(dāng)網(wǎng)頁設(shè)計時網(wǎng)格依舊是有一點玄乎。Kendo UI 中的Grid控件包含了快速模版引擎以及內(nèi)置的數(shù)據(jù)源，使得我們可以非常快速的創(chuàng)建和運行網(wǎng)格。

創(chuàng)建Grid網(wǎng)格

    在頁面上首先需要一個網(wǎng)格，一個簡單的描述了列表頭的表格就可以了，如果你要自己做一個網(wǎng)格的話，你可以直接從表格開始。

<table id="grid">
    <thead>
        <tr>
            <th>
                
            </th>
            <th>
                Details
            </th>
            <th>
                Comments
            </th>
    </thead>
    <tbody>
    <td colspan="3"></td>
    </tbody>
</table>

    現(xiàn)在需要將我們的div成為網(wǎng)格，這個將會需要kendo.common.min.css。同時由于Kendo UI是基于jQuery平臺構(gòu)建，所以也需要jQuery。由于Kendo UI依賴于jQuery，最后還需要kendo.all.min.js引用，并且必須包含jQuery引用。

    為了簡單起見，這里是作為CDN引用的所有腳本標(biāo)簽，簡單的復(fù)制粘貼就可以使用。

<link href="//cdn.kendostatic.com/2011.2.804/styles/kendo.common.min.css" rel="stylesheet" />
<link href="//cdn.kendostatic.com/2011.2.804/styles/kendo.kendo.min.css" rel="Stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="//cdn.kendostatic.com/2011.2.804/js/kendo.all.min.js" ></script>

    在document.ready() jQuery功能中，可以將div裝換成一個網(wǎng)格。

添加一些Awesome數(shù)據(jù)

    現(xiàn)在可以對網(wǎng)格添加一些實際的數(shù)據(jù)了，在Kendo UI中提供了一個強(qiáng)大的數(shù)據(jù)綁定框架，網(wǎng)格可以立即的在線使用。我們只需要簡單的定義網(wǎng)格的數(shù)據(jù)源以及提供遠(yuǎn)程的端點即可。

$(function() {
    $("#grid").kendoGrid({
        dataSource: {
            transport: {
                read: {
                   url: "//api.instagram.com/v1/media/popular?client_id=4e0171f9fcfc4015bb6300ed91fbf719&count=25",
                    dataType: "jsonp"
                }
            },
            schema: {
                  data: "data"
            }
        },
        height: 500,
        scrollable: true,
        selectable: true
    });
});

    現(xiàn)在運行上面的代碼，將會得到一個空的網(wǎng)格。這個主要是因為我們沒有告訴網(wǎng)格每列中出現(xiàn)什么東西，要解決這個問題，只需要簡單在Instagram響應(yīng)中 指定在特定列中要展示的元素。如下在列數(shù)組中指定了field屬性，所以現(xiàn)在網(wǎng)格中將會從響應(yīng)中顯示實際的數(shù)據(jù)。

$(function() {
    $("#grid").kendoGrid({
        columns: [{ field: 'images.thumbnail.url' }, { field: 'user.username' }, { field: 'comments' }],
        dataSource: {
            transport: {
                read: {
                   url: "//api.instagram.com/v1/media/popular?client_id=4e0171f9fcfc4015bb6300ed91fbf719&count=25",
                    dataType: "jsonp"
                }
            },
            schema: {
                  data: "data"
            }
        },
        height: 500,
        scrollable: true,
        selectable: true
    });
});

    現(xiàn)在有了數(shù)據(jù)，但是依然還有一些其他的問題。在網(wǎng)格中的圖像列中有每個圖像的URL鏈接，其他的列中顯示的是對象的數(shù)組。現(xiàn)在需要告訴網(wǎng)格要顯示的內(nèi)容，對于圖像就可以通過一個簡單的在線模版來顯示圖像。

$(function() {
    $("#grid").kendoGrid({
        columns: [{ template: '<img src="<#= images.thumbnail.url #>" />' }, 
                  { field: 'user.username' }, { field: 'comments' }],
        dataSource: {
            transport: {
                read: {
                   url: "//api.instagram.com/v1/media/popular?client_id=4e0171f9fcfc4015bb6300ed91fbf719&count=25",
                    dataType: "jsonp"
                }
            },
            schema: {
                  data: "data"
            }
        },
        height: 500,
        scrollable: true,
        selectable: true
    });
});

美化網(wǎng)格

    剩下的列就可以使用一些指定的模版來顯示，通過移動模版到網(wǎng)格外，并設(shè)置模版的內(nèi)容包含創(chuàng)建照片的用戶名稱、用于創(chuàng)建的過濾器以及照片說明。在最后一個單元格中，在模版中使用JavaScript來以列的形式枚舉顯示評論。

$(function() {
    $("#grid").kendoGrid({
        rowTemplate: kendo.template($("#detailsTemplate").html()),
        dataSource: {
            transport: {
                read: {
                   url: "//api.instagram.com/v1/media/popular?client_id=4e0171f9fcfc4015bb6300ed91fbf719&count=25",
                    dataType: "jsonp"
                }
            },
            schema: {
                  data: "data"
            }
        },
        height: 500,
        scrollable: true,
        selectable: true
    });
});

>>>Kendo UI Web下載

慧都特邀Kendo UI原廠開發(fā)工程師舉行線上公開課，使用該控件的朋友千萬別錯過哦>>