Ag-grid：视口不加载数据

Question

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

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

https://plnkr.co/edit/EEEJULRE72nbPF6G0PCK

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

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

2. 由于它在屏幕上的物理尺寸，网格可以在任何给定时间显示 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;

我已经在此处分叉了您的 plunker（进行了上述更改）：https://plnkr.co/edit/cY30aHIPydVOjcihX8Zh?p=preview