Question

这是这个问题的第2部分： Ag-grid viewport: cannot read property 'bind' of undefined

我正确定义了视口界面请求的所有功能，但是我无法将数据加载到网格中，正如您在此plunker中所看到的那样：

https://plnkr.co/edit/EEEJULRE72nbPF6G0PCK

特别是，文档中描述的这些阶段似乎没有被解雇：

数据源以数据大小（例如1,000行）响应并调用params.setRowCount（1000）。网格通过调整垂直滚动的大小来响应1000行。



网格由于它在屏幕上的物理尺寸，计算出它可以在任何给定时间显示20行。给定滚动位置在开始时，它调用datasource.setViewportRange（0,19）通知数据源它需要什么数据。网格暂时会显示空白行。

我解雇了定义此函数的网格填充事件：

WatcherTable.prototype.setRowData =function ($http) {
    // set up a mock server - real code will not do this, it will contact your
    // real server to get what it needs
    var mockServer = new MockServer();
    $http.get('data.json').then(function(response){
        mockServer.init(response.data);
    });

    var viewportDatasource = new ViewportDatasource(mockServer);
    var that=this;
    this.table.api.setViewportDatasource(viewportDatasource);
    // put the 'size cols to fit' into a timeout, so that the scroll is taken into consideration
    setTimeout(function () {
        that.table.api.sizeColumnsToFit();
    }, 100);
}

并在网格准备就绪时调用它：

onGridReady:WatcherTable.prototype.setRowData.bind(this,$http)

为什么网格仍然是空的？

谢谢

Answer 1

您的plunker中存在计时问题 - 您的MockServer正试图在数据可用之前对其进行处理。

你需要做两件事来解决这个问题 - 第一件事只是在MockServer中有数据后才尝试设置数据源：

WatcherTable.prototype.setRowData = function ($http) {
    // set up a mock server - real code will not do this, it will contact your
    // real server to get what it needs
    var mockServer = new MockServer();
    var that = this;
    $http.get('data.json').then(function (response) {
        mockServer.init(response.data);
        var viewportDatasource = new ViewportDatasource(mockServer);
        that.table.api.setViewportDatasource(viewportDatasource);
        // put the 'size cols to fit' into a timeout, so that the scroll is taken into consideration
        setTimeout(function () {
            that.table.api.sizeColumnsToFit();
        }, 100);
    });
}

其次，在同一主题中，您需要阻止定期更新在准备好之前尝试处理数据。在这里，您可以在数据可用之后启动定期更新，或者在尝试使用之前更简单地添加一个检查：

MockServer.prototype.periodicallyUpdateData = function() {
    if(!this.allData) return;

我已经在这里分叉你的傻瓜（上面的修改）：https://plnkr.co/edit/cY30aHIPydVOjcihX8Zh?p=preview

Ag-grid：视口不加载数据

1 个答案: