博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
KendoUI>Framework>Datasource>Overview
阅读量:6966 次
发布时间:2019-06-27

本文共 1777 字,大约阅读时间需要 5 分钟。

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

 

转载于:https://www.cnblogs.com/samwu/archive/2012/04/05/2432766.html

你可能感兴趣的文章
Write Your software base on plugin(C/C++ ABI)
查看>>
手机端表单验证插件
查看>>
性能优化你必须知道的那些事儿
查看>>
.net core2.0下Ioc容器Autofac使用
查看>>
MVC和MVVM
查看>>
ffmpeg h264+ts +udp传输
查看>>
cache缓存帮助类
查看>>
第一章 数组与指针概念剖析
查看>>
【软工】第 一 次作业 (阅读作业)
查看>>
GO:字符串Slice后乱码问题
查看>>
TYVJ 1006 isbn by C++
查看>>
继承关系
查看>>
玩过之后需要做的事情
查看>>
js焦点轮播图
查看>>
leetcode — flatten-binary-tree-to-linked-list
查看>>
知乎模拟登录 requests session
查看>>
【转载】CSS 入门精要(四)
查看>>
论文阅读笔记十九:PIXEL DECONVOLUTIONAL NETWORKS(CVPR2017)
查看>>
装饰我的博客
查看>>
ASP.NET页面刷新的实现方法总结
查看>>