如何根据行数据使 ag-grid 的列宽响应？答案

【问题标题】：How to make the column width of ag-grid responsive based on row data?如何根据行数据使 ag-grid 的列宽响应？
【发布时间】：2019-03-10 23:54:59
【问题描述】：

ag-grid 中的列：

columnsDefs = [
   {
    headerName: 'Name',
    field: 'name'
   },
   {
    headerName: 'Age',
    field: 'age'
   },
   {
    headerName: 'Description',
    field: 'description'
   } 
];

描述中的字符长度可能会有所不同。例如，某行可能只有 10 个字符，而某行可能有 50 个字符。如果我设置列宽，如果描述的字符长度更长，那么某些字符将不会显示。

api.sizeColumnsToFit() 将缩放列以适应屏幕的可用宽度。我想根据其行数据实现“描述”列的宽度以做出响应。

【问题讨论】：

标签： angular typescript ag-grid

【解决方案1】：

你可以使用columnApi方法：autoSizeColumns

autoSizeColumn(colKey)根据其内容自动调整列的大小。

【讨论】：

嗨，我想在每次服务器调用时检查并更改排序（到不同的列）。 OnGridReady 在数据绑定之前被调用，所以我使用了 onFirstDataRendered()。这在 onInit() 方法中初始化 gridOption 时第一次起作用。对于下一次服务器调用，不会调用 onFirstDataRenfered()。数据加载到网格后总是回调哪个事件？
数据加载完毕后再次调用autoSize。
谢谢，但在评论中我问的是在第一次加载网格时以及在其他服务器调用之后知道任何事件回调的不同场景。你能帮我解决这个问题吗？

【解决方案2】：

要将所有列的大小调整为内容宽度，请使用： columnApi.autoSizeAllColumns()。但是，在 firstDataRendered() 事件上调用此方法。如果你有很多列，你也可以设置suppressColumnVirtualisation=true。

解释： columnApi.autoSizeAllColumns() 方法调整列的大小以换行每列的内容宽度。但是，要让网格知道内容宽度是多少，它首先必须渲染数据。因此，应该在firstDataRendered() 事件上调用此方法。如果列数更多，则水平滚动条后面的列不会立即渲染，因为 ag-grid 中的延迟加载。因此，autoSizeAllColumns() 无法调整这些列的大小。为此，需要使用网格的suppressColumnVirtualisation=true 属性禁用延迟加载。

【讨论】：

【解决方案3】：

如果您要参加此讨论，希望表格的宽度能够根据浏览器的当前宽度自适应地增加或减少，您可以通过以下方式做出反应：

let width = 100

const onFirstDataRendered = (params) => {
    params.api.sizeColumnsToFit();
};

const onGridSizeChanged = (params) => {
    let columnCount = params.columnApi.columnModel.gridColumns.length
    width = params.clientWidth / columnCount
    params.api.sizeColumnsToFit();
};


return (

    <div style={{ width: '100%', height: '100%' }}>
        <div id="grid-wrapper" style={{ width: '100%', height: '263px' }}>
            <div
                id="myGrid"
                style={{
                    height: '100%',
                    width: '100%',
                }}
                className="ag-theme-alpine-dark"
            >
                <AgGridReact
                    defaultColDef={{ resizable: true }}
                    onFirstDataRendered={onFirstDataRendered}
                    onGridSizeChanged={onGridSizeChanged}
                    rowData={rowData}
                >
                    <AgGridColumn field="data" width={width}></AgGridColumn>
                    <AgGridColumn field={columnData[1].field} width={width}></AgGridColumn>
                    <AgGridColumn field={columnData[2].field} width={width}></AgGridColumn>
                </AgGridReact>
            </div>
        </div>
    </div>
);

};

【讨论】：