Kendo UI 网格数据源和 REST API
Posted
技术标签:
【中文标题】Kendo UI 网格数据源和 REST API【英文标题】：Kendo UI Grid Datasource and REST API 【发布时间】：2016-08-25 05:44:39 【问题描述】：使用 Kendo UI 网格和数据源，我正在连接到 REST API。然而，有几个问题被报告：
未知的数据源传输类型“json”。验证注册 此类型的脚本包含在页面上的 Kendo UI 之后。
kendo.all.js:6621 Uncaught TypeError: Cannot read property 'slice' of 未定义
我查看了 Kendo UI Grid 和 Datasource 文档，据我所知，一切都是正确的（但显然不是因为网格没有填充任何数据）。
这是网页代码：
<!DOCTYPE html>
<html>
<head>
<title>Kendo UI DataSource Proof of Concept</title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2016.1.412/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2016.1.412/styles/kendo.bootstrap.min.css" />
</head>
<body style="margin:100px">
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="http://cdn.kendostatic.com/2016.1.412/js/kendo.all.min.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<div id="grid"></div>
</div>
</div>
<script>
$(document).ready(function ()
$('#grid').kendoGrid(
dataSource:
autoSync: true,
type: 'json',
transport:
read:
url: 'http://cors.io/?u=http://api.lifestylesdiscovery.com/api/evaluation/test/salecomps',
dataType: 'json',
type: 'GET'
,
schema:
data: 'rows'
,
columns: [
field: 'Street' ,
field: 'Subdivision' ,
field: 'Beds'
]
);
)
</script>
</body>
</html>【问题讨论】：
剑道兼容 jQuery 2.x 吗？ 【参考方案1】：根据http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-type json is not a supported value，我将全部删除 dataSource 级别类型参数
【讨论】：
【参考方案2】：使用 jsonp 作为类型
type: 'jsonp',
对于无法读取未定义的属性“切片”。
在 IE 中调试并注释它所在的行，或使用正确的 js 文件组合。我正在使用http://kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js
【讨论】：
【参考方案3】：查询 REST API 时需要进行一些自定义，尝试这种方式，使用 schema.data 函数可以检查返回的数据集，并且“数据”需要一个数组，因此在您的情况下会出现“拼接”错误。
dataSource:
type: "json",
schema:
data: function (e)
return e.Results // inspect 'e' as to where your data resides
,
serverFiltering: true,
transport:
read: url,
parameterMap: function (options, type)
var paramMap = kendo.data.transports.odata.parameterMap(options);
delete paramMap.$format;
return paramMap;
【讨论】：
以上是关于Kendo UI 网格数据源和 REST API的主要内容，如果未能解决你的问题，请参考以下文章
使用 Kendo UI 和 AngularJS 创建基本数据网格