javascript - Ag-grid:视口(viewport)未加载数据

Question

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

我正确定义了视口(viewport)接口(interface)请求的所有函数，但我无法将数据加载到网格中，正如您在此 plunker 中看到的:

https://plnkr.co/edit/EEEJULRE72nbPF6G0PCK

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

2. The datasource responds with the size of the data (eg 1,000 rows) and calls params.setRowCount(1000). The grid responds by sizing the vertical scroll to fit 1,000 rows.

3. The grid, due to it's physical size on the screen, works out it can display 20 rows at any given time. Given the scroll position is at the start, it calls datasource.setViewportRange(0,19) informing the datasource what data it needs. The grid will display blank rows for the moment.

我触发了定义此函数的网格填充事件:

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;

我在这里 fork 了你的plunker(进行了上述更改):https://plnkr.co/edit/cY30aHIPydVOjcihX8Zh?p=preview