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 ,模板的用法参见后面的文章。