如何在表初始化后更新 ag-Grid 的 autoGroupColumnDef 属性

Posted 2023-03-28

【中文标题】如何在表初始化后更新 ag-Grid 的 autoGroupColumnDef 属性

【英文标题】：How to update autoGroupColumnDef property of ag-Grid after table is initialized

【发布时间】：2020-08-13 17:54:55

【问题描述】：

我有一个使用 autoGroupColumnDef 属性分组的 ag-grid 表（企业版：22.1.0）。分组取决于表的数据，并且数据在单击按钮时加载。我需要在页面加载后，在加载数据之前更新autoGroupColumnDef 属性的字段名称（下面代码中的_this.colName）。

表格的网格选项：

_this.gridOptions = 
  defaultColDef: 
      sortable: true,
      resizable: true,
      filter: true
  ,
  columnDefs: _this.columnDefs,
  rowData: [],
  enableRangeSelection: true,
  autoGroupColumnDef: 
    headerName: "Sector",
    field: _this.colName,
    cellRendererParams: 
      suppressCount: true
    ,
    tooltipValueGetter: function(params) 
      return _this.tooltipVal
    
  ,
  suppressAggFuncInHeader: true, 
  enableBrowserTooltips: true
;

我在将数据设置到网格之前更新了变量_this.colName。我尝试了以下选项，但没有一个对我有用：

_this.gridOptions.api.refreshClientSideRowModel('group'); _this.gridOptions.api.refreshCells(); _this.gridOptions.autoGroupColumnDef.field = 'Column's Name'

任何帮助将不胜感激！

【参考方案1】：

有一个很好的解决方法。您可以设置 autoGroupColumnDef，然后删除并读取所有行分组。它将使用新名称重绘组列。

    gridOptions.autoGroupColumnDef.headerName = 'new_name';
    
    // Get current groupings
    var colstate = gridOptions.columnApi.getColumnState();
    var colstateclear = gridOptions.columnApi.getColumnState();

    // Clear groupings
    var x = 0, xcount = colstateclear.length;
    while ( x < xcount ) 
        colstateclear[x].rowGroupIndex = null;
        x += 1;
    
    gridOptions.columnApi.setColumnState(colstateclear);
    
    // Reset groupings  
    gridOptions.columnApi.setColumnState(colstate);

【参考方案2】：

我联系了 ag-grid 支持，显然这是一个错误，他们的积压工作中有它，目前没有可用的 ETA。他们提供的解决方法是使用：https://www.ag-grid.com/javascript-grid-grouping/#showRowGroup。

这并不是一个很好的解决方法，因为分组的列是分开的，使页面显得局促。还有一些外观和感觉问题不断出现（例如：在每列之前添加的空白空间随着每个分组列的增加而增加。即第二列之前添加了 1 厘米，第三列之前添加了 2 厘米，依此类推。我猜这是为了在 group 列中带来分组外观，但是当列分开时你不会期望这种行为。）

ag-grid 的工单积压 ID：AG-3359 - 允许在 API 调用列中使用 autoGroupColumn，目前无法在创建后动态更改它。 （即，setColumnDefs ...）

跟踪进度的链接：https://www.ag-grid.com/ag-grid-pipeline/

【讨论】：

感谢您与 ag-grid 团队联系以澄清此问题。

【参考方案3】：

有一种直接的方法可以使用 setAutoGroupColumnDef

更新 autoGroupColumnDef 对象及其属性

this.gridOptions.api.setAutoGroupColumnDef(<ColDef>
    ...this.gridOptions.autoGroupColumnDef, // preserve the other settings except the ones you need to change
    minWidth: 500
  )

如果展开运算符有任何问题， 手动执行：

this.gridOptions.api.setAutoGroupColumnDef(<ColDef>
    // ...this.gridOptions.autoGroupColumnDef, // preserve the other settings except the ones you need to change
headerName: this.gridOptions.autoGroupColumnDef.headerName,
    minWidth: 500
  )

还有一件事，如果您有任何视觉错误，请添加此内容，例如：标题行已调整大小但下面的行保持与之前的状态相同，因此需要刷新模型：

this.gridOptions.api.refreshClientSideRowModel();

此刷新不是理想的解决方案，因为它会刷新所有内容，因此您将失去扩展级别，例如，仍然不知道如何保留所有设置。 https://angulargrid.com/angular-grid/client-side-model/#refreshing-the-client-side-model

目前最好的解决方案是你使用：

this.gridOptions.api.redrawRows();

如果是则保持行展开，如果是则选中复选框。