Question

我有一个带有分组树数据的农业网格。一切正常，但是当我使用外部过滤器过滤ag-grid并过滤掉一组中的所有子级时，仍然可以看到“展开/折叠”按钮，例如：

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

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

我现在甚至可以根据需要扩展/折叠，但仅图标会更改。

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

有什么想法吗？

更新

另一个显示问题的示例：

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

尽管文件夹 xls 不再有可见的子代，但展开/折叠图标仍然可见！在这种情况下如何删除图标？

Answer 1

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

即在应用程序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，因为我尚未确定是否需要。

为了完整起见，以下内容是头文件组件的替代（与您要执行的操作不同），但显示了头文件对params的作用，隐藏/显示了依赖于params的不同图标，并手动处理了一些头单元东西

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

Answer 2

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

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

它将按预期工作

在筛选带有已分组数据的农业网格后，展开/折叠图标

2 个答案: