有没有办法以百分比指定ag-grid列宽？

Question

现在，我看到指定列网格宽度的唯一方法是向列定义添加width属性，如：

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%不起作用。

这有什么解决方法吗？

Answer 1

不，默认情况下不可能。您只能以绝对数字设置width，minWidth和maxWidth。在AgGrid中使用动态宽度最简单的方法是使用this.gridOptions.api.sizeColumnsToFit();，因此它们采用最小宽度（根据colDef中的指定宽度）来获取其单元格中的现有值。

您可以尝试根据窗口宽度手动计算width（onInit），然后重新初始化AgGrid。但我不建议这样做，因为当用户调整窗口大小时，您需要再次计算（在Window-Resize-HostListener中）并重新初始化网格。去抖时间可能是可能的（所以当用户拖动他的浏览器角落时你不会每毫秒重新初始化），但它有点hacky，最后你会得到很多非常难以调试的和难以维护的代码。

Answer 2

通过使用@Phil建议的方法，我可以使用gridReady事件以这种方式使网格获取可用的视口宽度：

在组件模板中：

<ag-grid-angular  class="ag-theme-balham" [gridOptions]="gridOptions"
  (gridReady)="onGridReady($event)"> 
</ag-grid-angular>

在组件typescript文件中：

onGridReady(params) {
  params.api.sizeColumnsToFit();
}

演示：

https://stackblitz.com/edit/ag-grid-bss-test-aejozx?file=app%2Fapp.component.html

Answer 3

我的解决方法是创建一个将数值从rems转换为像素的函数：

const remInPixel = parseFloat(getComputedStyle(document.documentElement).fontSize);

const convertRemToPixel = (rem) => rem * remInPixel;

然后在列定义的width属性中使用它。

ag-grid列定义的用法示例：

{
    headerName: "Example",
    field: "exampleField",
    width: convertRemToPixel(3)
}

实际上，这里没有太多秘密，每当你需要使用像素值时，你可以使用这个功能。

Answer 4

我的解决方法是计算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