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();
        });

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

Answer 1

当您在serverPaging中选择DataSource并将其设为true时。您在服务器中接收有关页码（page），页面大小（pageSize），要跳过的记录数（skip）的信息...（在{中查找serverPaging） {3}}）作为交换，您不仅应返回包含该页面数据的数组，还应返回总行数。然后在schema.total中实现访问记录数的功能。即让我们假设您返回以下对象：

{
    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://docs.kendoui.com/api/framework/datasource以获取示例。

具有大数据集的Kendo UI网格

1 个答案: