当服务器没有返回数据时,ag-grid 继续显示加载图标

我在 Ag-grid (Angular) 中遇到了一个奇怪的行为。当我使用 serverSide 选项并且没有从服务器返回数据时,网格会显示 cacheBlockSize 中提到的所有行的加载图标。我已经尝试了尽可能多的选项来隐藏这些空加载行,但没有任何结果。

我试图在官方示例页面中复制相同的内容。幸运的是,我可以复制类似的行为。请参阅官方示例页面的此编辑版本,其中我从假服务器调用传递了一个空数组:

https://plnkr.co/edit/Egw9ToJmNE7Hl6Z6

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    this.http
      .get('https://www.ag-grid.com/example-assets/olympic-winners.json')
      .subscribe((data) => {
        let idSequence = 0;
        data.forEach((item) => {
          item.id = idSequence++;
        });
        const server = new FakeServer(data);
        const datasource = new ServerSideDatasource(server);
        params.api.setServerSideDatasource(datasource);
      });
  }
}

function ServerSideDatasource(server) {
  return {
    getRows: (params) => {
      setTimeout(() => {
        const response = server.getResponse(params.request);
        if (response.success) {
          params.successCallback(response.rows, response.lastRow);
        } else {
          params.failCallback();
        }
      }, 2000);
    },
  };
}
function FakeServer(allData) {
  return {
    getResponse: (request) => {
      console.log(
        'asking for rows: ' + request.startRow + ' to ' + request.endRow
      );
      const rowsThisPage = allData.slice(request.startRow, request.endRow);
      const lastRow = allData.length <= request.endRow ? data.length : -1;
      return {
        success: true,
        rows: [],
        lastRow: lastRow,
      };
    },
  };
}

下面给出了 plunker 输出的屏幕截图。

Official plunker example edited with empty array

stack overflow ag-grid continues to show the loading icon when no data returned from the server
原文答案
author avatar

接受的答案

刚刚发现这是 lastRow 值的问题。如果行为空但 lastRow 不是 -1,则它会尝试加载数据并根据 cacheBlockSize 显示所有行的加载图标。

固定代码如下:

function FakeServer(allData) {
  return {
    getResponse: (request) => {
      console.log(
        'asking for rows: ' + request.startRow + ' to ' + request.endRow
      );
      let data = []; //allData;
      const rowsThisPage = data.slice(request.startRow, request.endRow);
      const lastRow = data.length <= request.endRow ? data.length : -1;
      return {
        success: true,
        rows: rowsThisPage,
        lastRow: lastRow,
      };
    },
  };
}

答案:

作者头像

AG Grid 28 的更新:

function FakeServer(allData) {
  return {
    getResponse: (params) => {
      const request = params.request;
      console.log(
        'asking for rows: ' + request.startRow + ' to ' + request.endRow
      );
      let data = []; //allData;
      const rowsThisPage = data.slice(request.startRow, request.endRow);
      const lastRow = data.length <= request.endRow ? data.length : -1;
      params.success({ rowData: rowsThisPage, rowCount: lastRow });
    },
  };
}