如何按集合的嵌套属性对过滤器选项进行分组。单个复选框

Question

我想知道如何按集合的属性字段对列的过滤器值进行分组。

列数据：

{ 
  users: [
    {id: 1, isExternal: true, name: "John" }, 
    {id: 2, isExternal: false, name: "George"},
    {id: 3, isExternal: true, name: "Bob"}
  ]
}

外部用户由 valueGetter 函数格式化：

columnDefs: [
  {
    enableRowGroup: true,
    field: "users",
    headerName: "Users",
    minWidth: 150,
    filter: "agSetColumnFilter",
    valueGetter: (params: any) => {
      return (params.data.users || []).map((user: User) =>
        user.isExternal ? `${user.name} (EXT)` : user.name
      );
    }
  }
];

我最终得到了包含每个值的许多复选框的列过滤器。

是否可以将过滤器项目分组为 1 个复选框？

例如：一个名为“External”的复选框过滤器，它将过滤所有外部用户，如果未选中，它将显示所有用户。

Answer 1

您可以构建一个自定义过滤器来实现这一点。

How to build a custom filter

根据这个文档，你需要构建两个组件：

• 实际的过滤器组件，检查列数据是否具有正确的值
• “浮动过滤器”，如果您想使用此过滤器 在列标题后面

浮动过滤器调用“主”过滤器中的逻辑并更新表中的视图。

对于主过滤器，代码可能是这样的：

     @Component(  selector: 'app-boolean-filter',
                         template: '
<div class="ag-filter">
   <select [(value)]="currentFilterValue" (change)="filterChange($event.target.value)">
      <option value="">all values</option>
      <option value="true">yes</option>
      <option value="false">no</option>
   </select>
</div>',
      style: '.ag-filter {  
        width: 100%;
        select {
            width: 100%;
            min-height: 24px;
            border-radius: 3px;
            padding-left: 6px;
            border-width: 1px;
            border-style: solid;
            border-color: #babfc7;
        }
    }')
    
    export class BooleanFilterComponent implements IFilterAngularComp {
      currentFilterValue: any;
    
      private params: IFilterParams;
      private valueGetter: (rowNode: RowNode) => any;
    
      agInit(params: IFilterParams): void {
        this.params = params;
        this.currentFilterValue = null;
        this.valueGetter = params.valueGetter;
      }
    
      isFilterActive(): boolean {
        return this.currentFilterValue !== null;
      }
    
      doesFilterPass(params: IDoesFilterPassParams): boolean {
        const valueGetter: any = this.valueGetter;
        const value: any = valueGetter(params);
    
        if (this.isFilterActive()) {
          return value === JSON.parse(this.currentFilterValue);
        }
      }
    
      getModel(): any {
        return this.isFilterActive() ? this.currentFilterValue : null;
      }
    
      setModel(model: any): void {
        this.filterChange(model);
      }
    
      afterGuiAttached(params: IAfterGuiAttachedParams): void {
      }
    
      takeValueFromFloatingFilter(value: any): void {
        this.filterChange(value);
      }
    
      filterChange(newValue: any): void {
        this.currentFilterValue = newValue === '' ? null : newValue;
        this.params.filterChangedCallback();
      }
    }

doesFilterPass 方法是魔法发生的地方：valueGetter(params)，从您在网格列中配置的数据字段中获取值并检查它是否通过过滤器，在表格中隐藏或显示。