Primeng table p-table，设置条件列可编辑
Primeng table p-table，设置条件列可编辑
提问于 2019-12-12 18:05:26
我在我的angular 7应用程序中使用Primeng p-table控件。下面是我使用的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)。
回答 2
Stack Overflow用户
发布于 2019-12-16 22:57:34
最后，我找到了下面的变通方法(使用单元格导航进行内联编辑)
<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>Stack Overflow用户
发布于 2019-12-13 13:44:53
这个特性在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;
}为简洁起见，删除了模板代码！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59302070
复制相关文章
相似问题
腾讯云开发者
