Kendo 的数据源支持本地数据源(JavaScript 对象数组),或者远程数据源(XML, JSON, JSONP),支持CRUD操作(创建,读取,更新和删除操作),并支持排序,分页,过滤,分组和集合等。

准备开始

下面创建一个本地数据源。

1 var movies = [ {
2       title: "Star Wars: A New Hope",
3       year: 1977
4    }, {
5      title: "Star Wars: The Empire Strikes Back",
6      year: 1980
7    }, {
8      title: "Star Wars: Return of the Jedi",
9      year: 1983
10    }
11 ];
12 var localDataSource = new kendo.data.DataSource({data: movies});

创建一个远程数据源 (Twitter)

1 var dataSource = new kendo.data.DataSource({
2     transport: {
3         read: {
4             // the remote service url
5             url: "http://search.twitter.com/search.json",
6  
7             // JSONP is required for cross-domain AJAX
8             dataType: "jsonp",
9  
10             // additional parameters sent to the remote service
11             data: {
12                 q: "html5"
13             }
14         }
15     },
16     // describe the result format
17     schema: {
18         // the data which the data source will be bound to is in the "results" field
19         data: "results"
20     }
21 });

绑定数据源到UI组件

Kendo UI组件很多都支持数据绑定 ,UI组件绑定的数据源可以在配置UI组件时设置,或是多个UI组件共享同一个数据源。

创建UI组件时设置DataSource属性

1 $("#chart").kendoChart({
2     title: {
3         text: "Employee Sales"
4     },
5     dataSource: new kendo.data.DataSource({
6         data: [
7         {
8             employee: "Joe Smith",
9             sales: 2000
10         },
11         {
12             employee: "Jane Smith",
13             sales: 2250
14         },
15         {
16             employee: "Will Roberts",
17             sales: 1550
18         }]
19     }),
20     series: [{
21         type: "line",
22         field: "sales",
23         name: "Sales in Units"
24     }],
25     categoryAxis: {
26         field: "employee"
27     }
28 });

使用共享的远程数据源

1 var sharableDataSource = new kendo.data.DataSource({
2     transport: {
3         read: {
4             url: "data-service.json",
5             dataType: "json"
6         }
7     }
8 });
9  
10 // Bind two UI widgets to same DataSource
11 $("#chart").kendoChart({
12     title: {
13         text: "Employee Sales"
14     },
15     dataSource: sharableDataSource,
16     series: [{
17         field: "sales",
18         name: "Sales in Units"
19     }],
20     categoryAxis: {
21         field: "employee"
22     }
23 });
24  
25 $("#grid").kendoGrid({
26     dataSource: sharableDataSource,
27         columns: [
28         {
29             field: "employee",
30             title: "Employee"
31         },
32         {
33             field: "sales",
34             title: "Sales",
35             template: '#= kendo.toString(sales, "N0") #'
36     }]
37 });

这个例子使用了模板 template ,模板的用法参见后面的文章。

