Ag-grid：视口未加载数据

Question

这是这个问题的第 2 部分：

我正确定义了视口界面请求的所有函数，但我无法将数据加载到网格中，正如您在这个插件中看到的那样：

https://plnkr.co/edit/EEEJULRE72nbPF6G0PCK

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

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.

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;

我在这里分叉了你的 plunker（进行了上述更改）：https://plnkr.co/edit/cY30aHIPydVOjcihX8Zh?p=preview

Ag-grid：视口未加载数据

Ag-grid: viewport not loading data

javascript

angularjs

ag-grid