ag grid sizeColumnsToFit 列不工作答案

【问题标题】：ag grid sizeColumnsToFit for columns not workingag grid sizeColumnsToFit 列不工作
【发布时间】：2017-07-18 23:36:32
【问题描述】：

我使用了 ag-grid ng2 并尝试应用 sizeColumnsToFit。例如：如果有 4 列，那么它应该自动调整大小并适合网格的宽度。 gridOptions.api.sizeColumnsToFit() 不起作用。

var gridOptions = {
    columnDefs: columnDefs,
    rowData: null,
    enableColResize: true
};

this.columnDefs = [
     {headerName: "Age", field: "age", width: 90, minWidth: 50, maxWidth: 100},
    {headerName: "Country", field: "country", width: 120},
    {headerName: "Year", field: "year", width: 90},
    {headerName: "Date", field: "date", width: 110}


    ];

 gridOptions.api.sizeColumnsToFit();

【问题讨论】：

你能分享你的代码吗？需要看看你到目前为止是如何实现的......

标签： angular ag-grid-ng2

【解决方案1】：

试试这段代码。在定义 columnDefs 时设置 suppressSizeToFit: false for all fields，

this.columnDefs = [
 {headerName: "Age", field: "age", width: 90, minWidth: 50, maxWidth: 100,suppressSizeToFit: false},
 {headerName: "Country", field: "country", width: 120,suppressSizeToFit: false},
 {headerName: "Year", field: "year", width: 90,suppressSizeToFit: false},
 {headerName: "Date", field: "date", width: 110,suppressSizeToFit: false}
 ];

然后在 onGridReady 中使用下面的代码。

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

【讨论】：

嗨@TutorBoys：你们找到解决办法了吗？

【解决方案2】：

在呈现数据时调整列大小主要有两种情况，您可能希望根据网格数据调整列的大小：

行数据在网格初始化时可用
行数据在网格初始化后可用，通常是在通过服务器调用异步设置数据之后

在第一种情况下，您可以在 gridReady 或 firstDataRendered 事件中触发 autoSizeColumns()，因为行数据将在网格准备好时呈现。

然而，在第二种情况下，您只能可靠地使用 firstDataRendered，因为行数据将在网格准备好后可用并因此呈现。

https://www.ag-grid.com/javascript-grid-resizing/

【讨论】：

什么意思？

【解决方案3】：

保持包含 AgGrid 的容器的宽度小于 100% 对我来说是诀窍。

【讨论】：

我不敢相信这有效。我添加了宽度 99.9% 并且滚动条消失了。奇怪

【解决方案4】：

您需要向columnApi.autoSizeColumns() 提供所有列 ID 的列表，如下所示：

function onFirstDataRendered (params) {
  params.api.sizeColumnsToFit()
  window.setTimeout(() => {
    const colIds = params.columnApi.getAllColumns().map(c => c.colId)
    params.columnApi.autoSizeColumns(colIds)
  }, 50)
}

…

<AgGridReact onFirstDataRendered={onFirstDataRendered} … />
…

【讨论】：

【解决方案5】：

我实现了一个可重用的 ag-grid react 包装器组件，它会自动调整其列的大小以适应其容器的宽度。它监视容器的宽度并监听window.resize 事件，然后在需要时在useEffect 中调用gridApi.sizeColumnsToFit()。如果有兴趣，请阅读步骤 here 中的代码，或在 CodeSandBox 的工作示例 here 中查看全部内容。

【讨论】：

【解决方案6】：

import { FirstDataRenderedEvent } from '@ag-grid-community/core';
 public onFirstDataRedndered(event: FirstDataRenderedEvent){
    event.api.sizeColumnsToFit();
 }

【讨论】：