2

我以前使用过 p-datatable 并且全局过滤器有效。但是，当我更改为 p-table 时，全局过滤器模板显示得很好，但输入框不可点击。

这是代码

<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 版本不是最新的，但我的版本已更新。任何想法？

4

2 回答 2

0

添加[pSortableColumnDisabled]="!col.sortable"到表头标签：

<th *ngFor="let col of columns" [pSortableColumn]="col.field" [pSortableColumnDisabled]="!col.sortable">
于 2018-09-19T22:53:45.293 回答
-1

从 GlobalFilter 周围删除“ng-template”

于 2018-11-23T15:18:08.547 回答