Question

在我们的页面上，当用户点击链接时，会打开一个简单模式弹出窗口。在此弹出窗口中，Kendo UI网格显示记录表。通过ajax调用检索数据。由于弹出窗口的空间很小，我们只想在页面中显示五条记录，用户可以使用Kendo网格的分页功能查看更多记录。此外，我们希望在客户端实现分页，并在单个ajax调用中获取所有记录。

一切正常，除了Kendo UI Grid显示一个包含五条记录的页面，即使通过ajax调用检索到超过五条记录。

源代码如下：

showReportPopup: function (dataId) {

    if (dataId.length > 0) {
        $.ajax({
            url: AppGlobal.rootPath() + "Report/Get?id=" + dataId,
            type: "GET",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: "",
            success: function (data) {
                if (data.length === 0) {
                } else {

                    // Load data into DOM & Kendo UI Grid 
                    loadDataIntoReportPopup(data);

                    // Show simple modal popup
                    $("#report-summary-modal").modal({
                        maxWidth: 880,
                        maxHeight: AppGlobal.maxModalHeight(),
                        minWidth: 880,
                        minHeight: 250,
                        onShow: function (dialog) {
                            $("html,body").css("overflow", "hidden");
                        },
                        onClose: function (dialog) {
                            $("html,body").css("overflow", "auto");
                            $.modal.close();
                        },
                        overlayClose: false
                    });                            
                }
            },
            complete: function() {
            }
        });
    }
},

loadDataIntoReportPopup: function (reportData) {        

    // Populate various fields

    // Load the kendo ui grid section
    $("#viewWorksGrid").kendoGrid({
        dataSource:
        {
            data: reportData,
            schema: {
                data: "works"
            },
            pageSize: 5,
            serverPaging: false
        },
        pageable: true,
        scrollable: true,
        sortable: false,
        resizable: true,
        columnMenu: false,
        noRecords: {
            template: "No results available."
        },
        columns: [
            {
                field: "title",
                title: "Title"
            },
            {
                field: "composers",
                title: "Composers"
            },
            {
                field: "performances",
                title: "Performances",
                attributes: { style: "text-align:right;" },
                width: 50
            },
            {
                field: "duration",
                title: "Duration",
                attributes: { style: "text-align:right;" },
                width: 50
            }
        ]
    }).data("kendoGrid");
},

Answer 1

最后，我能够解决这个问题。这可能是一个剑道错误。我的json响应结构如下：

{  
   "reportName":"The Moscow Mules",
   "reportCountry":"AUSTRALIA",
   "reportSuburb":"SYDNEY",
   "works":[  
      {  
         "workId":11309,
         "title":"my test 50",
         "composers":"Sheeran E / error CA w",
         "performances":1,
         "duration":"01:00"
      },
      {  
         "workId":1491,
         "title":"my test 55",
         "composers":"Hauge D",
         "performances":1,
         "duration":"02:02"
      },
      //...  more such objects
   ]
}

以前，我提供了整个json作为数据，并要求kendo通过指定架构来获取“作品”（请参阅上面的问题）。在这种情况下，kendo网格仅显示具有五个（pageSize = 5）记录的单个页面。当我将工作部分变为单独的变量并将其作为数据提供时，它解决了问题。解决问题的代码（请查看“dataSource”部分）：

loadDataIntoReportPopup: function (reportData) {        

    // Populate various fields

    // Extract the "works" section to a new variable
    var works = reportData.works;

    // Load the kendo ui grid section
    $("#viewWorksGrid").kendoGrid({
        dataSource:
        {
            data: works,
            pageSize: 5,
            serverPaging: false
        },
        pageable: true,
        scrollable: true,
        sortable: false,
        resizable: true,
        columnMenu: false,
        noRecords: {
            template: "No results available."
        },
        columns: [
            {
                field: "title",
                title: "Title"
            },
            {
                field: "composers",
                title: "Composers"
            },
            {
                field: "performances",
                title: "Performances",
                attributes: { style: "text-align:right;" },
                width: 50
            },
            {
                field: "duration",
                title: "Duration",
                attributes: { style: "text-align:right;" },
                width: 50
            }
        ]
    });
},

Kendo UI网格不显示第一页以外的页面

1 个答案: