PrimeNg - Как показать данные по категориям в Datatable - PullRequest
Новая
       17

PrimeNg - Как показать данные по категориям в Datatable

0 голосов
/ 26 апреля 2019

У меня есть данные с 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>
...