Kendo UI簡單網格

Question

我在Kendo UI中使用JSP包裝程序時遇到困難。 我檢查了他們的論壇，卻一無所獲。 我檢查了stackoverflow，卻一無所獲。 我通讀了API，但找不到解決問題的答案。

網址的調用：“ CustomerAjaxServlet？str = The R”，

返回以下json對象：

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

正在使用正確的列標題渲染網格，並且分頁返回10 121個項目中的1個。 但是沒有數據。 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 個解決方案

解決方案1
1 已采納 2013-01-28 02:25:54

Kendo UI簡單網格

問題描述

1 個解決方案

解決方案1 1 已采納 2013-01-28 02:25:54

解決方案1
1 已采納 2013-01-28 02:25:54