Kendo 的数据源支持本地数据源(JavaScript 对象数组),或者远程数据源(XML, JSON, JSONP),支持CRUD操作(创建,读取,更新和删除操作),并支持排序,分页,过滤,分组和集合等。
准备开始
下面创建一个本地数据源。
2 |
title: "Star Wars: A New Hope" ,
|
5 |
title: "Star Wars: The Empire Strikes Back" ,
|
8 |
title: "Star Wars: Return of the Jedi" ,
|
12 |
var localDataSource = new kendo.data.DataSource({data: movies});
|
创建一个远程数据源 (Twitter)
1 |
var dataSource = new kendo.data.DataSource({
|
4 |
// the remote service url
|
5 |
url: "http://search.twitter.com/search.json" ,
|
7 |
// JSONP is required for cross-domain AJAX
|
10 |
// additional parameters sent to the remote service
|
16 |
// describe the result format
|
18 |
// the data which the data source will be bound to is in the "results" field
|
绑定数据源到UI组件
Kendo UI组件很多都支持数据绑定 ,UI组件绑定的数据源可以在配置UI组件时设置,或是多个UI组件共享同一个数据源。
创建UI组件时设置DataSource属性
1 |
$( "#chart" ).kendoChart({
|
5 |
dataSource: new kendo.data.DataSource({
|
12 |
employee: "Jane Smith" ,
|
16 |
employee: "Will Roberts" ,
|
23 |
name: "Sales in Units"
|
使用共享的远程数据源
1 |
var sharableDataSource = new kendo.data.DataSource({
|
4 |
url: "data-service.json" ,
|
10 |
// Bind two UI widgets to same DataSource
|
11 |
$( "#chart" ).kendoChart({
|
13 |
text: "Employee Sales"
|
15 |
dataSource: sharableDataSource,
|
18 |
name: "Sales in Units"
|
25 |
$( "#grid" ).kendoGrid({
|
26 |
dataSource: sharableDataSource,
|
35 |
template: '#= kendo.toString(sales, "N0") #'
|
这个例子使用了模板 template ,模板的用法参见后面的文章。