Question

我使用了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();

Answer 1

尝试此代码..在定义columnDefs时为所有字段设置suppressSizeToFit：false，

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(); 
}

Answer 2

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

Answer 3

让包含AgGrid的容器的宽度保持小于100％的大小对我来说是成功的秘诀。

Answer 4

在渲染数据时调整列大小在两种情况下，您可能需要根据网格数据调整列大小的情况是

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

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

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

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

Answer 5

您需要为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} … />
…

对于不起作用的列，ag grid sizeColumnsToFit

5 个答案: