KendoUI>Framework>Datasource>Overview

KendoUI的DataSource绑定功能，既支持本地的JS对象数组，也支持远程的JSON，XML，JSONP。支持对数据的增删查改，以及对本地或服务端的数据排序，分页，筛选，分组，聚集。

1.绑定本地JS对象数组

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

2.绑定远程数据

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"

    }

});

3.给KendoUI绑定数据

两种绑定方式，区别自己看。

第一种：

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

第二种：

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") #'
    }]
});