在前面的文章中对于Kendo UI中的Grid控件的一些基础的配置和使用做了一些介绍，本文来看看如何将Kendo UI 中的Grid网格控件绑定到远程数据。

众所周知Grid网格控件是用户界面的一个重要的接口，尽管jQuery已经使得界面项目变得更加的容易，但是当网页设计时网格依旧是有一点玄乎。Kendo UI 中的Grid控件包含了快速模版引擎以及内置的数据源，使得我们可以非常快速的创建和运行网格。

创建Grid网格

在页面上首先需要一个网格，一个简单的描述了列表头的表格就可以了，如果你要自己做一个网格的话，你可以直接从表格开始。

>>>创建网格示例代码

添加一些Awesome数据

现在可以对网格添加一些实际的数据了，在Kendo UI中提供了一个强大的数据绑定框架，网格可以立即的在线使用。我们只需要简单的定义网格的数据源以及提供远程的端点即可。>>>示例代码

运行上面的代码，将会得到一个空的网格。这个主要是因为我们没有告诉网格每列中出现什么东西，要解决这个问题，只需要简单在Instagram响应中 指定在特定列中要展示的元素。如下在列数组中指定了field属性，所以现在网格中将会从响应中显示实际的数据。

>>>示例代码

（效果图）

现在有了数据，但是依然还有一些其他的问题。在网格中的图像列中有每个图像的URL链接，其他的列中显示的是对象的数组。现在需要告诉网格要显示的内容，对于图像就可以通过一个简单的在线模版来显示图像。

>>>示例代码

（效果图）

美化网格

剩下的列就可以使用一些指定的模版来显示，通过移动模版到网格外，并设置模版的内容包含创建照片的用户名称、用于创建的过滤器以及照片说明。如下在最后一个单元格中，在模版中使用JavaScript来以列的形式枚举显示评论。

（效果图）

>>>Kendo UI Web下载

HTML5 Web app开发工具Kendo UI Web中如何绑定网格到远程数据的更多相关文章

  1. HTML5 Web app开发工具Kendo UI Web中Grid网格控件的使用

    Kendo UI Web中的Grid控件不仅可以显示数据,并对数据提供了丰富的支持,包括分页.排序.分组.选择等,同时还有着大量的配置选项.使用Kendo DataSource组件,可以绑定到本地的J ...

  2. Native App开发 与Web App开发（原生与web开发优缺点）

    Native App开发 Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS.Android等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是 ...

  3. HTML5 UI框架Kendo UI Web教程：创建自定义组件（三）

    Kendo UI Web包 含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等.在前面的2篇文章<HTML5 Web app开发工具Ke ...

  4. HTML5 UI框架Kendo UI Web自定义组件（一）

    Kendo UI Web包含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等.在Kendo UI Web中如何创建自定义组件呢,在下面的文章中 ...

  5. HTML5 UI框架Kendo UI Web中如何实现Grid网格控件本地化

    Kendo UI Web包含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等. 为了使得产品可以符合不同市场的本地化需求和语言,Kendo U ...

  6. HTML5 UI框架Kendo UI Web中如何创建自定义组件（二）

    在前面的文章<HTML5 UI框架Kendo UI Web自定义组件(一)>中,对在Kendo UI Web中如何创建自定义组件作出了一些基础讲解,下面将继续前面的内容. 使用一个数据源 ...

  7. 微信公众平台开发：Web App开发入门

    WebApp与Native App有何区别呢?Native App:1.开发成本非常大.一般使用的开发语言为JAVA.C++.Objective-C.2.更新体验较差.同时也比较麻烦.每一次发布新的版 ...

  8. 前端读者 | Web App开发入门

    本文来自互联网 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词 - Web App(意为基于WEB形式的应用程序).业界关于Web App与Nativ ...

  9. HTML5来了：5个好用的混合式App开发工具

    在残酷的移动互联网竞争环境下, HTML5技术一直受到各方关注,“HTML5颠覆原生 App”的争论也从未停止过,不管怎样HTML5生态的构建方兴未艾.不过对于移动开发者来说更关心的问题是如何低成本. ...

随机推荐

  1. 通过iTop Webservice接口丰富OQL的功能

    通过Python调用iTop的Webservice接口: #!/usr/bin/env python #coding: utf-8 import requests import json itopur ...

  2. Linux系统glibc库版本信息查看

    原文链接:http://www.jbxue.com/LINUXjishu/29946.html 1. CentOS /lib/i386-linux-gnu/libc.so. 或 rpm -qi gli ...

  3. ubuntu下Pycharm安装及配置

    从知乎里看到了Pycharm的介绍,感觉还不错,记录下今天的安装过程 1.从http://www.jetbrains.com/pycharm/download/下载最新的Pycharm 2.在终端中进 ...

  4. [转]你不需要jQuery

    完全没有否定jQuery的意思,jQuery是一个神奇的.非常有用的工具,可以节省我们大量的时间. 但是,有些时候,我们只需要jQuery的一个小功能,来完成一个小任务,完全没有必要加载整个jQuer ...

  5. Windows下wnmp相关配置

    #wnmp mysqld -install net start mysql memcached -d uninstall memcached -d install net start memcache ...

  6. sqlserver 索引的一些总结【转】

    1.1.1 摘要 如果说要对数据库进行优化,我们主要可以通过以下五种方法,对数据库系统进行优化. 1. 计算机硬件调优 2. 应用程序调优 3. 数据库索引优化 4. SQL语句优化 5. 事务处理调 ...

  7. iOS 导航栏返回的相关跳转

    导航条跳转页面的考虑 对于用navigationcontroller来跳转页面的时候,其实是执行堆栈的进栈和出栈的操作,要想释放内存,那么在来回跳转的时候,就要考虑几个问题了 1 A =>B=& ...

  8. eclipse下导入jdk源码

    一直想好好看看jdk的源码,虽然可以直接解压jdk下的src看,但是终究不方便!后来发现可以导入到eclipse中,就在网上找了一些方法,下面就和大家分共享: step1:打开eclipse选择Win ...

  9. lucence.net+盘古分词

    第一步: 添加盘古和lucence的dll引用 第二步: 拷贝Dict文件夹到项目  demo里面是Dictionaries 不过官方建议改成Dict 然后把所有项右击属性 改为“如果较新则复制” 第 ...

  10. Lua屏蔽对象方法和恢复的方法

    背景 对于OO思想实现的类, 对于某些场景需要屏蔽某些方法, 不让调用.过了这段场景, 就恢复这些类的方法, 可以调用. 例如: 工厂具有开工方法, 但是在晚上不允许开工, 所有在晚上这段时间, 见开 ...