0

我正在努力在 Kendo UI 中使用 JSP 包装器。我检查了他们的论坛，没有发现任何东西。我检查了stackoverflow，一无所获。我通读了 API，但找不到问题的答案。

对 url 的调用：“CustomerAjaxServlet?str=The R”，

返回以下 json 对象：

[
    {"id":0,"customerId":"RO113","name":"The Robe Gallery Inc."},
    {"id":1,"customerId":"TH204","name":"The Robe Collection"}
]

网格正在使用正确的列标题呈现，并且分页正在返回 1 of 10 121 Items。但是没有数据。121 是 json 对象的字符数。如果我更改对 ajax servlet 的调用，项目数也会随着 ...

<%@ page language="java" %>

<%@ taglib uri="/WEB-INF/tlds/esc.tld" prefix="esc" %>
<%@ taglib uri="/WEB-INF/tlds/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/tlds/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/tlds/struts-logic.tld" prefix="logic" %>


<%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>



<%@ page import="org.apache.struts.taglib.TagUtils" %>

<% SessionContext context = SessionContext.getSessionContext(request); %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Detail template</title>
    <meta http-equiv="Content-Type" content='text/html; charset=us-ascii'>
      <meta name='author' content=Test'>

    <link href="common/js/kendo/examples/content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="common/js/kendo/styles/kendo.common.min.css" rel="stylesheet">
    <link href="common/js/kendo/styles/kendo.default.min.css" rel="stylesheet">

    <script src="common/js/kendo/js/jquery.min.js"></script>
    <script src="common/js/kendo/js/kendo.web.min.js"></script>
    <script src="common/js/kendo/content/shared/js/console.js"></script>
</head>
<body>
    <a class="offline-button" href="../index.html">Back</a>

        <div id="example" class="k-content">
            <div id="grid"></div>

            <script type="text/x-kendo-template" id="template">
                <div class="tabstrip">
                    <div>
                        <div class='customer-details'>
                            <ul>                            
                                <li><label>id:</label>#= id #</li>
                                <li><label>name:</label>#= name #</li>
                                <li><label>customerId:</label>#= customerId #</li>
                            </ul>
                       </div>
                    </div>
                </div>

            </script>

            <script>
                $(document).ready(function() {
                    var element = $("#grid").kendoGrid({
                        dataSource: {
                            transport: {
                                read: function(options) {                                                            
                                          $.ajax( {
                                                url:  "CustomerAjaxServlet?str=The R",
                                                data: options.data,                                                                                                success: function(result) {
                                                options.success(result);
                                                //alert(result);
                                          }
                                          });
                                }
                            },
                            pageSize: 10,
                            serverPaging: true,
                            serverSorting: true
                        },
                        height: 450,
                        sortable: true,
                        pageable: true,
                        dataBound: function() {
                            this.expandRow(this.tbody.find("tr.k-master-row").first());
                        },
                        columns: [
                            {
                                field: "id",
                                title: "Id"
                            },
                            {
                                field: "name",
                                title: "Name"
                            },
                            {
                                field: "customerId",
                                title: "Customer Id"
                            }                          
                        ]
                    });
                });


            </script>
            <style scoped="scoped">
                .customer-details ul
                {
                    list-style:none;
                    font-style:italic;
                    margin-bottom: 20px;
                }

                .customer-details label
                {
                    display:inline-block;
                    width:90px;
                    font-style:normal;
                    font-weight:bold;
                }
            </style>
        </div>

</body>
</html>
4

1 回答 1

1

Your code runs fine. Did you check the contentType of the json object returned? It should be "application/json".

I run your code with the following CustomerAjaxServlet

<%@ page contentType="application/json;charset=UTF-8" language="java" %>
<%
    out.println("[" +
            "{\"id\":0,\"customerId\":\"RO113\",\"name\":\"The Robe Gallery Inc.\"}," +
            "{\"id\":1,\"customerId\":\"TH204\",\"name\":\"The Robe Collection\"}" +
            "]");
%>
于 2013-01-28T02:25:54.373 回答