在 PrimeNG 数据表中编辑该行时启用特定列
Posted
技术标签:
【中文标题】在 PrimeNG 数据表中编辑该行时启用特定列【英文标题】:Enable a particular column while editing that row in PrimeNG datatable 【发布时间】:2018-11-14 20:01:37 【问题描述】:我正在使用 angular2。我有一个数据表。当我点击它时,我可以编辑特定的单元格。但我也希望最后一列出现在我正在编辑的单元格的特定行中。
假设我想编辑第一行第二个元素。基本上,当我单击第二个元素时,它是可编辑的,但同时,我需要最后一列来显示所有 3 个按钮 save、cancel 和 delete 仅出现在第一行。
<p-dataTable [value]="tableData" editable="true" editMode="cell">
<p-column field="id" header="CUSTOMER*" [editable]="true"></p-column>
<p-column field="category" header="CATEGORY" [editable]="true"></p-column>
<p-column field="featureName" header="FEATURE NAME" [sortable]="true" [editable]="true"></p-column>
<p-column field="devEstimate" header="DEV ESTIMATE" [editable]="true"></p-column>
<p-column field="supportEstimate" header="SUPPORT ESTIMATE" [editable]="true"></p-column>
<p-column field="started" header="STARTED" [editable]="true"></p-column>
<p-column field="release" header="RELEASE/TARGET" [sortable]="true" [editable]="true"></p-column>
<p-column field="notes" header="NOTES" [editable]="true"></p-column>
<p-column [hidden]="!isEditable">
<template let-col let-row="rowData" let-index="rowIndex" pTemplate="body" >
<div>
<button pButton type="button" label="Save"></button>
<button pButton type="button" label="Cancel"></button>
<button pButton type="button" label="Delete"></button>
</div>
</template>
</p-column>
</p-dataTable>
【问题讨论】:
你能在jsfiddle.net或其他地方添加代码吗DataTable is deprecated, use TurboTable instead.
.
【参考方案1】:
您应该将 [hidden]="!isEditable"
从 p-column
移动到其模板内的 div
并且 isEditable 属性应该应用于 row 对象,因此替换 isEditable
与row.isEditable
。然后,最后一列应如下所示:
<p-column>
<ng-template let-col let-row="rowData" let-index="rowIndex" pTemplate="body">
<div [hidden]="!row.isEditable">
<button pButton type="button" label="Save"></button>
<button pButton type="button" label="Cancel"></button>
<button pButton type="button" label="Delete"></button>
</div>
</ng-template>
</p-column>
在您的 TS 组件代码中,将该 isEditable 属性添加到您的每一行 tableData 并将其初始化为 false :
this.tableData.forEach(function (row)
row.isEditable = false;
);
最后,将onEditInit
事件添加到您的p-datatable
并将true
值分配给已编辑行的isEditable
属性:
onEditInit(event)
this.disableAllRowsEdition();
event.data.isEditable = true;
见StackBlitz
【讨论】:
是的,它有帮助。谢谢你。我还有一个查询,我该如何更改我的代码,以便当我单击一个单元格时,整行应该变成可编辑的。 看看这个SO 帖子。【参考方案2】:这是我的最终解决方案 1) 在最后一列显示按钮 2) 编辑整行时点击特定行的单个单元格 & 还有 3) 在数据表单元格中添加Dropdown。
<p-dataTable [value]="tableOne" (onRowClick)="onSelectFeature($event)" [editable]="true">
<p-column field="customer" header="CUSTOMER*" [sortable]="true" [style]="'width':'15%'">
<template let-col let-row="rowData" let-index="rowIndex" pTemplate="body">
<span *ngIf="!row.isEditable">row.customer</span>
<span *ngIf="row.isEditable"><p-dropdown [options]="field_customer" [autoWidth]="false" appendTo="body" [placeholder]="row.customer"></p-dropdown></span>
</template>
</p-column>
<p-column field="notes" header="NOTES">
<template let-col let-row="rowData" let-index="rowIndex" pTemplate="body">
<span *ngIf="!row.isEditable">row.notes</span>
<span *ngIf="row.isEditable"><input type="text" pInputText [(ngModel)]="row.notes" maxlength="64"></span>
</template>
</p-column>
<p-column>
<template let-row="rowData" let-index="rowIndex" pTemplate="body">
<div class="display" *ngIf="row.isEditable">
<button pButton type="button" class="btn margin-left-3p float-right" label="Save"></button>
<button pButton type="button" class="btn margin-left-3p float-right" label="Cancel"></button>
<button pButton type="button" class="btn float-right" label="Delete"></button>
</div>
</template>
</p-column>
</p-dataTable>
component.ts 文件
isEditable:boolean;
ngOnInit()
this.isEditable=false;
constructor(private router: Router,private datePipe: DatePipe)
this.tableOne = [
customer:'PRODUCT',category:'Product', featureName:'OSS', devEstimate:'$12345.00', supportEstimate:'$',started:'TRUE',release:'SAIL 2.28',notes:'Funded by IMS',
customer:'TECHNOLOGY',category:'Product', featureName:'QWE', devEstimate:'$12345.00', supportEstimate:'$',started:'TRUE',release:'SAIL 2.28',notes:'Funded by IMS'];
onSelectFeature(e)
this.CloseAllEditable(this.tableOne);
this.CloseAllEditable(this.tableTwo);
e.data.isEditable=true;
CloseAllEditable(data)
for(let item of data)
if(item.isEditable)
item.isEditable = false;
【讨论】:
以上是关于在 PrimeNG 数据表中编辑该行时启用特定列的主要内容,如果未能解决你的问题,请参考以下文章