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

Question

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

Table的网格选项：

_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。我尝试了以下选项，其中 none 对我有用：

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

如有任何帮助，我们将不胜感激！

Answer 1

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

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

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

Link 跟踪进度：https://www.ag-grid.com/ag-grid-pipeline/

Answer 2

对此有一个很好的解决方法。您可以设置 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);

Answer 3

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

更新 autoGroupColumnDef object 及其属性

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
  })

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

this.gridOptions.api.refreshClientSideRowModel();

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

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

this.gridOptions.api.redrawRows();

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

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

How to update autoGroupColumnDef property of ag-Grid after table is initialized

angularjs

ag-grid

ag-grid-angular