Kendo UI开发教程(6): Kendo DataSource 概述的更多相关文章

  1. Kendo UI开发教程(9): Kendo UI Validator 概述

    Kendo UI Validator 支持了客户端校验的便捷方法,它基于HTML 5 的表单校验功能,支持很多内置的校验规则,同时也提供了自定义规则的便捷方法. 完整的Kendo UI 的Valida ...

  2. Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events

    本篇和Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click类似,为事件绑定的一般形式.Events绑定支持将ViewModel的方法绑定到DOM元素的事件处理(如鼠标事 ...

  3. Kendo UI开发教程(7): Kendo UI 模板概述

    Kendo UI 框架提供了一个易用,高性能的JavaScript模板引擎.通过模板可以创建一个HTML片段然后可以和JavaScript数据合并成最终的HTML元素. Kendo 模板侧重于UI显示 ...

  4. Kendo UI开发教程(8): Kendo UI 特效概述

    Kendo UI Fx 提供了一个丰富,可扩展,性能经过优化的工具集合用来完成HTML元素的过渡显示.每种特效近可能的使用CSS Transition ,对于一些老版本浏览器使用修改属性的方法作为补充 ...

  5. Kendo UI开发教程(22): Kendo MVVM 数据绑定(十一) Value

    Value绑定可以把ViewModel的某个属性绑定到DOM元素或某个UI组件的Value属性.当用户修改DOM元素或UI组件的值时,绑定的ViewModel的值也随之发生改名.同样,如果ViewMo ...

  6. Kendo UI开发教程(21): Kendo MVVM 数据绑定(十) Source

    Source绑定可以把ViewModel的值和由Kendo模板定义的目标元素绑定,如果ViewModel的值发生变化,被绑定的目标元素也随之发生变化.模板由属性data-template指定,它的值为 ...

  7. Kendo UI开发教程(20): Kendo MVVM 数据绑定(九) Text

    Text绑定可以使用ViewModel来设置DOM元素的文本属性,如果需要设置input,textarea,或select的显示,需要使用value属性. 1 <span data-bind=& ...

  8. Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click

    Click绑定可以把由ViewModel定义的方法不绑定到目标DOM的click事件.当点击目标DOM元素时触发ViewModel的对应方法.例如: 使用Click绑定 1 <div id=&q ...

  9. [置顶] Kendo UI开发教程: Kendo UI 示例及总结

    前面基本介绍完Kendo UI开发的基本概念和开发步骤,Kendo UI的示例网站为http://demos.kendoui.com/ ,包含了三个部分 Web DemoMobile DemoData ...

随机推荐

  1. 我的MYSQL学习心得(十一)

    原文:我的MYSQL学习心得(十一) 我的MYSQL学习心得(十一) 我的MYSQL学习心得(一) 我的MYSQL学习心得(二) 我的MYSQL学习心得(三) 我的MYSQL学习心得(四) 我的MYS ...

  2. 批量执行SQL文件

    原文:批量执行SQL文件 摘要:很多时候我们在做系统升级时需要将大量的.sql文件挨个执行,十分不方便.而且考虑到执行顺序和客服的操作方便性,能不能找到一种简单的方法来批量执行这些sql文件呢? 主要 ...

  3. 砸金蛋:jQuery+PHP实现的砸金蛋中奖程序

    原文 砸金蛋:jQuery+PHP实现的砸金蛋中奖程序 砸金蛋被广泛应用于庆典活动.商家促销.电视娱乐等场合,它的趣味.悬念能迅速活跃现场气氛.同样,我们也可以将砸金蛋应用到WEB网站上,用于开展线上 ...

  4. Model Validation in Asp.net MVC

    原文:Model Validation in Asp.net MVC 本文用于记录Pro ASP.NET MVC 3 Framework中阐述的数据验证的方式. 先说服务器端的吧.最简单的一种方式自然 ...

  5. 使用.NET REACTOR制作软件许可证

    原文:使用.NET REACTOR制作软件许可证 软件下载地址:http://www.eziriz.com/downloads.htm 做一个简单的许可证系统,下面是具体步骤: 1,  OPEN AS ...

  6. MVC页面声命周期

    MVC页面声命周期 ASP.Net请求处理机制初步探索之旅 - Part 4 WebForm页面生命周期   开篇:上一篇我们了解了所谓的请求处理管道,在众多的事件中微软开放了19个重要的事件给我们, ...

  7. WimMaker 2.0 (2013.10) WIM制作工具

    WimMaker 2.0 (2013.10) WIM制作工具 可用于制作PE启动内核的Wim文件 说明: 因本软件使用.NET2.0制作,故主要用于制作WIM映像不用于备份还原系统(虽可用,但不专业, ...

  8. POJ2533 Longest Ordered Subsequence 【最长递增子序列】

    Longest Ordered Subsequence Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 32192   Acc ...

  9. Web面试之JQuery

    程序员Web面试之JQuery   又到了一年一度的毕业季了,青春散场,却等待下一场开幕. 在求职大军中,IT行业的程序员.码农是工科类大学生的热门选择之一, 尤其是近几年Web的如火如荼,更是吸引了 ...

  10. VS2013 Update 2正式发布 .NET Framework“云优先、移动优先”

    2013 Update 2正式发布 .NET Framework“云优先.移动优先” 投递人 itwriter 发布于 2014-05-13 12:33 评论(19) 有2155人阅读  原文链接   ...