Kendo的數(shù)據(jù)源支持本地?cái)?shù)據(jù)源（JavaScript對(duì)象數(shù)組），或者遠(yuǎn)程數(shù)據(jù)源（XML, JSON, JSONP)，支持CRUD操作（創(chuàng)建，讀取，更新和刪除操作），并支持排序，分頁(yè)，過(guò)濾，分組和集合等。

準(zhǔn)備開始

下面創(chuàng)建一個(gè)本地?cái)?shù)據(jù)源。

var movies = [ {
title: “Star Wars: A New Hope”,
year: 1977
}, {
title: “Star Wars: The Empire Strikes Back”,
year: 1980
}, {
title: “Star Wars: Return of the Jedi”,
year: 1983
}
];
var localDataSource = new kendo.data.DataSource({data: movies});

創(chuàng)建一個(gè)遠(yuǎn)程數(shù)據(jù)源 （Twitter）

var dataSource = new kendo.data.DataSource({
transport: {
read: {
// the remote service url
url: “//search.twitter.com/search.json”,

// JSONP is required for cross-domain AJAX
dataType: “jsonp”,

// additional parameters sent to the remote service
data: {
q: “html5″
}
}
},
// describe the result format
schema: {
// the data which the data source will be bound to is in the “results” field
data: “results”
}
});

綁定數(shù)據(jù)源到UI組件

Kendo UI組件很多都支持?jǐn)?shù)據(jù)綁定 ，UI組件綁定的數(shù)據(jù)源可以在配置UI組件時(shí)設(shè)置，或是多個(gè)UI組件共享同一個(gè)數(shù)據(jù)源。創(chuàng)建UI組件時(shí)設(shè)置DataSource屬性：

$(“#chart”).kendoChart({
title: {
text: “Employee Sales”
},
dataSource: new kendo.data.DataSource({
data: [
{
employee: “Joe Smith”,
sales: 2000
},
{
employee: “Jane Smith”,
sales: 2250
},
{
employee: “Will Roberts”,
sales: 1550
}]
}),
series: [{
type: “line”,
field: “sales”,
name: “Sales in Units”
}],
categoryAxis: {
field: “employee”
}
});

使用共享的遠(yuǎn)程數(shù)據(jù)源：

var sharableDataSource = new kendo.data.DataSource({
transport: {
read: {
url: “data-service.json”,
dataType: “json”
}
}
});

// Bind two UI widgets to same DataSource
$(“#chart”).kendoChart({
title: {
text: “Employee Sales”
},
dataSource: sharableDataSource,
series: [{
field: “sales”,
name: “Sales in Units”
}],
categoryAxis: {
field: “employee”
}
});

$(“#grid”).kendoGrid({
dataSource: sharableDataSource,
columns: [
{
field: “employee”,
title: “Employee”
},
{
field: “sales”,
title: “Sales”,
template: ‘#= kendo.toString(sales, “N0″) #’
}]
});

這個(gè)例子使用了模板 template，模板的用法參見后面的文章。

本文轉(zhuǎn)載自

購(gòu)買正版授權(quán)的朋友可以點(diǎn)擊""哦~~~

慧都特邀Kendo UI原廠開發(fā)工程師舉行線上公開課，使用該控件的朋友千萬(wàn)別錯(cuò)過(guò)哦>>