AG 网格不均匀的列宽

Question

在使用 api.sizeColumnsToFit() 时，我正在努力让我的网格可靠地均匀地显示其列宽。

我已将我的网格配置为在父 div/浏览器窗口调整大小时调整列的大小：

this.gridOptions = <GridOptions>{
        onModelUpdated: () => {
            this.gridOptions.api.sizeColumnsToFit();
        },
        onGridSizeChanged: () => {
            this.gridOptions.api.sizeColumnsToFit();
        }
    };

这可行，但结果列宽通常不均匀。请参阅下面第 13 周的每月第一天和第二天：

非常欢迎任何使这更可靠的建议。

Answer 1

这里是plnkr，为您提供可能的解决方案。本质上，这是您可以做的：

var windowWidth = document.querySelector('#myGrid').offsetWidth - 170 - 17,
// calculate the window width minus any columns you don't want to size for
   and a little magic number for the vertical scrollbar (17 was for chrome on mac)

    sizableColumns = gridOptions.columnApi.getColumnState().map(e=>e.colId).filter(e=>e!='athlete'),
// get the colId of only the columns that you want to resize 

    sizableColumnWidth = Math.floor(windowWidth/sizableColumns.length);
// calculate the width of each column by dividing the available width by the number of columns

    sizableColumns.forEach(e=>gridOptions.columnApi.setColumnWidth(e,sizableColumnWidth))
// iterate through the columns you want to resize and set their new column width

---

但是，我认为您最好考虑一下有多少用户将调整其浏览器窗口的大小...不仅如此，还要多次调整他们的窗口大小缓慢。检查这些帖子：

http://davidgoss.co/2014/04/15/users-do-resize-their-browser-windows-take-2/

https://medium.com/@stephenkeable/do-users-resize-their-browser-windows-or-is-it-just-developers-and-designers-e1635cbae1e1

这两个帖子都表明大约 2% 的桌面用户正在调整浏览器的大小。并且一小部分将多次缓慢地调整浏览器的大小。也许您只是告诉这些

---

技术说明：

您报告的行为正在发生，因为调整列大小以适应的算法非常复杂。它考虑了所有列的相对大小并适当地加宽它们，所以如果你有 4 列大小为 100、200、100；并且您调整了窗口的大小，那么中间列仍将显示为其他列大小的两倍。

该算法还将以像素为单位的剩余内容放置到第一列，因此如果您有 9 列和 100 像素来适应它，则 8 列的大小为 11 像素，一个列的大小为 12。这样一来，列将真正“适合”并且不会留下一些未被列填充的像素（如我建议的选项）