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

但是，我认为通过考虑有多少用户要调整浏览器窗口大小来改善您的情况可能会更好......不仅如此，还要慢慢调整窗口 < / strong>即可。查看这些帖子：

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％的桌面用户正在调整浏览器大小。而一个小得多的部分将缓慢地多次调整他们的浏览器。也许您只是告诉这些＆lt; 1％不要像他们那样调整浏览器的大小，或者允许手动调整列的大小，这样如果他们确实注意到这种奇怪的行为，他们可以自己调整列的大小。

技术说明：

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

该算法还将剩余的任何剩余像素放置到第一列，因此如果您有9列和100px以适合它，则8列的大小将为11 px，其中一列的大小为12.这样的列将真正“适合”，而不是留下一些没有填充列的像素（如我建议的选项）