Question

我正在努力在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项目。但是没有数据。 121是json对象的字符数。如果我将调用更改为ajax servlet，则项目数也会随着...的1而改变。

<%@ 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>

Answer 1

您的代码运行正常。你检查了返回的json对象的contentType吗？它应该是“application / json”。

我使用以下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\"}" +
            "]");
%>

Kendo UI简单网格

1 个答案: