Ag-grid：視口未加載數據

Question

這是這個問題的第 2 部分： Ag-grid viewport: cannot read property 'bind' of undefined

我正確定義了視口界面請求的所有功能，但我無法將數據加載到網格中，正如您在此 plunker 中看到的：

https://plnkr.co/edit/EEEJULRE72nbPF6G0PCK

特別是，文檔中描述的這些階段似乎沒有被觸發：

2. 數據源響應數據的大小（例如 1,000 行）並調用 params.setRowCount(1000)。 網格通過調整垂直滾動的大小以適合 1,000 行來響應。

3. 網格，由於它在屏幕上的物理尺寸，計算出它可以在任何給定時間顯示 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