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

準(zhǔn)備開始

下面創(chuàng)建一個本地?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)建一個遠(yuǎn)程數(shù)據(jù)源 （Twitter）

var dataSource = new kendo.data.DataSource({

transport: {

read: {

// the remote service url

url: “http://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è)置，或是多個UI組件共享同一個數(shù)據(jù)源。創(chuàng)建UI組件時設(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″) #’

}]

});

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