Clarity Datagrid自定义筛选器示例

Question

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

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个不同的文件，其中一些是相当长(> 100loc)。

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

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