Ag 网格：在运行时自动调整列在 chrome/IE 11 中不起作用

Posted 2023-03-28

【中文标题】Ag 网格：在运行时自动调整列在 chrome/IE 11 中不起作用

【英文标题】：Ag grid: Autosizing columns at run time not working in chrome/IE 11

【发布时间】：2020-03-03 18:52:16

【问题描述】：

我在角度框架中有 Ag 网格，在初始加载数据后，我正在动态应用分组（行分组），之后我尝试扩展所有组，一旦网格被分组并且行被扩展，我想自动调整大小列以避免显示省略号（值...）。

在下面的 plunker 我已经重现了这个问题。我看到分组后，我使用了 hack setTimeout 函数来展开/折叠或自动调整列的大小。

Autosize columns plunker using hack setTimeout, check app.component.ts file

我不想使用这种 hacky 方法，因为我不知道行（数据）的确切数量，所以在某些情况下 setTimeout 不起作用。

在 IE11 中也很慢，可能需要更多的超时值。

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

    this.http
      .get(
        "https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json"
      )
      .subscribe(data => 
        data[0].athlete = 'very very very long text very very very long text very very very long text very very very long text'
        this.rowData = data;
         this.gridColumnApi.addRowGroupColumns(["sport", "year", "country", "athlete"]);

        // This will not work
        // this.setDefaultExpanded();

        // This will work (hacky solution)
        setTimeout(() => 
          this.setDefaultExpanded();
        , 1000);

        // This will not work
        // this.autoSizeAll();

        // This will work (hacky solution) 
        setTimeout(() => 
           this.autoSizeAll();
        , 2000);

      );
  



 setDefaultExpanded() 
    this.gridApi.forEachNode(node => 
        if (node.group) 
            node.expanded = true;
          
        );
        this.gridApi.onGroupExpandedOrCollapsed();
  


  autoSizeAll() 
      const allColumnIds = [];
      if (this.gridColumnApi) 
        this.gridColumnApi.getAllDisplayedColumns().forEach(column => 
          allColumnIds.push(column.colId);
        );
        this.gridColumnApi.autoSizeColumns(allColumnIds);
      

  

感谢任何帮助!!!

谢谢

【问题讨论】：

尝试在代码中使用 settimeout setTimeout(function() this.gridColumnApi.autoSizeColumns(allColumnIds);,200)

我很久以前就工作过，但是每当我遇到这样的问题时，都会使用超时功能，但我不确定这是否是一种好习惯。请确认它是否有效

感谢您的回复，但我已经在尝试了，我不想使用这个 hack (setTimeout)

【参考方案1】：

请使用 onFirstDataRendered 事件。一旦数据加载到网格中，这将被触发。

var gridOptions = 
    defaultColDef: 
        resizable: true
    ,
    columnDefs: columnDefs,
    rowData: null,
    onFirstDataRendered: onFirstDataRendered
;

function onFirstDataRendered(params) 
    const allColumnIds = [];
  if (this.gridColumnApi) 
    this.gridColumnApi.getAllDisplayedColumns().forEach(column => 
      allColumnIds.push(column.colId);
    );
    this.gridColumnApi.autoSizeColumns(allColumnIds);
  

【讨论】：

我几乎尝试了所有的ag grid firstDataRendered、modelUpdated、rowDataChanged、rowDataUpdated事件。这里的问题是 autosize 在展开/折叠操作之前被调用，因为它是 forEachNode 的异步回调。而且在我的情况下，网格每 5 秒刷新一次，因此对此类事件进行自动调整会更昂贵。

你也可以在 Github 问题上发帖。抱歉，我找不到修复程序

肯定会到达 ag grid 社区，但感谢您的回复