Question

我在我的angular 7应用程序中使用Primeng p表控件。以下是我正在使用的html代码：

<p-table [value]="data" [reorderableColumns]="'true'" [columns]="cols">
<ng-template pTemplate="header" let-columns>
    <tr>

        <th *ngFor="let col of columns" pReorderableColumn>
            {{col.header}}
        </th>
    </tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
        <td  [pEditableColumn] *ngFor="let col of columns" [ngSwitch]="col.field">
            <p-cellEditor  *ngSwitchCase="'TYPE'">
                    <ng-template pTemplate="output">
                        {{rowData[col.field]}}
                    </ng-template>
                </p-cellEditor>
                <p-cellEditor *ngSwitchCase="'CEPCODE'">
                        <ng-template pTemplate="input">
                            <input pInputText type="text" [(ngModel)]="rowData[col.field]" required>
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{rowData[col.field]}}
                        </ng-template>
                    </p-cellEditor>
                    <p-cellEditor *ngSwitchCase="'HRS'">
                            <ng-template pTemplate="input">
                                <input pInputText type="text" [(ngModel)]="rowData[col.field]" required>
                            </ng-template>
                            <ng-template pTemplate="output">
                                {{rowData[col.field]}}
                            </ng-template>
                        </p-cellEditor>

        </td>

    </tr>
</ng-template>

“正在运行的应用程序”表如下所示：

在我的上表中，“类型”列不可编辑，而其他所有列均可编辑。我想知道如何动态地为td设置[pEditableColumn]（如果输入的是列，则不要设置[pEditableColumn]）

Answer 1

此功能在primeNG的早期版本中就有，并且易于实现，但是，您可以使用以下方法。

您可以向列配置中添加一个属性，例如col.editable

Component.ts

import { Component } from "@angular/core";
import { FormBuilder } from "@angular/forms";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  cols = [];
  data = [];
  constructor() {
    this.cols = [
      { header: "TYPE", field: "TYPE", editable: false },
      { header: "CEPCODE", field: "CEPCODE", editable: true },
      { header: "HRS", field: "HRS", editable: true }
    ];

    this.data = [{ HRS: "HRS1", TYPE: "OMEGA", CEPCODE: "YTMMETRE" }];
  }
}

基于此，可以在动态添加模板时更改模板。 component.html

<p-table [value]="data" [reorderableColumns]="'true'" [columns]="cols">
<ng-template pTemplate="header" let-columns>
    <tr>

        <th *ngFor="let col of columns" pReorderableColumn>
            {{col.header}}
        </th>
    </tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
        <td *ngFor="let col of columns" [pEditableColumn] [ngClass]="{'disable-td' : !col.editable}" >
              <div *ngIf="!col.editable">
                {{rowData[col.field]}}
              </div>
              <p-cellEditor *ngIf="col.editable">
                      <ng-template pTemplate="input">
                          <input pInputText type="text" [(ngModel)]="rowData[col.field]" required>
                      </ng-template>
                      <ng-template pTemplate="output">
                          {{rowData[col.field]}}
                      </ng-template>
              </p-cellEditor>
        </td>
    </tr>
</ng-template>
</p-table>

component.scss

.disable-td{
    pointer-events: none;
}

working stackblitz

为简洁起见，删除了模板代码！

Answer 2

最后，我找到了以下工作环境（可在单元格导航中进行内联编辑）

<p-table  (sortFunction)="customSort($event)" [customSort]="true" [scrollable]="true" scrollHeight="650px" class="png-table"
[value]="data" [reorderableColumns]="'false'" [resizableColumns]="'false'" [columns]="cols">
<ng-template pTemplate="header" let-columns>
    <tr>
        <th *ngFor="let col of columns" [pSortableColumn]="col.field" [style.width.px]="getColumnWidth(col)" [hidden]="col.hide"
            pResizableColumn pReorderableColumn [class]="col.filter?'sortable':'non-sortable'">
            {{col.headerName}}
            <p-sortIcon [field]="col.field"></p-sortIcon>

        </th>
    </tr>
    <tr class="filter-row" *ngIf="1==2">
        <th *ngFor="let col of columns" [hidden]="col.hide">
            <input class="filter-input" *ngIf="col.filter" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')">
        </th>
    </tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
        <ng-container *ngFor="let col of columns" [ngSwitch]="col.type">
            <td *ngSwitchCase="'del'" [style.width.px]="getColumnWidth(col)">
                <i class="fa fa-close delete-icon g-act-icon" (click)='deleteRow()'></i>
            </td>
            <td *ngSwitchCase="'edit'" [style.width.px]="getColumnWidth(col)">
                <i class="fa fa-edit edit-icon g-act-icon" (click)='deleteRow()'></i>
            </td>
            <td *ngIf="!col.hide && col.type=='type'"  [style.width.px]="getColumnWidth(col)">
                {{rowData[col.field]}}
            </td>
            <td [pEditableColumn] *ngSwitchCase="'cep'" [style.width.px]="getColumnWidth(col)">
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <p-inputMask (keyup)="onEnterCEP()" [(ngModel)]="rowData[col.field]" mask="aaaaaa-999-999"></p-inputMask>

                    </ng-template>
                    <ng-template pTemplate="output">
                        {{rowData[col.field]}}
                    </ng-template>
                </p-cellEditor>
            </td>
            <td [hidden]="col.hide" *ngSwitchCase="'cb'" [style.width.px]="getColumnWidth(col)">
                {{rowData[col.field]}}
            </td>
            <td *ngIf="!col.hide && col.type=='act'" [pEditableColumn]  [style.width.px]="getColumnWidth(col)">
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="rowData[col.field]" required>
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{rowData[col.field]}}
                    </ng-template>
                </p-cellEditor>
            </td>
            <td  [pEditableColumn] *ngIf="!col.hide && col.type=='com'" [style.width.px]="getColumnWidth(col)">
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="rowData[col.field]" required>
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{rowData[col.field]}}
                    </ng-template>
                </p-cellEditor>
            </td>
            <td [pEditableColumn] *ngIf="!col.hide && col.type=='tsk'" [style.width.px]="getColumnWidth(col)">
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="rowData[col.field]" required>
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{rowData[col.field]}}
                    </ng-template>
                </p-cellEditor>
            </td>
            <td  [pEditableColumn] *ngIf="!col.hide && col.type=='sco'" [style.width.px]="getColumnWidth(col)">
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="rowData[col.field]" required>
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{rowData[col.field]}}
                    </ng-template>
                </p-cellEditor>
            </td>
            <td [pEditableColumn] *ngSwitchCase="'hrs'" [style.width.px]="getColumnWidth(col)">
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="rowData[col.field]" >
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{rowData[col.field]}}
                    </ng-template>
                </p-cellEditor>
            </td>
            <td [hidden]="col.hide" [pEditableColumn] *ngSwitchCase="'des'" [style.width.px]="getColumnWidth(col)">
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="rowData[col.field]" required>
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{rowData[col.field]}}
                    </ng-template>
                </p-cellEditor>
            </td>
        </ng-container>
    </tr>
</ng-template></p-table>

灌注表p表，设置条件列可编辑

2 个答案: