6

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

6 回答 6

12

试试这个代码..同时定义 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(); 
}
于 2017-12-20T15:38:57.297 回答
3

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

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

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

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

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

于 2019-06-12T09:45:47.250 回答
2

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

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

您需要提供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} … />
… 
于 2020-07-10T11:56:39.503 回答
1

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

于 2021-03-15T10:36:30.107 回答
0
import { FirstDataRenderedEvent } from '@ag-grid-community/core';
 public onFirstDataRedndered(event: FirstDataRenderedEvent){
    event.api.sizeColumnsToFit();
 }
于 2021-05-21T07:04:31.803 回答