现在，我看到指定列网格宽度的唯一方法是在列定义中添加一个宽度属性，例如：
columnDefs: any[] = [
{
headerName: 'ID',
field: 'id',
width: 50,
type: 'numericColumn'
}
];
但是正如我们在下面的例子中看到的，网格的列并没有占据屏幕显示的整个宽度。
https://stackblitz.com/edit/ag-grid-bss-test-nnojxg?file=app%2Fapp.component.ts
我希望能够为每列设置百分比宽度，但我不知道如何做到这一点。
使用width: 10% 不起作用。
有什么解决方法吗？
【问题讨论】：
标签： angular ag-grid percentage column-width
不，默认情况下不可能。您只能以绝对数字设置宽度、minWidth 和 maxWidth。在 AgGrid 中使用动态宽度最简单的方法是使用 this.gridOptions.api.sizeColumnsToFit();，因此它们采用最小宽度（根据 colDef 中指定的宽度）作为单元格中现有值的宽度。
您可以尝试根据窗口宽度手动（onInit）计算width，然后重新初始化AgGrid。但我不建议这样做，因为当用户调整窗口大小时，您需要再次计算（在 Window-Resize-HostListener 中）并重新初始化网格。 debounce-time 可能是可能的（因此您不会在用户拖动浏览器角时每毫秒都重新初始化），但这有点hacky，最后您会得到很多非常难以调试和难以维护的代码。
【讨论】：
通过使用@Phil 建议的方法，我可以通过这种方式使用gridReady 事件让网格采用可用的视口宽度：
在组件模板中：
<ag-grid-angular class="ag-theme-balham" [gridOptions]="gridOptions"
(gridReady)="onGridReady($event)">
</ag-grid-angular>
在组件打字稿文件中：
onGridReady(params) {
params.api.sizeColumnsToFit();
}
演示：
https://stackblitz.com/edit/ag-grid-bss-test-aejozx?file=app%2Fapp.component.html
【讨论】：
我的解决方法是计算 AG-Grid 的父 div 的宽度并按百分比计算像素以分配给特定列。这是使用 jQuery 的解决方案：
function columnWidth(id, percentage){
var div = $("#" + id); // HTML ID of Grid
var parent = div.parent();
var width = parent.width() * percentage/100; // Pixel calculation
return width;
}
var colDefs = [
{
field: "name",
width: columnWidth("myGridId",25)
}
]
这对我来说很好。这是一个工作版本：stackblitz.com/edit/js-l1gmbf
【讨论】：
我的解决方法是创建一个将数值从 rems 转换为像素的函数：
const remInPixel = parseFloat(getComputedStyle(document.documentElement).fontSize);
const convertRemToPixel = (rem) => rem * remInPixel;
然后在列定义的width 属性中使用它。
ag-grid 列定义的使用示例：
{
headerName: "Example",
field: "exampleField",
width: convertRemToPixel(3)
}
确实，这里没有太多秘密，只要您需要使用 像素值，你可以使用这个函数。
【讨论】：
我发现做到这一点的最佳方法是以像素为单位写下您的近似宽度，然后使用 sizeColumnsToFit 使其具有响应性（扩大和缩小浏览器宽度）并始终采用这个百分比宽度。
columnDefs: ColDef[] = [
{
headerName: 'User Name',
field: 'user',
width: 425, // <==== Play with this number until it is the approximate percentage width
},
// other column definitions
];
// onGridSizeChanged will get called when grid is ready and every time the grid's width changes
onGridSizeChanged(params: GridSizeChangedEvent) {
params.api.sizeColumnsToFit();
}
您的 HTML 可能看起来像
<ag-grid-angular
// your other bindings can go here
[columnDefs]="columnDefs"
(gridSizeChanged)="onGridSizeChanged($event)">
</ag-grid-angular>
【讨论】：
我遇到了同样的问题。我删除了this.gridApe.sizeColumnsToFit(); 并在def 列中使用了flex property。
例如，我有 3 列； ID，名称，删除。我需要使“名称”列占用最多的空间。所以，columnDef 将是：
columnDefs: ColDef[] = [
{
headerName: "#id", field: 'id',
filter: true,
flex: 1
},
{
headerName: "Name", field: 'name',
flex: 3
},
{
headerName: 'Delete', field: "delete",
flex: 1
},
];
所以，列名占用空间最多，表格宽度占用父宽度。
【讨论】：