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

Question

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

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

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

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

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

我的解决方法是创建一个将数值从 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

Answer 5

我发现最好的方法是以像素为单位写下你的大概宽度，然后在 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>

Answer 6

我遇到了同样的问题。我删除了 this.gridApe.sizeColumnsToFit(); 并在 def 列中使用了 flex property。例如，我有 3 列； ID，名称，删除。我需要让列 'Name' 占用最多 space。所以，columnDef 将是：

columnDefs: ColDef[] = [
  {
    headerName: "#id", field: 'id',
    filter: true,
    flex: 1
  },
  {
    headerName: "Name", field: 'name',
    flex: 3
  },
  {
    headerName: 'Delete', field: "delete",
    flex: 1
  },
];

所以，列名占最大space，table宽度占父级宽度

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

Is there a way to specify ag-grid column width in percentage?

column-width

percentage

ag-grid

angular