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

Question

在没有任何特定解决方案的情况下在 SO 中进行了大量搜索后，我不得不问这个问题。 我想要的是在单个组行上隐藏行组图标。如下图所示，我有一个只有一条记录的组行，该记录已显示在顶行中。我想隐藏该单条记录上的折叠图标。仅当组行多于一时才会显示折叠/展开图标。

有关参考，请参阅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

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

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

它看起来会有点不同（折叠\展开操作的单独列）-但您可以完全控制它。

此操作的自定义渲染组件如下所示：

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] - 你可以处理视觉部分（图标） - 修改\自定义

别忘了在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 还是简单地返回另一个渲染器（或者，只返回null）：

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

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

请参阅following plunkr 中的实现。