如何在一行上禁用行组扩展功能？

Question

在SO里找了很多都没有找到具体的解决办法，我不得不问这个问题。我想要的是在单个组行上隐藏行组图标。如下图所示，我有一个只有一条记录的组行，该记录已显示在第一行中。我想隐藏那条记录上的折叠图标。当组行多于一个时，仅显示 collapse/expand 图标。

有关参考，请参阅 AG-Grid Master-Detail Section，此处他们指定要展开的行。我在这里需要的相同功能。

我正在使用以下版本的 AG-Grid Angular (v9)

"@ag-grid-community/core": "^25.3.0",
"@ag-grid-enterprise/row-grouping": "^26.0.0",
"@ag-grid-enterprise/server-side-row-model": "^25.3.0",
"ag-grid-angular": "^25.3.0",
"ag-grid-community": "^25.3.0",

这是我的代码：

this.rowModelType = 'serverSide';
this.serverSideStoreType = 'partial';
this.cacheBlockSize = 20;
this.gridOptions = {
  rowData: this.loanlist,
  columnDefs: this.generateColumns(),
  getNodeChildDetails: function(rowItem) {
    if (rowItem.orderCount > 1) {
      return {
        expanded: true
      }
    } else {
      return null;
    }
  }
}

问题是 getNodeChildDetails 无法访问。浏览器控制台向我显示以下警告并且我上面的代码不起作用。

Answer 1

解决方案并不难 - 但可能会很艰难，同意（有一天会遇到同样的情况）

所以 - 答案是 自定义单元格渲染器。

它看起来有点不同（collapse\expande 操作在单独的列中）- 但您可以完全控制它。

此操作的自定义呈现组件如下所示：

template: `
    <em 
        [ngClass]="{'icon-arrow-down':params.node.expanded, 'icon-arrow-right': !params.node.expanded}" 
        *ngIf="yourFunctionHere()" 
        (click)="toggleClick()">
    </em>`,

export class MasterDetailActionComponent implements ICellRendererAngularComp {
    private params: any;

    agInit(params: any): void {
        this.params = params;
    }

    public toggleClick(): void {
        this.params.node.setExpanded(!this.params.node.expanded);
    }

    public yourFunctionHere(): boolean {
        // so here you are able to access grid api via params.api
        // but anyway params.node - would give you everything related to row also 
    }

    refresh(): boolean {
       return false;
    }
}

在 [ngClass] - 您可以处理视觉部分（图标） - modify\customize

并且不要忘记在 gridOptions:

中添加此组件

frameworkComponents: {
    'masterDetailActionCellRenderer': MasterDetailActionComponent,
}

并将此列包含在您的 columnDef:

columnDefs: [
    headerName: "",
    width: 75,
    field: "expand",
    cellRenderer: "masterDetailActionCellRenderer",
    filter: false,
    resizable: true,
    suppressMenu: true,
    sortable: false,
    suppressMovable: false,
    lockVisible: true,
    getQuickFilterText: (params) => { return '' }
]

Answer 2

在 autoGroupColumnDef 上使用 cellRendererSelector 很容易实现。您可以指定是显示默认 agGroupCellRenderer 还是仅显示 return 另一个渲染器（或者，仅显示 return null）：

    this.autoGroupColumnDef = {
      cellRendererSelector: (params) => {
        if (params.value == 'United States') {
          return null;
        } else {
          return {
            component: 'agGroupCellRenderer',
          };
        }
      },
    };

在下面的示例中，我们禁用了美国行的行组展开功能。

查看 following plunkr 中的实现。

如何在一行上禁用行组扩展功能？

How to disable row group expand functionality on one row?

ag-grid

ag-grid-angular