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

Posted 2023-03-28

【中文标题】如何在一行上禁用行组扩展功能？

【英文标题】：How to disable row group expand functionality on one row?

【发布时间】：2021-11-15 06:08:19

【问题描述】：

在没有任何特定解决方案的情况下在 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 不可访问。浏览器控制台向我显示以下警告并且我上面的代码不起作用。

【参考方案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 '' 
]

【参考方案2】：

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

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

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

请参阅following plunkr 中的实现。

【讨论】：

简单直接地回答我想要的，但我将按照他的详细描述应用@un.spike 答案。如果我想在分组列中显示更多详细信息，也许我需要那个。