Question

我想使用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>

Answer 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"
  }
},

请参阅http://jsbin.com/satafa/1/edit?html,js,output

处的工作示例

Answer 2

你需要添加＆＃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" }

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

2 个答案: