[英]Add button in column of a p-table
i'm trying to add buttons in certain columns of my p-table,我正在尝试在我的 p 表的某些列中添加按钮,
actually i'm doing that in my html:实际上我在我的 html 中这样做:
<p-table [columns]="cols2" [value]="subflows">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [ngStyle]="{'width': col.width}" [ngClass]='height'>
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr [ngClass]="rowData.type ==='ERROR' ? 'red' : 'blue'">
<td class="my-center-text" *ngFor="let col of columns; let i = index"
[attr.rowspan]="rowData.component.index === 1 ? 2 : 1"
[ngClass]="{'center' : (col.field ==='detail' || col.field ==='objet' || col.field ==='messageT' || col.field === 'etape')}">
{{rowData[col.field]}}
<!-- <p-column field="detail" header="" [style]="{'text-align':'center'}">
<ng-template let-row="rowData" pTemplate="body">
<button pButton style="height:30px;" label="Détails"
(click)="show(rowData, i)" class="ui-button-secondary"></button>
</ng-template>
</p-column> -->
<button pButton style="height:30px;" *ngIf="col.field === 'detail' " label="Détails"
(click)="show(rowData)" class="ui-button-secondary"></button>
<button pButton style="height:30px;" icon="pi pi-search" *ngIf="col.field === 'objet' "
(click)="objet($event,data)" class="ui-button-secondary"></button>
<button pButton style="height:30px;" icon="pi pi-search" *ngIf="col.field === 'messageT' "
(click)="checked($event,data)" class="ui-button-secondary"></button>
</td>
</tr>
</ng-template>
</p-table>
I'm not sure its the best way to do it and i actually have one problem which is, my button is related to a p-dialog and actually, when i click on a button, the first one is opening a p-dialog, but if i click again on another button, data is directly added to the existing p-dialog, i want it to open a new p-dialog for everynew button i click.我不确定这是最好的方法,实际上我有一个问题,我的按钮与 p-dialog 相关,实际上,当我单击一个按钮时,第一个按钮正在打开一个 p-dialog,但是如果我再次单击另一个按钮,数据将直接添加到现有的 p 对话框中,我希望它为我单击的每个新按钮打开一个新的 p 对话框。
I have used this once.这个我用过一次。 You just need to use the
content
property of the column definition.您只需要使用列定义的
content
属性。 Like this像这样
{
headerText:'Action',
content: function(row) {
return $("<button></button>").puibutton({
icon: 'ui-icon-pencil'
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.