如何按集合的嵌套属性对筛选选项进行分组.单个复选框

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个复选框？

例如：一个名为"的复选框过滤器；"外部"；，其中它将过滤所有外部用户，当未选中时，它将显示所有用户。

Answer 1

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

如何构建自定义过滤器

根据此文档，您需要构建两个组件：

• 实际的筛选器组件，检查列数据是否具有正确的值
• a"；浮动滤波器"；，如果要使用此筛选器列标题后面

浮动滤波器调用"；主"；筛选并更新表中的视图。

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

@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(从您在网格列中配置的数据字段中获取值，并检查它是否通过了过滤器，隐藏或显示在表中。