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