使用 ODATA 将 Json 结果绑定到 kendoUI 的 Grid

Question

我想使用 ODATA v4 将 Json 结果绑定到 kendoUI 网格，但我无法这样做。下面的代码适用于 url http://services.odata.org/v2/Northwind/Northwind.svc/Customers which returns a xml result but why dont it work for http://services.odata.org/v4/Northwind/Northwind.svc/Customers 其中 returns 和 json。任何帮助将不胜感激。

 <!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>

Answer 1

两件事。我认为 services.odata.org 上的 v4 实现不支持 jsonp。 return 值似乎没有换行。您还需要将 v4 odata 的类型更改为 "odata-v4"。此外，return 数组不在 return 对象 "results" 上的属性内，它现在是 "value"，所以我必须在模式中设置它数据源。我还将 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"
  }
},

在 http://jsbin.com/satafa/1/edit?html,js,output

查看工作示例

Answer 2

您需要在数据源中添加 "odata-v4" 作为类型。请参考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" }

使用 ODATA 将 Json 结果绑定到 kendoUI 的 Grid

Bind Json result to Grid of kendoUI using ODATA

kendo-ui

kendo-grid