Kendo UI Grid JSON DataSource 未加载数据答案

【问题标题】：Kendo UI Grid JSON DataSource not loading dataKendo UI Grid JSON DataSource 未加载数据
【发布时间】：2013-08-14 02:48:53
【问题描述】：

由于某种原因，我似乎无法在 Kendo UI Grid 中获得更多信息：

HTML：

<div id="grid"></div>
<script>
    var remoteDataSource = new kendo.data.DataSource(
    {
        transport:
        {
            read: {
                type: "POST",
                dataType: "json",
                url: "/home/getopportunities/"
            }
        },
        pageSize: 4
    })
    $("#grid").kendoGrid(
        {
            dataSource: remoteDataSource,
            columns: [
                {
                    title: "Title",
                    headerAttributes: {
                        style: "text-align:center"
                    },
                    attributes: {
                        "class": "table-cell"
                    },
                    width: 600,
                    filterable: true
                },
                {
                    title: "Activity Type",
                    headerAttributes: {
                    },
                    attributes: {
                        "class": "table-cell",
                        style: "text-align:center"
                    },
                    width: 100,
                    filterable: true
                },
                {
                    title: "Specialty",
                    filterable: true,
                    headerAttributes: {
                        style: "text-align:center"
                    },
                    attributes: {
                        "class": "table-cell",
                        style: "text-align:center"
                    }
                },
            {
                title: "Total Credits",
                format: "{0}",
                headerAttributes: {
                    style: "text-align:center"
                },
                attributes: {
                    "class": "table-cell",
                    style: "text-align:center"
                }
            }
        ],
        height: 430,
        scrollable: true,
        sortable: true,
        pageable: true,
        filterable: {
            extra: false,
            operators: {
                string: {
                    contains: "Contains",
                    startswith: "Starts with",
                    eq: "Is equal to",
                    neq: "Is not equal to"
                },
                number: {
                    eq: "Is equal to",
                    neq: "Is not equal to",
                    gte: "Greater Than",
                    lte: "Less Than"
                }
            }
        }
    });
</script>

这是返回给它的 JSON：

[
{"ActivityID":367,"Title":"Non Webinar Test For Calendar","ActivityType":"Other","TotalCredits":2,"Specialty":"[AB] [AE]"},
{"ActivityID":370,"Title":"Stage - Test SI Changes Part II","ActivityType":"Other","TotalCredits":2,"Specialty":"[NE]"},
{"ActivityID":374,"Title":"Webinar Test Event For Calendar","ActivityType":"Webinar","TotalCredits":2,"Specialty":"[FE] [NE] "},
{"ActivityID":401,"Title":"Module #1 Webinar: Learn Stuff","ActivityType":"Webinar","TotalCredits":2,"Specialty":"[AB] ",},
{"ActivityID":403,"Title":"Module #3 Webinar: Learn Even More Stuff","ActivityType":"Webinar","TotalCredits":2,"Specialty":"[AB] [AE]",}
]

我觉得我真的很接近但我错过了最后一块。任何帮助都将不胜感激，因为我在截止日期前。

【问题讨论】：

我遇到了完全相同的问题。对此的任何帮助将不胜感激。

标签： json kendo-grid

【解决方案1】：

常见的问题是缺少架构属性！将它添加到网格的 - 数据源中，并检查它是否在您制作 json 时设置。

（当plain数组被序列化/to_json时，数据数组需要一个表示shema的属性）

这里有一个例子来说明：

js：示例网格初始化/数据源：

$("#grid").kendoGrid({ dataSource: { transport: { read: "/getdata/fromthisurl" }, schema: { data: "data" } } });

当你制作/输出你的json时，看看shema信息是否在编码结果中：

php：

 $somedata= get_my_data();

 header("Content-type: application/json");
 echo "{\"data\":" .json_encode($somedata). "}";

或：

     $viewdata['data'] = get_my_data();

     header("Content-type: application/json");
     echo (json_encode($viewdata));

所以发送到网格的 json 看起来像：

{data:
      [
       {item}
       {item}
      ]
}

而不仅仅是：

[
  {item}
  {item}
]

【讨论】：

【解决方案2】：

代码看起来不错。我想知道您是否按如下方式更改数据源创建。将类型从POST更改为GET，看看是否有效，

var remoteDataSource = new kendo.data.DataSource(
    {
        transport:
        {
            read: {
                type: "GET",
                dataType: "json",
                url: "/home/getopportunities/"
            }
        },
        pageSize: 4
    })

【讨论】：

没有这样的运气，不管是 GET 还是 POST 都无关紧要。它没有发送任何数据。

【解决方案3】：

试试这个，

  $(document).ready(function () {
var remoteDataSource = new kendo.data.DataSource(
    {
        transport:
        {
            read: {
                type: "POST",
                dataType: "json",
                url: "/home/getopportunities/"
            }
        },
        pageSize: 4
    });
});

【讨论】：

已经试过了。无论如何，这不是跨域帖子。它在服务器本地。
@John Swaringen 我只是更新我的代码。把你的代码放在Document.ready 我认为这就是问题所在。
这是一个稍微不好的做法。如果这段代码能尽快运行会更好（默认情况下，数据源中的请求也是异步的）。

【解决方案4】：

您可以在某些调试工具中查看代码的哪一部分引发了异常（我建议您使用 Chrome 的 DevTools（只需在 Chrome 中按 F12 键）。

我很确定问题在于网格的列数组中缺少 field 属性，因此 Kendo 不知道数据源中的哪些数据要显示在网格的哪一列中。

columns: [
                {
                    field: "Title", // attr name in json data
                    title: "Title", // Your custom title for column (it may be anything you want)
                    headerAttributes: {
                        style: "text-align:center"
                    },
                    attributes: {
                        "class": "table-cell"
                    },
                    width: 600,
                    filterable: true
                },

不要忘记将请求类型从“POST”更改为“GET”。

【讨论】：

【解决方案5】：

这是不干净的，我是偶然发现的，但对我有用的是从控制器返回 Json(Json(dataList)) 而不是 Json(dataList)。

【讨论】：

这是一个稍微干净一点的：return Json(new { Data = dataList });
@BillPearmain, 'Json(new { Data = dataList })' 需要服务器端修改代码以适应剑道，我认为这不是一个好主意。

【解决方案6】：

在检查从网格数据源 json 查询返回的 JSON 时，我发现字段名称正在被 JavaScript 处理——C# 中的 ActivityID 变成了线上的 activityID...

【讨论】：