将 json 传递给 kendoui 网格答案

【问题标题】：passing json to kendoui grid将 json 传递给 kendoui 网格
【发布时间】：2016-02-07 17:15:18
【问题描述】：

非常感谢您的指导。我的脚本将调用我的服务器，获取一些数据并将其作为 JSON 带回。然后我调用 ServiceSucceeded(msg);我在 msg 中传递 JSON 结果。现在在 ServiceSucceeded 中，我想在 kendoui 网格上显示我的结果。那是我无法工作的部分。它没有给出浏览器错误。这段代码可能很糟糕，所以请教我这个，谢谢！

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <link rel="stylesheet" href="../../assets/telerik/styles/kendo.common.min.css" />
        <link rel="stylesheet" href="../../assets/telerik/styles/kendo.default.min.css" />

        <script src="../../assets/telerik/js/jquery.min.js"></script>
        <script src="../../assets/telerik/js/kendo.all.min.js"></script>
    </head>

<body>
    <div id="grid">

    </div>
    <div>
        <script>
            var Type;
            var Url;
            var Data;
            var ContentType;
            var DataType;
            var ProcessData;
            var Username;
            var Password;
            var qryVar;
            var locationName;


            function GetAllReportDB() {
                var dataId = "1";
                Type = "GET";
                qryVar = "userName=Simon"
                Url = "http://localhost/UserReportMap.svc/GetAllReportDB?" + qryVar;
                Data = '{"Contains": "Kir","DBName":"Bony","Operator":"BON0D"}';
                ContentType = "application/json; charset=utf-8";
                DataType = "json"; ProcessData = true;
                Username = "test";
                Password = "test";

                CallService();

            }

            function CallService() {


                $.support.cors = true;
                $.ajax({
                    cache: false,
                    type: Type, //GET or POST or PUT or DELETE verb
                    url: Url, // Location of the service
                    data: Data, //Data sent to server
                    contentType: ContentType, // content type sent to server
                    dataType: DataType, //Expected data format from server
                    processdata: ProcessData, //True or False


                    beforeSend: function (xhr2) {
                        xhr2.setRequestHeader("Authorization", "Basic " + window.btoa(Username + ':' + Password));
                    },


                    success: function (msg) {


                        ServiceSucceeded(msg);
                        alert("Succeeded");
                    },
                    error: function (errMsg) {
                        alert("Fail!");
                    }
                });
            }


            function ServiceSucceeded(msg) {
                var myResults = { "d": [{msg}] };
                alert(JSON.stringify(msg));
                $(function () {
                    $("#grid").kendoGrid({
                        dataType: "json",
                        schem: {
                            data: "d"

                        }
                        //columns: [{ title: "First Name" },
                          //       { title: "Last Name" }]
                    });
                });
            }

            $(document).ready(
       function () {
           GetAllReportDB();

       }
   );
        </script>
    </div>

</body>
</html>

【问题讨论】：

标签： json kendo-ui

【解决方案1】：

嗯，你在 schem 有一个错字。它应该是 schema 而不是 schem。

无论如何，我建议检查API docs，您需要什么。

关于你的问题：

您的网格中缺少数据源，因此它不知道应该从哪个数据网格呈现。

$("#grid").kendoGrid({
    dataSource: {
    type: "json",
    data: jsonData,
    pageSize: 20
    }, 
    ...
});

所以 var myResults = { "d": [{msg}] }; 行可以被移除，并且可以将 msg 数据分配到 dataSource 中。然后你就可以设置列了 - here demo

还要考虑，如果您需要在函数中加载 json 数据并将结果分配到变量中。 Grid 能够在没有它的情况下从服务器加载数据 - 服务器只需要返回 json 数据，就像在 this example

【讨论】：