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下载