1

我正在使用kendo-ui网格AngularJs并想要激活virtualization of remote data功能。为了测试我已经设置了pageSize: 5. 以下是virtualization of remote data来自telerik网站的描述：

在某些情况下，您可能需要对网格中的大量数据进行操作，并且一次获取和处理这些数据会由于浏览器资源有限而导致性能损失。幸运的是，Kendo UI 网格有一个称为数据虚拟化的解决方案，可以缓解处理大量数据时的任何减速。当通过 scrollable->virtual 配置选项启用时，它会显示网格内容的垂直滚动条，并且仅呈现通过网格数据源的 pageSize 属性设置的项目数。拖动滚动条并超出 pageSize 后，它会自动请求检索和呈现下一组网格行。网格虚拟化功能支持本地和远程数据，

我还设置了以下内容：

HTML：

<div kendo-grid k-options="mainGridOptions" id="historyGrid" style="width: auto;"></div>

用于网格的 JS：

    var vm = $scope;
vm.viewMode = {
    mainGridOptions: {
    visible: true
    }
};
vm.mainGridOptions = {

            columns: [
                // here columns
            ],
            onRegisterApi: function (gridApi) {
                vm.gridApi = gridApi;
            },
            dataSource: {
                schema: {
                    model: {
                        fields: {
                            YearBalance: { type: 'number' },
                            Typezalezh: { type: 'string' },
                            License: { type: 'string' },
                            ObjectName: { type: 'string' },
                            ZalezhName: { type: 'string' },
                            PlastName: { type: 'string' },
                            Category: { type: 'string' },
                            Parameter: { type: 'string' },
                            LastVal: { type: 'string' },
                            Val: { type: 'string' },
                            Operation: { type: 'string' },
                            EndT: { type: 'date' }
                        }
                    }
                },

                pageSize: 5,
                transport: {
                    read: function(e) {
                        dataservice.getImportResultReport().then(function(data) {
                            e.success(JSON.parse(data));
                            console.log(data);
                        });
                    }
                }
            },
            serverPaging: true,
            height: screen.height - 330,
            minwidth : 1190,
            batch: true,
            scrollable: {
                virtual: true
            },
            sortable: true,

            serverSorting: true,
            filterable: {
                extra: false,
                operators: {
                    string: {
                        // here filters
                    },
                    number: {
                        // here filters
                    },
                    date: {
                        // here filters
                    }
                }
            }
        };

在 Telerik 网站（官方网站）上，它说不需要做更多的事情。在滚动时，我应该看到对服务器的请求，在我的情况下应该是一个dataservice.getImportResultReport()调用。但这不会发生。该函数只调用一次，所有数据都返回。

可能是因为我没有设置而发生type: "odata"？但我使用另一种类型的数据源。

如何使用此功能？

4

1 回答 1

0

在呈现剑道网格的 html 中添加k-scrollable如下指令：

<div kendo-grid k-data-source="mainGridOptions" k-scrollable="{virtual:true}"></div>

您还必须k-data-source为您的数据源使用指令。希望能帮助到你。

工作演示plunkr

于 2017-09-01T16:39:17.280 回答