过滤具有分组数据的 ag-grid 后展开/折叠图标仍然可见

Question

我有一个带有分组树数据的 ag-grid。一切正常，但是当我使用外部过滤器过滤 ag-grid 并且过滤掉一组的所有子项时，展开/折叠按钮仍然可见，例如：

可以看到一个节点有两个孩子。

过滤文本“node with”后，子节点被“删除”，但我仍然可以看到图标，就好像有子节点一样。

我现在甚至可以随意展开/折叠，但只有图标会发生变化。

摆脱这些图标的最佳方法是什么？不幸的是，我找不到像 HideIconIfNoChildren 这样可以设置为 true 的属性，所以我唯一能想到的就是以某种方式使用 getRowClass 回调，但这对我来说似乎很脏。

有什么想法吗？

更新

另一个显示问题的示例：

来自 ag-grid 的 demo 可以在 here 找到！

虽然文件夹 xls 没有任何可见的子文件夹，但展开/折叠图标仍然可见！在这些情况下如何删除图标？

Answer 1

您可以覆盖过滤器（因为默认情况下分组列使用agSetColumnFilter）

this.autoGroupColumnDef = {
  headerName: "Files",
  width: 250,
  filter: "agTextColumnFilter", <---
  cellRendererParams: {
    checkbox: true,
    suppressCount: true,
    innerRenderer: "fileCellRenderer"
  }
};

它会按预期工作

Answer 2

这可能不是处理它的最有效方法（我怀疑如果你挖掘得足够深，你会找到一种通过其中一个渲染器在网格本身中覆盖的方法）。但是您“可以”覆盖图标，使它们不会出现在应用程序中。

即在应用程序 style.css 中添加以下内容（需要，因为您不能在类中覆盖网格样式） - 请注意仅点击展开以显示概念证明

.ag-icon-expanded  {
    background-color: white !important;
    color: white !important ;
    background-image: none !important;
    }

然后在您的 group-row-inner-renderer 中自己处理图标，方法是根据传入的参数使其出现和消失。您可以在样式中找到网格图标，但如果覆盖则不必使用网格全球。

url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQgN2w0IDQgNC00IiBzdHJva2U9IiM3RjhDOEQiIGZpbGw9Im5vbmUiLz48L3N2Zz4=);

当我过滤掉网格时，如果它们不是子级，那么该行就会消失，因此允许您想要一个没有子级的可见行，上面应该进行一些调整...

您可能希望避免使用 !important，因为我尚未确定是否需要..

为了完整起见，以下是标题组件的覆盖（与您将要执行的操作不同），但显示了覆盖类对参数的作用，隐藏/显示依赖于参数的不同图标并手动处理一些标题单元格东西

import {Component, ViewChild, ElementRef} from '@angular/core';

@Component({
    selector: 'app-loading-overlay',
    template: `
        <div (mouseenter)="onHover(true)" (mouseleave)="onHover(false)">
            <div *ngIf="params.enableMenu && showMenu == true" #menuButton class="customHeaderMenuButton" (click)="onMenuClicked($event)"><i class="fa {{params.menuIcon}}"></i></div> 

            <div *ngIf="!params.enableMenu && params.materialIcon != null" #menuButton class="customHeaderMenuButton"><i class="material-icons" style="font-size:14px;">{{params.materialIcon}}</i></div> 
            <div *ngIf="!params.enableMenu && params.imageIconLink != null" #menuButton class="customHeaderMenuButton"><img src='{{params.imageIconLink}}' style='height:15px; margin-left: -2px; filter: grayscale(100%);'/></div> 
            <div *ngIf="!params.enableMenu && params.glyphIcon != null" #menuButton class="customHeaderMenuButton" ><span class='{{params.glyphIcon}}' style='color:black; font-size:14px; margin-left: -7px; float: left; width: "25px";' aria-hidden='true'></span></div> 
            <div *ngIf="params.enableMenu && showMenu == true && params.enableSorting == true" (click)="onSortRequested('asc', $event)" [ngClass]="ascSort" class="customSortDownLabel"><i class="fa fa-long-arrow-down"></i></div> 
            <div *ngIf="params.enableMenu && showMenu == true && params.enableSorting == true" (click)="onSortRequested('desc', $event)" [ngClass]="descSort" class="customSortUpLabel"><i class="fa fa-long-arrow-up"></i></div> 
            <div *ngIf="params.enableMenu && showMenu == true && params.enableSorting == true" (click)="onSortRequested('', $event)" [ngClass]="noSort" class="customSortRemoveLabel"><i class="fa fa-times" style="padding-right: 5px"></i></div>
            <div class="customHeaderLabel" *ngIf="params.displayName">{{params.displayName}}</div> 

        </div>
    `,
    styles: [
        `
        .customHeaderMenuButton {
            margin-top: 5px;
            margin-left: 4px;
            float: left;
        }

        .customHeaderLabel {
            margin-left: 5px;
            margin-top: 3px;
            text-overflow: clip;
            overflow: visible;
            white-space: normal;
        }

        .customSortDownLabel {
            float: left;
            margin-left: 10px;
            margin-top: 5px;
        }

        .customSortUpLabel {
            float: left;
            margin-left: 3px;
            margin-top: 4px;
        }

        .customSortRemoveLabel {
            float: left;
            font-size: 11px;
            margin-left: 3px;
            margin-top: 6px;
        }

        .active {
            color: cornflowerblue;
        }
    `
    ]
})
export class CustomHeader {
    public params: any;

    private ascSort: string;
    private descSort: string;
    private noSort: string;
    public showMenu: boolean = false;
    public blockSorting: boolean = false;

    @ViewChild('menuButton', {read: ElementRef}) public menuButton;

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

        if(this.params.displayName == null )
        {
            this.params.displayName = "";
        }

        params.column.addEventListener('sortChanged', this.onSortChanged.bind(this));
        this.onSortChanged();
    }

    onMenuClicked() {
        if(this.params.enableMenu == true){
            this.params.showColumnMenu(this.menuButton.nativeElement);
        }

    };

    onHover(set: boolean){
        if(set){
            this.showMenu = true;
        }
        else{
            this.showMenu = false;
        }

    }

    onSortChanged() {
        this.ascSort = this.descSort = this.noSort = 'inactive';
        if (this.params.column.isSortAscending()) {
            this.ascSort = 'active';
        } else if (this.params.column.isSortDescending()) {
            this.descSort = 'active';
        } else {
            this.noSort = 'active';
        }
    }

    onSortRequested(order, event) {
        this.params.setSort(order, event.shiftKey);
    }
}