有没有办法以百分比指定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

我遇到了同样的问题。我删除this.gridApe.sizeColumnsToFit();并使用了flex property列 def 。例如，我有 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
  },
];

因此，列名占用最多空间，表宽度占用父宽度。

Answer 2

通过使用@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

Answer 3

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

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

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