PrimeNg-如何在数据表中按类别显示数据

时间:2019-04-26 06:43:16

标签: primeng primeng-datatable

我有4个类别的数据。全部都加载到数据表中。过滤器工作正常。还是当用户只需要搜索基于特定类别的数据时,如何从视图中删除或隐藏其他数据并筛选结果?

有人帮我吗?

这是要求的屏幕截图:

Mockup

她是我的html:

<div class="col-md-12">

    <input type="checkbox" name="Education" id=""> Education
    <input type="checkbox" name="Development" id=""> Development
    <input type="checkbox" name="Medicine" id=""> Medicine

    <p-table #tt [value]="values" [globalFilterFields]="['Id','Name','Description','CreatedDate']" sortField="Id" sortMode="single" [paginator]="true" [rows]="10">
        <ng-template pTemplate="caption">
            <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
            <input type="text" pInputText size="50" placeholder="Global Filter" (input)="tt.filterGlobal($event.target.value, 'contains')" style="width:auto">
        </ng-template>
        <ng-template pTemplate="header">
            <tr>
                <th *ngFor="let col of cols" [pSortableColumn]="col.field">
                    {{col.header}}
                    <p-sortIcon [field]="col.field"></p-sortIcon>
                </th>
            </tr>
            <tr>
                <th *ngFor="let col of cols" [ngSwitch]="col.field">
                    <input *ngSwitchCase="'Id'" pInputText type="text" (input)="tt.filter($event.target.value, col.field, 'contains')">

                    <input *ngSwitchCase="'Name'" pInputText type="text" (input)="tt.filter($event.target.value, col.field, 'contains')">

                    <input *ngSwitchCase="'Description'" pInputText type="text" (input)="tt.filter($event.target.value, col.field, col.filterMatchMode)">

                    <input *ngSwitchCase="'CreatedDate'" pInputText type="text" (input)="tt.filter($event.target.value, col.field, col.filterMatchMode)">

                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-value>
            <tr>
                <td *ngFor="let col of cols">
                    {{value[col.field]}}
                </td>
            </tr>
        </ng-template>
        <ng-template pTemplate="summary">
            There are {{courseList?.length}} courses and ({{couseList?.length / 10 }} Pages)
        </ng-template>
    </p-table>

</div>

0 个答案:

没有答案