Kendo UI開發教程：Kendo DataSource概述

Kendo的數據源支持本地數據源（JavaScript對象數組），或者遠程數據源（XML, JSON, JSONP)，支持CRUD操做（建立，讀取，更新和刪除操做），並支持排序，分頁，過濾，分組和集合等。

準備開始

下面建立一個本地數據源。

1 2 3 4 5 6 7 8 9 10 11 12

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});

建立一個遠程數據源 （Twitter）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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」 } });

綁定數據源到UI組件

Kendo UI組件不少都支持數據綁定 ，UI組件綁定的數據源能夠在配置UI組件時設置，或是多個UI組件共享同一個數據源。建立UI組件時設置DataSource屬性：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

$(「#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」 } });

使用共享的遠程數據源：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

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，模板的用法參見後面的文章。

本文轉載自Kendo UI中文網