我想使用ODATA v4将Json结果绑定到kendoUI网格,但我无法这样做。下面的代码适用于返回xml结果的网址 http://services.odata.org/v2/Northwind/Northwind.svc/Customers ,但为什么它不适用于返回json的 http://services.odata.org/v4/Northwind/Northwind.svc/Customers 。任何帮助将不胜感激。
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/index">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.material.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2015.1.408/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/jszip.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://services.odata.org/v2/Northwind/Northwind.svc/Customers",dataType: "jsonp",data: { q: "#kendoui" }
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "ContactName",
title: "Contact Name",
width: 200
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
});
</script>
</div>
</body>
</html>
答案 0 :(得分:1)
一些事情。我不认为services.odata.org上的v4实现支持jsonp。返回值似乎没有被包装。此外,您需要将类型更改为v4 odata的“odata-v4”。 返回数组也不在名为“results”的返回对象的属性内,它现在是“value”所以我不得不在dataSource的架构中设置它。我还将transport.read更改为对象并添加了必需的属性。
dataSource: {
type: "odata-v4",
transport: {
read: {
url: "http://services.odata.org/v4/Northwind/Northwind.svc/Customers",
dataType: "json",
data: {
q: "#kendoui"
}
}
},
pageSize: 20,
schema: {
data: "value"
}
},
处的工作示例
答案 1 :(得分:1)
你需要添加&#34; odata-v4&#34;作为数据源中的类型。请参阅fiddle
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata-v4",
transport: {
read: "http://services.odata.org/v4/Northwind/Northwind.svc/Customers",dataType: "jsonp",data: { q: "#kendoui" }