Kendo UI开发教程(6): Kendo DataSource 概述

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