在前面的文章中對于Kendo UI 中的Grid控件的一些基礎的配置和使用做了一些介紹，本文來看看如何將Kendo UI 中的Grid網格控件綁定到遠程數據。

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

創建Grid網格

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

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

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

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

<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裝換成一個網格。

添加一些Awesome數據

    現在可以對網格添加一些實際的數據了，在Kendo UI中提供了一個強大的數據綁定框架，網格可以立即的在線使用。我們只需要簡單的定義網格的數據源以及提供遠程的端點即可。

$(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
    });
});

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

$(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
    });
});

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

$(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
    });
});

美化網格

    剩下的列就可以使用一些指定的模版來顯示，通過移動模版到網格外，并設置模版的內容包含創建照片的用戶名稱、用于創建的過濾器以及照片說明。在最后一個單元格中，在模版中使用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原廠開發工程師舉行線上公開課，使用該控件的朋友千萬別錯過哦>>