6

我的问题是我的网格根本不会保持响应，或者如果我尝试创建一个没有那么多列的网格，整个网格看起来就很奇怪。我想让它伸展到它的容器宽度。这是我期望 sizeColumsToFit 做的。我收到警告：ag-Grid: tried to call sizeColumnsToFit() but the grid is coming back with zero width, maybe the grid is not visible yet on the screen?但我该如何解决这个问题。例如，我从减速器加载数据，因此会发生重新渲染，或者当我的数据处于获取状态时，我有一个加载微调器。你们采取什么模式来解决这个问题？

这是一个例子：在此处输入图像描述

onGridReady(params) {
        const { mode } = this.props;
        this.gridApi = params.api;
        this.gridApi.mode = mode;
        this.columnApi = params.columnApi;
        this.gridApi.addDispatcher = this.props.add;
        this.gridApi.deleteDispatcher = this.props.delete;
        this.gridApi.updateDispatcher = this.props.update;
        console.log(window.innerWidth);
        this.sizeToFit();
        window.onresize = () => {
          this.gridApi.sizeColumnsToFit();
        };
      }

这是我的渲染方法：

determineRender() {
    const {isWaiting, columnDefs, schema } = this.props;
    let { data } = this.props;
    data = denormalize(data.result, schema, data.entities);
    data = _.orderBy(data, ['id'], ['desc']);
    if (isWaiting) {
      return (
        <div className={cx('grid-loading')}>
          <CircularProgress className={cx('grid-progress')} color="accent" size={500} />
        </div>
      );
    }

    return (
      <div className={cx('grid-full')}>
        <div
            className={cx('grid-full') + ' ag-theme-material'}>
          <AgGridReact
                  columnDefs={columnDefs}
                  enableSorting
                  enableColResize
                  deltaRowDataMode
                  getRowNodeId={nodeData => nodeData.id}
                  rowData={data}
                  pagination
                  paginationPageSize={15}
                  rowSelection={this.state.rowSelection}
                  defaultColDef={this.state.defaultColDef}
                  enableFilter
                  enableCellChangeFlash
                  getRowHeight={this.state.getRowHeight}
                  onGridReady={this.onGridReady} />
        </div>
      </div>
    );
  }

编辑：我怀疑发生了所有事情，网格合法不知道 onGridReady 中的宽度，因为 dom 尚未完成加载，但是其他所有内容都已初始化。如果我这样做：setTimeout(() => this.gridApi.sizeColumnsToFit(), 500);在 onGridReady(params) {...} 中它会起作用，但会有延迟，并且并非每个人的浏览器都以相同的速度运行。处理这个的任何范例？

4

1 回答 1

1

您可以使用 onFirstDataRendered 事件并调用 sizeColumnsToFit。您可以在此处查看文档。

于 2019-04-03T18:30:08.510 回答