Question

我一直试图让我的kendoUI项目启动并运行数天，现在我被卡住了。首先，我创建了以json格式返回的网络服务器，但我设法找到了解决方案。现在格式似乎很好但我没有行显示在网格中。

以下是fiddler中的结果：

[-] JSON
   [-] Data
       [-] {}
           userId=1
           userName=Admin
       [-] {}
           userId=2
           userName=User

Correct format:
JSON
- d
  - __type=whatever_type_you_have
  - Data
  -- {}
     userId=1
     userName=Admin
  - Total

我在“数据”节点之前的教程中看到应该有一个“d”节点。我不确定这是否是导致我的问题的原因。无论如何，剑道代码是这样的：

    <!DOCTYPE html>

<html>
<head>
    <title>cloudReporter</title>
    <link href="KendoUI/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="KendoUI/styles/kendo.moonlight.min.css" rel="stylesheet" type="text/css" />
    <script src="KendoUI/js/jquery.min.js" type="text/javascript"></script>
    <script src="KendoUI/js/kendo.web.min.js" type="text/javascript"></script>
</head>
<body>
    <style>
        html,
        body
        {
            height:100%;
            margin:0;
            padding:0;
        }

        html
        {
            overflow:hidden;
        }

        #login ul
        {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        #login li
        {
            margin: 10px 0 0 0;
        }
    </style>



    <div id="splitter" style="height: 100%; border: 0;">
        <div id="menubar" style="width: 200px;">
            <ul id="panelbar">
            <li>Alerts
                <ul>
                    <li>Approved Related Alerts</li>
                    <li>Application Function Alerts</li>
                </ul>
            </li>
            <li>Applications
                <ul>
                    <li>User/Group Manager</li>
                    <li>Application Mgmt</li>
                    <li>External Sources</li>
                    <li>Indicator Bar</li>
                    <li>Camera Hole Drill</li>
                </ul>
            </li>
            <li>Reports
                <ul>
                    <li>Report 1</li>
                    <li>Report 2</li>
                    <li>Report 3</li>
                    <li>Report 4</li>
                    <li>Report 5</li>
                </ul>
            </li>
            <li>Settings
                <ul>
                    <li>Setting 1</li>
                    <li>Setting 2</li>
                    <li>Setting 3</li>
                    <li>Setting 4</li>
                    <li>Setting 5</li>
                </ul>
            </li>
            </ul>
        </div>
        <div id="workarea">
            <div id="login">
                <ul>
                    <li>
                        <!--<label for="txtUserName">User Name</label>-->
                        <input id="txtUserName" class="k-textbox" placeholder="User Name"/>
                    </li>
                </ul>
                <ul>
                    <li>
                        <!--<label for="txtPassword">Password</label>-->
                        <input id="txtPassword" class="k-textbox" placeholder="Password" type="password"/>
                    </li>
                </ul>
                <ul>
                    <li>
                        <button id="btnLogin" class="k-button" style="width: 100%">Login</button>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var isLoggedIn = false;
        var loginWin;
        var isReady = false;
        var datUsers;

        $(document).ready(function () {
            var datUsers = new kendo.data.DataSource({
            transport: {
                read: {
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "http://localhost:9987/Service1.asmx/getUsers",
                    dataType: "json"
                }
            },
            pageSize: 10,
            schema: {
                data: "d.Data",
                total: "d.Total"
            }
        });

            console.log("Count: " + datUsers.total());

            $("#splitter").kendoSplitter({
                resize: onWindowResize,
                close: onLoginClose,
                panes: [
                        { collapsible: false, size: "200px" },
                        { collapsible: false }
                    ]
            });
            $("#panelbar").kendoPanelBar({
                expandMode: "single",
                animation: {
                    collapse: {
                        duration: 1,
                        effects: "fadeOut"
                    },
                    expand: {
                        duration: 500,
                        effects: "fadeIn"
                    }
                },
                select: onSelect
            });

            kendo.fx($('#panelbar')).slideIn("right").duration(1000).play();

            $("#login").kendoWindow({
                actions: ["Close"],
                title: "Login",
                modal: true,
                draggable: false,
                resizable: false,
                visible: false,
                activate: onWindowLoaded,
                animation: {
                    close: {
                        duration: 1000,
                        effects: "fadeOut"
                    },
                    open: {
                        duration: 1000,
                        effects: "fadeIn"
                    }
                }
            });

            loginWin = $("#login").data("kendoWindow");
            loginWin.center();
            loginWin.open();

            $("#btnLogin").kendoButton({
                click: onLoginClick
            });

            $("#workarea").kendoGrid({
                dataSource: datUsers,
                columns: [
                    { field: "userId", title: "userId", width: "75px" },
                    { field: "userName", title: "userName" }
                ],
                height: 300,
                selectable: "row",
                groupable: false,
                scrollable: false,
                pageable: true,
                sortable: true,
                filterable: false
            });

            function onSelect(e) {
                console.log("OnSelect");
            }

            function onLoginClick(e) {
                //alert("Login Clicked!");
                isLoggedIn = true;
                loginWin.close();
            }

            function onWindowResize(e) {
                //alert("Splitter Resized");
                //loginWin = $("#login").data("kendoWindow");
                if (isReady)
                    loginWin.center();
            }

            function onWindowLoaded(e) {
                isReady = true;
            }

            function onLoginClose(e) {
                isReady = false;
            }
        });
    </script>
</body>
</html>

如果需要，我会上传网络服务代码，但我认为这部分很好。我的代码可能不是最佳实践，但我仍在学习。我使用mrbool.com网站作为参考。

提前致谢。

[link] http://stephan.dyndns.org:1234/

Answer 1

不幸的是我还不能发布图片，但是这个JSON格式在Fiddler看起来应该是这样的：

JSON 
-d 
--Data 
---{} Item1
---{} Item2
---{} Item3
--Total

剑道UI。 Kendo DataSource不从webservice加载数据

1 个答案: