Глобальный фильтр p-таблицы PrimeNG v5.2.4 не работает - PullRequest
Новая
       7

Глобальный фильтр p-таблицы PrimeNG v5.2.4 не работает

0 голосов
/ 01 июня 2018

Я использовал p-datatable ранее, и глобальный фильтр работал.Однако, когда я перешел на p-таблицу, глобальный шаблон фильтра отображался хорошо, но в поле ввода нельзя было нажать.

Вот код 

<p-table #dt 
[value]="sensorLocationList" 
[columns]="cols" 
[(selection)]="selectedSl" 
sortMode="multiple" [paginator]="true" 
[rows]="20" 
[globalFilterFields]="['dummy1','dummy2','dummy3','dummy4']"
>

<ng-template pTemplate="caption">
        <div style="text-align: left">        
            <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
            <input type="text" pInputText size="50" placeholder="Global Filter" (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto">
        </div>
</ng-template>

Заголовок: 

<ng-template pTemplate="header" let-columns>
        <tr>
            <th style="width: 2.25em"></th>
            <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                {{col.header}}
                <p-sortIcon [field]="col.field"></p-sortIcon>
            </th>
        </tr>
        <tr>
            <th style="width: 2.25em">
                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
            </th>
            <th *ngFor="let col of columns" [ngSwitch]="col.field">
                <input *ngSwitchCase="'dummy1'" pInputText placeholder="Search" type="text" class="search-box" (input)="dt.filter($event.target.value, col.field, col.contains)">
                <input *ngSwitchCase="'dummy2'" pInputText placeholder="Search" type="text" class="search-box" (input)="dt.filter($event.target.value, col.field, col.contains)">
                <input *ngSwitchCase="'dummy3'" pInputText placeholder="Search" type="text" class="search-box" (input)="dt.filter($event.target.value, col.field, col.contains)">
                <input *ngSwitchCase="'dummy4'" pInputText placeholder="Search" type="text" class="search-box" (input)="dt.filter($event.target.value, col.field, col.contains)">
            </th>
     </ng-template>

И один образец тела: 

<ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr [pSelectableRow]="rowData">
                    <td [pEditableColumn]="rowData" [pEditableColumnField]="'dummy1'" [ngStyle]="cellEdit(rowData)">
                        <p-cellEditor>
                            <ng-template pTemplate="input">
                                <input pInputText type="text" [(ngModel)]="rowData.dummy1">
                            </ng-template>
                            <ng-template pTemplate="output">
                                {{rowData.dummy1}}
                            </ng-template>
                        </p-cellEditor>
                    </td>
             </tr>
</ng-template>
</p-table>

Все отлично работает, включая столбецфильтр.Я искал везде решение и обнаружил, что большая часть проблемы заключается в том, что версия PrimeNG не была обновлена, но моя версия обновлена.Любая идея?

Ответы [ 2 ]

0 голосов
/ 23 ноября 2018

Удалите «ng-template» вокруг GlobalFilter

0 голосов
/ 20 сентября 2018

Добавить [pSortableColumnDisabled]="!col.sortable" к тегу заголовка таблицы: 

<th *ngFor="let col of columns" [pSortableColumn]="col.field" [pSortableColumnDisabled]="!col.sortable">
...