剑道网格 - 显示来自 json 的总分页

Question

我正在开发一个剑道网格。在主行中，我显示文件类型及其总数，当展开该行时，然后在分页中显示所有数据。

在我的 json 中，如果我的总数据是 100，那么在 json 中只有 10 个数据存在，当点击下一页时，我会得到下一个 10 个 json 数据。

现在我想设置分页的总结果，但在我的示例中我无法识别出什么问题。

为了说明这一点，我使用了以下示例 - http://jsfiddle.net/lhoeppner/y6KdK/

在我的示例中，我不确定我的 json 是错误的还是我使用的方法是错误的。

编辑 我的代码是 -

    var jsonData = JSON.parse("{\"Report\":\"type1\",\"FileList\":[{\"owner\":\"machine-174\\\\admin\",\"path\":\"C:\\\\workarea\\\\WinTest1lakhfileinKB\\\\WinTest\\\\nGYh\\\\SMv\\\\U1P8FLx\\\\vMbhdo\\\\TgFSW\\\\42Ioulj0w.txt\"},{\"owner\":\"machine-174admin\",\"path\":\"C:\\\\workarea\\\\bada_data\\\\Employee Database - Copy (7) - Copy.mdb\"}],\"Count\":100,\"total\":10}");
 $("#grid").kendoGrid({
            editable: false,
            resizable: true,
            filterable: true,
            columns: [{
                field: "Report",
                title: "Report"
            }, {
                field: "Count",
                title: "Count"
            }],
            dataSource: {
                data: jsonData,
                schema: {
                    model: {
                        fields: {
                            Report: {
                                type: "string"
                            },
                            Count: {
                                type: "number"
                            }

                        }
                    }
                }
            },
            detailInit: function (e) {

                var dataSource = new kendo.data.DataSource({
                    data: e.data.FileList,

                    aggregate: [{
                        field: "size",
                        aggregate: "sum"
                    }],
                   schema:{
                   total:"total"
                   },

                    page: $("#grid").data("kendoGrid").dataSource.page(),
                    pageSize: 10,
                    resizable: true,
                    filterable: true,
                    scrollable: true

                });
                dataSource.fetch(function () {
                    totalsize = null;
                    var result = null;
                    results = dataSource.aggregates().size;
                    totalsize = getSize(results.sum);
                });

                    childheader = "[{\"field\":\"path\",\"title\":\"Path\",\"width\":\"200px\"},{\"field\":\"owner\",\"title\":\"Owner\",\"width\":\"200px\"}]";
                var childhead = JSON.parse(childheader);
                var dataSource = $("<div/>").appendTo(e.detailCell).kendoGrid({
                    dataSource: {
                        data: e.data.FileList,
                       total:e.data.total,
                        editable: false,
                        pageSize: 10,
                        scrollable: true,
                        resizable: true,
                        filterable: true,
                        aggregate: [{
                            field: "size",
                            aggregate: "sum"
                        }],
                        schema: {
                          total:"total",
                            parse: function (data) {
                                $.each(data, function (idx, elem) {
                                    elem.size = getSize(elem.size);
                                });
                                return data;
                            },
                            model: {
                                fields: {

                                    path: {
                                        type: "string"
                                    },

                                    owner: {
                                        type: "string"
                                    }


                                }
                            }
                        }
                    },

                    columns: childhead,
                    sortable: true,
                    pageable: true,
                    resizable: true,
                    filterable: true,
                    scrollable: true,
                    serverPaging: false,

                    pageable: {
                            pageSize: 2,
                            refresh: true,
                            change:function(e){
                                   console.log("page change event");
                            }
                    }
                });

            }
        });
        function getSize(val) {
        var bytes = val;
        var size = null;
        var sizes = ['Bytes', 'KB', 'MB', 'GB'];
        if (bytes > 0) {
            var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
            size = Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
            return size;
        }
    }

我的例子在这里 - https://jsfiddle.net/pporwal26/2ub1rvc2/8/

在此示例中，即使我在 json 中有 2 个数据并通过页面更改功能获取下一页数据，我也想显示每页 2 个数据和总共 10 个页面。

Answer 1

您只需将页面大小和可分页属性设置为一体：

    pageable: {
        input: true,
        numeric: false,
        refresh: true,
        pageSizes: true,
        pageSize: 10
    },

只需通过数据源引入数据，它就会以 10 为增量将网格设置到每个页面。