HTML5 Web app开发工具Kendo UI Web中如何绑定网格到远程数据
在前面的文章中对于Kendo UI中的Grid控件的一些基础的配置和使用做了一些介绍，本文来看看如何将Kendo UI 中的Grid网格控件绑定到远程数据。
众所周知Grid网格控件是用户界面的一个重要的接口，尽管jQuery已经使得界面项目变得更加的容易，但是当网页设计时网格依旧是有一点玄乎。Kendo UI 中的Grid控件包含了快速模版引擎以及内置的数据源，使得我们可以非常快速的创建和运行网格。
创建Grid网格
在页面上首先需要一个网格，一个简单的描述了列表头的表格就可以了，如果你要自己做一个网格的话，你可以直接从表格开始。
添加一些Awesome数据
现在可以对网格添加一些实际的数据了，在Kendo UI中提供了一个强大的数据绑定框架，网格可以立即的在线使用。我们只需要简单的定义网格的数据源以及提供远程的端点即可。>>>示例代码
运行上面的代码，将会得到一个空的网格。这个主要是因为我们没有告诉网格每列中出现什么东西，要解决这个问题，只需要简单在Instagram响应中 指定在特定列中要展示的元素。如下在列数组中指定了field属性，所以现在网格中将会从响应中显示实际的数据。
>>>示例代码
（效果图）
现在有了数据，但是依然还有一些其他的问题。在网格中的图像列中有每个图像的URL链接，其他的列中显示的是对象的数组。现在需要告诉网格要显示的内容，对于图像就可以通过一个简单的在线模版来显示图像。
>>>示例代码
（效果图）
美化网格
剩下的列就可以使用一些指定的模版来显示，通过移动模版到网格外，并设置模版的内容包含创建照片的用户名称、用于创建的过滤器以及照片说明。如下在最后一个单元格中，在模版中使用JavaScript来以列的形式枚举显示评论。
（效果图）
HTML5 Web app开发工具Kendo UI Web中如何绑定网格到远程数据的更多相关文章
- HTML5 Web app开发工具Kendo UI Web中Grid网格控件的使用
Kendo UI Web中的Grid控件不仅可以显示数据,并对数据提供了丰富的支持,包括分页.排序.分组.选择等,同时还有着大量的配置选项.使用Kendo DataSource组件,可以绑定到本地的J ...
- Native App开发 与Web App开发（原生与web开发优缺点）
Native App开发 Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS.Android等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是 ...
- HTML5 UI框架Kendo UI Web教程：创建自定义组件（三）
Kendo UI Web包 含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等.在前面的2篇文章<HTML5 Web app开发工具Ke ...
- HTML5 UI框架Kendo UI Web自定义组件（一）
Kendo UI Web包含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等.在Kendo UI Web中如何创建自定义组件呢,在下面的文章中 ...
- HTML5 UI框架Kendo UI Web中如何实现Grid网格控件本地化
Kendo UI Web包含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等. 为了使得产品可以符合不同市场的本地化需求和语言,Kendo U ...
- HTML5 UI框架Kendo UI Web中如何创建自定义组件（二）
在前面的文章<HTML5 UI框架Kendo UI Web自定义组件(一)>中,对在Kendo UI Web中如何创建自定义组件作出了一些基础讲解,下面将继续前面的内容. 使用一个数据源 ...
- 微信公众平台开发：Web App开发入门
WebApp与Native App有何区别呢?Native App:1.开发成本非常大.一般使用的开发语言为JAVA.C++.Objective-C.2.更新体验较差.同时也比较麻烦.每一次发布新的版 ...
- 前端读者 | Web App开发入门
本文来自互联网 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词 - Web App(意为基于WEB形式的应用程序).业界关于Web App与Nativ ...
- HTML5来了：5个好用的混合式App开发工具
在残酷的移动互联网竞争环境下, HTML5技术一直受到各方关注,“HTML5颠覆原生 App”的争论也从未停止过,不管怎样HTML5生态的构建方兴未艾.不过对于移动开发者来说更关心的问题是如何低成本. ...
随机推荐
- C++中 引入虚基类的作用
当某类的部分或全部直接基类是从另一个基类共同派生而来时,这直接基类中,从上一级基类继承来的成员就拥有相同的名称,派生类的对象的这些同名成员在内存中同时拥有多个拷贝,同一个函数名有多个映射.可以使用作用 ...
- 为什么匿名内部类的参数必须为finalhttp://feiyeguohai.iteye.com/blog/1500108
1) 从程序设计语言的理论上:局部内部类(即:定义在方法中的内部类),由于本身就是在方法内部(可出现在形式参数定义处或者方法体处),因而访问方法中的局部变量(形式参数或局部变量)是天经地义的.是很自 ...
- NDK中可靠的获取JNIEnv*的方法
使用NDK时,几乎任何方法都需要一个JNIEnv来调用.这个类是和线程相关的,如何可靠的获取它? 首先,作为NDK的so,必然有一个地方是由android系统调用的,这个调用将带来一个JNIEnv参数 ...
- 基于apache的tomcat负载均衡和集群配置session共享
接上面的话题接着继续完善.为什么没接到上篇呢?原因很简单太长的文章不爱看!就像有人写了上千行的方法一样,不是逼得没办法谁爱看谁看,反正我不看. 期间我没有一次配置成功,从失败的开始说起, 1.准备ja ...
- MYSQL实现主从复制
mysql主(称master)从(称slave)复制的原理: (1).master将数据改变记录到二进制日志(binary log)中,也即是配置文件log-bin指定的文件(这些记录叫做 ...
- ssh 使用密钥与登录进行远程cp
scp -P 50000 -i abc.pem ubuntu@10.223.191.105://srv/log/webserver/main/nginx.access.2015-08-07.log ...
- C# Extension Methods
In C#, extension methods enable you to add methods to existing class without creating a new derived ...
- insert into linksvr or insert into from linksvr
通过链接服务器将实例A上的数据写入实例B,通常有以下两种方式--方案1:在实例A上执行insert into LinkForB.B..TableB select * from TableA--方案2: ...
- iOS，iOS对Android数据互通的规则
AppStore针对数据互通的规则:在AppStore上架的应用,苹果会按照3:7的比例抽取IAP( In-App Purchase)三成的收入,作为渠道费用 11.2 Apps utilizi ...
- zip命令的常用选项
zip命令的常用选项 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 大家都知道,在linux上一切皆文件,在实际生产环境中,如果我们需要部署一些系统的服务,我们会将一些软件包提前下 ...