将json传给kendoui网格

时间:2016-02-07 17:15:19

标签: json kendo-ui

我真的很感激指导。 我的脚本将调用我的服务器,获取一些数据并将其作为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>

1 个答案:

答案 0 :(得分:1)

嗯,你在schem有一个错字。它应该是架构而不是 schem

无论如何,我建议检查API docs,写下你需要的东西。

关于你的问题:

您在网格中缺少dataSource,因此它不知道应该呈现什么数据网格。

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

所以行 var myResults = {“d”:[{msg}]}; 可以删除,msg数据可以分配到dataSource。然后,您就可以设置列 - here demo

并且还要考虑,如果需要在函数中加载json数据并将结果赋值给变量。 Grid可以在没有它的情况下从服务器加载数据 - 服务器只需返回json数据,如this example