angular - ag grid sizeColumnsToFit 列不工作

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

score 12 · Accepted Answer

试试这个代码..同时定义 columnDefs set 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(); 
}

score 3 · Accepted Answer

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

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

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

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

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

score 2 · Accepted Answer

2

保持包含 AgGrid 的容器的宽度小于 100% 对我有用。

于 2019-04-12T14:28:45.527 回答

score 2 · Accepted Answer

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

score 1 · Accepted Answer

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

score 0 · Accepted Answer

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

angular - ag grid sizeColumnsToFit 列不工作

6 回答 6

Related

Reference