HTML5 開發工具Kendo UI Web中如何綁定網格到遠程數據

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

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

建立Grid網格

    在頁面上首先須要一個網格，一個簡單的描述了列表頭的表格就能夠了，若是你要本身作一個網格的話，你能夠直接從表格開始。

>>>建立網格示例代碼

添加一些Awesome數據

    如今能夠對網格添加一些實際的數據了，在Kendo UI中提供了一個強大的數據綁定框架，網格能夠當即的在線使用。咱們只須要簡單的定義網格的數據源以及提供遠程的端點便可。>>> 示例代碼

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

>>>示例代碼

（效果圖）

  如今有了數據，可是依然還有一些其餘的問題。在網格中的圖像列中有每一個圖像的URL連接，其餘的列中顯示的是對象的數組。如今須要告訴網格要顯示的內容，對於圖像就能夠經過一個簡單的在線模版來顯示圖像。

>>>示例代碼

（效果圖）

美化網格

    剩下的列就可使用一些指定的模版來顯示，經過移動模版到網格外，並設置模版的內容包含建立照片的用戶名稱、用於建立的過濾器以及照片說明。以下在最後一個單元格中，在模版中使用JavaScript來以列的形式枚舉顯示評論。

（效果圖）

>>> Kendo UI Web下載