具有大型数据集的 Kendo UI 网格

Question

我正在尝试使用 Kendo UI，并且正在使用提供的示例用于学习目的。假设我正在使用包含数十万个元素的大型数据源。如果我正在使用分页并且页面大小为 10，我真的希望能够从网页中仅获取 10 个元素，并且如果 Kendo UI 能够知道实际上元素的数量要大得多，但是我们只显示 10 个。

这是我目前拥有的：

        var initGrid = true;
        var grid2Data;

        function getDataSource()
        {
            return grid2Data.Data;
        }

        var grid;
        function getPageIndex()
        {
            if (!(grid)) {
                return 0;
            }
            return grid.pager.page() - 1;
        }

        function getPageSize() {
            if (!(grid)) {
                return 10;
            }
            return grid.pager.pageSize();
        }

        function getFilters() {
            if (!(grid)) {
                return "";
            }
            return grid.dataSource.filter();
        }

        function getSorts() {
            if (!(grid)) {
                return "";
            }
            return grid.dataSource.sort();
        }

        function getParams() {
            return getPageSize();
        }

        function postTest() {
            if (initGrid) {
                $.post('myurl' + getParams(), function (data) {
                    grid2Data = data;
                    $("#grid").kendoGrid({
                        dataBound: onDataBound,
                        dataSource: {
                            data: getDataSource(),
                            schema: {
                                model: {
                                    fields: {
                                        Email: { type: "string" },
                                        FullName: { type: "string" },
                                        LogCreateDate: { type: "date" },
                                        RoleName: { type: "string" },
                                        UserName: { type: "string" }
                                    }
                                }
                            },
                            pageSize: 10
                        },
                        height: 300,
                        scrollable: false,
                        sortable: true,
                        filterable: true,
                        pageable: {
                            input: true,
                            numeric: false
                        },
                        columns: [
                        {
                            field: "Email",
                            title: "Email",
                            width: 100
                        },
                        {
                            field: "FullName",
                            title: "Full Name",
                            width: 100
                        },
                        {
                            field: "LogCreateDate",
                            title: "Created",
                            template: '#= kendo.toString(LogCreateDate,"MM/dd/yyyy") #'
                        },
                        {
                            field: "RoleName",
                            title: "Role",
                            width: 50
                        },
                        {
                            field: "UserName",
                            width: 100
                        }
                    ]
                    });
                    grid = $("#grid").data("kendoGrid");
                });
            }
            else {
            }
            initGrid = false;
        }

        $(document).ready(function () {
            postTest();
        });

我的问题是网格显示这是 10 中的元素 1-10，它是第一页。我希望网格向我显示我给出的页面索引和项目数。如何设置网格的元素数量和页面索引？这可能吗？谢谢。

Answer 1

当您在DataSource 中选择serverPaging 时，将其设置为true。您在服务器中接收有关页码 (page)、页面大小 (pageSize)、要跳过的记录数 (skip) 的信息...（在 http://docs.kendoui.com/api/framework/datasource 中查找 serverPaging）并作为交换您不仅应该返回包含该页面数据的数组，还应该返回总行数。然后在schema.total 中实现访问记录数的函数。 IE。假设您返回以下对象作为结果：

{
    rows: [ 
        { id: 1, col1: "col1.1", col2: "col1.2" },
        { id: 2, col1: "col2.1", col2: "col2.2" },
        { id: 3, col1: "col3.1", col2: "col3.2" }
    ],
    totalRows : 1000
}

那么你可以将schema.total 实现为：

schema: {
    total: function (response) {
        return response.totalRows;
    }
}

其中response 是从服务器接收到的对象。

注意：实际上在这种情况下将schema定义为：

schema: {
    total: "totalRows";
    }
}

由于total直接存储在totalRows字段中。

查看http://demos.kendoui.com/web/grid/remote-data.html 以获取示例。