Kendo UI 网格数据源和 REST API答案

【问题标题】：Kendo UI Grid Datasource and REST APIKendo UI 网格数据源和 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 吗？

标签： rest kendo-ui grid datasource

【解决方案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;
                   }
               }
           }

【讨论】：