Kendo DataSource 概述

Kendo DataSource 概述

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

準(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: "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í)設(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 ,模板的用法參見后面的文章。