Clarity Datagrid 自定义过滤器示例答案

【问题标题】：Clarity Datagrid Custom filter exampleClarity Datagrid 自定义过滤器示例
【发布时间】：2018-07-25 23:27:35
【问题描述】：

有没有人有一个用于清晰度数据网格的自定义过滤器的完整示例？缺少自定义过滤器文档，我无法弄清楚如何让他们的示例正常工作。更好的是，完整数据网格演示的 stackblitz 将是惊人的！

【问题讨论】：

什么？让我们从一个自定义过滤器示例开始？即使是被列为“最简单但可重复使用的方式...”的内嵌方式也会有所帮助。
我已经走到这一步了...clarity-datagrid-clear-filters.stackblitz.io 有人可以帮我完成下一步吗？
我将完整的数据网格演示代码移植到 StackBlitz 中。请看下面我的回答。这有帮助吗？

【解决方案1】：

希望这会有所帮助：

1) My Field 模型 field.ts

    export interface Field {
        field_nbr: number;
        fieldType: string;
        dataType: string; 
    }

2) 实用程序文件 util-filters.ts -

    import {ClrDatagridStringFilterInterface} from "@clr/angular";

    //Models
    import { Field } from '../models/field';

    /**
    * Class for filtering Field metadata in datagrids on filterType property of model
    */
    export class FieldTypeFilter implements ClrDatagridStringFilterInterface<Field> {
    accepts(field: Field, search: string):boolean {
        return "" + field.fieldType == search
         || field.fieldType.toLowerCase().indexOf(search) >= 0;
        }
    }

3) 模型组件.html

    <clr-datagrid [(clrDgSingleSelected)]="singleSelected" [clDgRowSelection]="false">
    <clr-dg-column >             
        Field Type
        <clr-dg-string-filter [clrDgStringFilter]="fieldTypeFilter"></clr-dg-string-filter>
    </clr-dg-column>
    <clr-dg-column ><ng-container *clrDgHideableColumn="{hidden: false}">Data Type</ng-container></clr-dg-column>
    <clr-dg-placeholder>No matching fields found</clr-dg-placeholder>

    <clr-dg-row *clrDgItems="let field of allFields"  [clrDgItem]="field" (click)='openModal(field)'>
        <clr-dg-cell>{{field.fieldType}}</clr-dg-cell>
        <clr-dg-cell>{{field.dataType}}</clr-dg-cell>
    </clr-dg-row>
    </clr-datagrid>

4) 模型组件.ts

    import { Component, OnInit, ViewChild } from '@angular/core';
    import { NgIf } from '@angular/common';
    import { Wizard } from "@clr/angular";
import { Observable } from 'rxjs';

//Models
import { Field } from '../models/field';

//Utilities
import { FieldTypeFilter } from "../utils/field-filters";

@Component({
selector: 'model',
templateUrl: './model.component.html',
providers: [],
styleUrls: ['../app.component.css']
})

export class ModelComponent {
    private fieldTypeFilter = new FieldTypeFilter; 
    ....
}

【讨论】：

【解决方案2】：

编辑 2022 年 1 月 14 日

抱歉，我在 stackblitz 上移动了一些东西，并且在编写后我们已经更新了 repo。

这里是演示的自定义过滤器所在的位置：https://github.com/vmware/clarity/blob/angular/src/app/datagrid/utils/color-filter.ts

我没有发布源代码，因为有 12 个不同的文件，有些文件很长（> 100 loc）。

这是 Clarity 文档中完整演示的工作复制：https://stackblitz.com/edit/full-datagrid-demo

如果您对 Clarity 组件的工作方式有任何疑问，您可以随时深入了解我们用于开发和测试的演示的源代码。看看这里，我链接到我们用于开发/测试的开发应用程序，所以你知道我从哪里得到完整的数据网格代码。 https://github.com/vmware/clarity/tree/master/src/dev/src/app

【讨论】：

这行不通了。
对不起，我更新了代码中的演示链接。已经有一段时间了，我清理了一些 stackblitz 的东西，我们移动了一些 repo。