Question

有人为清晰度数据网格提供一个自定义过滤器的完整示例吗？缺少自定义过滤器文档，我无法弄清楚如何使它们的示例生效。更好的是，针对整个datagrid演示的堆叠闪电战将是惊人的！

Answer 1

希望这会有所帮助：

1）我的字段模型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）model-component.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）model-component.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; 
    ....
}

Answer 2

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

以下是Clarity文档中完整演示的工作副本：https://stackblitz.com/edit/full-datagrid-demo

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

Clarity Datagrid Custom过滤器示例

2 个答案: