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生态的构建方兴未艾.不过对于移动开发者来说更关心的问题是如何低成本. ...
随机推荐
- Twentydaysgone
这个暑假,在学校呆了一个月,考了两次科目二,被驾校坑了五百块,四级又挂了,段位差点掉到白银 参加二十多天工作室的培训,学长直接带着做itheima的某某安全卫士,跟着视频也迷迷瞪瞪敲完了代码,一知半解 ...
- phpcms无刷新分页
控制器添加一个函数: 添加一个静态页面ajax_message.html,在页面中添加如下代码: 在要分页的页面(我的是"show"页面)中添加如上图代码: phpcms无刷新分页 ...
- IOS基础学习-2: UIButton
IOS基础学习-2: UIButton UIButton是一个标准的UIControl控件,UIKit提供了一组控件:UISwitch开关.UIButton按钮.UISegmentedContro ...
- PARALLEL PROCESSING
COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION
- ajax+表单验证+验证码生成例子
MainController.class.php <?php namespace AjaxYz\Controller; use Think\Controller; class MainContr ...
- angular模块和组件之间传递信息和操作流程的方法(笔记)
angular的模块之间,以及controller.directive等组件之间,是相对独立的,用以实现解耦合. 为实现相互之间传递信息及操作流程,有以下一些机制: 1.事件机制: $scope.$b ...
- 数据结构与算法C++描述学习笔记1、辗转相除——欧几里得算法
前面学了一个星期的C++,以前阅读C++代码有些困难,现在好一些了.做了一些NOI的题目,这也是一个长期的目标中的一环.做到动态规划的相关题目时发现很多问题思考不通透,所以开始系统学习.学习的第一本是 ...
- hive --service metastore 出现的问题
Could not create ServerSocket on address 0.0.0.0/0.0.0.0:9083 执行命令jps root@hadoopm:/usr# jps1763 Res ...
- ajax交互方法实现
AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个 ...
- 第四篇:白话tornado源码之褪去模板外衣的前戏
加班程序员最辛苦,来张图醒醒脑吧! ... ... ... 好了,醒醒吧,回归现实看代码了!! 执行字符串表示的函数,并为该函数提供全局变量 本篇的内容从题目中就可以看出来,就是为之后剖析tornad ...