Ag-grid：如何调整列大小以适应内容？

Question

Ag-grid 有一个 sizeColumnsToFit 函数，可以调整列的大小以适合屏幕，但我想要的是调整列的大小以适合数据。换句话说，我希望每列的宽度是适合其内容所需的最小值（不截断字符串和添加省略号），即使这意味着我必须水平滚动才能看到某些列。

autoSizeColumns 函数似乎使所有列的宽度相等，而忽略内容的宽度。

您可以在本页的“调整大小示例”演示中看到这两个功能。

对于“size to fit”选项，您可以在某些列中看到截断的字符串，但在第一列中看不到，大概是因为它具有“suppressSizeToFit: true”。但是将该选项添加到所有列定义并不能解决问题；某些列中仍然存在一些截断，而其他列则比内容所需的宽。

这是该示例的代码：

const columnDefs = [
  { field: 'athlete', width: 150, suppressSizeToFit: true },
  {
    field: 'age',
    headerName: 'Age of Athlete',
    width: 90,
    minWidth: 50,
    maxWidth: 150,
  },
  { field: 'country', width: 120 },
  { field: 'year', width: 90 },
  { field: 'date', width: 110 },
  { field: 'sport', width: 110 },
  { field: 'gold', width: 100 },
  { field: 'silver', width: 100 },
  { field: 'bronze', width: 100 },
  { field: 'total', width: 100 },
];

const gridOptions = {
  defaultColDef: {
    resizable: true,
  },
  columnDefs: columnDefs,
  rowData: null,
  onColumnResized: (params) => {
    console.log(params);
  },
};

function sizeToFit() {
  gridOptions.api.sizeColumnsToFit();
}

function autoSizeAll(skipHeader) {
  const allColumnIds = [];
  gridOptions.columnApi.getAllColumns().forEach((column) => {
    allColumnIds.push(column.getId());
  });

  gridOptions.columnApi.autoSizeColumns(allColumnIds, skipHeader);
}

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', () => {
  const gridDiv = document.querySelector('#myGrid');
  new agGrid.Grid(gridDiv, gridOptions);

  fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
    .then((response) => response.json())
    .then((data) => gridOptions.api.setRowData(data));
});

有什么帮助吗？

我实际上正在尝试使用 run_api 与 JustPy 一起工作，并且我已经（有点）工作了，只是 sizeColumnsToFit 函数没有达到我的预期。

我的数据的大多数列都包含固定宽度的字符串（宽度不同，但列中所有字符串的宽度相同），所以我想我的“B 计划”是致力于等宽字体和字体大小，并尝试使用经过反复试验，得出基于字符串长度的宽度计算公式。

但是调整列大小以适应数据是很常见的事情（这不是 Excel 中自动调整的作用吗？），所以我希望有一个更强大的解决方案。

Answer 1

我想你会发现

autoSizeColumns

可以满足你的需要。

看看这个演示。

Answer 2

所以基本上 gridOptions 有一个名为 autoSizeStrategy 的实体，您可以设置所需的配置：

const autoSizeStrategy = {
    type: "fitCellContents",
  };

这就是您要添加到 gridOptions 中的内容。它的作用是，在网格列中设置数据后，将自动调整大小以适合内容。

对于其他策略，您可以查看下面的链接。

ag 网格文档 - autoSizeStrategy