从 primeng 中的上下文菜单事件获取列索引 table
Get column index from context menu event in primeng table
我创建了一个具有特定行和列的 p-table 并打算在单击鼠标右键时实现上下文菜单。为此,我通过添加以下代码修改了 app.component.html:
<p-table #dt [contextMenu]="cm" (onContextMenuSelect)="onContextMenuSelect($event,cm)">
<ng-template pTemplate="body" let-row let-columns="colData">
<tr [pSelectableRow]="row" [pContextMenuRow]="row" ng-mousedown="handleClick($event)" >
<td pEditableColumn style= "height:34px;" *ngFor="let col of colData">
<p-cellEditor>
...
</td>
</tr>
</ng-template>
</p-table>
</div>
<p-contextMenu #cm [model]="menuitems"></p-contextMenu>
</div>
我可以通过鼠标右键单击成功获取人民币菜单项。但是,我打算在单击鼠标按钮的列的 onContextMenuSelect(event,cm) 函数中进行进一步处理。有什么办法可以找到用户点击人民币的列索引吗?
迟到总比不到好...但是,至少,为了记录。
这是我的做法:
<td *ngFor="let col of columns" **[pContextMenuRow]="{col: col, data: this}"**>
<span *ngIf="!col.template && !col.component" class="p-text-bold p-ml-2">{{url[col.field]}}</span>
<span *ngIf="col.template && !col.component" class="p-text-bold p-ml-2">{{col.template(myRowData[col.field])}}</span>
<ng-container *ngIf="col.component">
<ng-container *ngComponentOutlet="col.component; injector: getInjector(col.field);">
</ng-container>
</ng-container>
</td>
这样,您就可以在 table 组件的 contextMenu 命令回调中获得所需的信息。
在我的例子中,列是动态添加的。所以我可以得到从col中选择的“字段”(列)。
您还可以在行上添加[pContextMenuRow],并根据上下文处理事件。
我创建了一个具有特定行和列的 p-table 并打算在单击鼠标右键时实现上下文菜单。为此,我通过添加以下代码修改了 app.component.html:
<p-table #dt [contextMenu]="cm" (onContextMenuSelect)="onContextMenuSelect($event,cm)">
<ng-template pTemplate="body" let-row let-columns="colData">
<tr [pSelectableRow]="row" [pContextMenuRow]="row" ng-mousedown="handleClick($event)" >
<td pEditableColumn style= "height:34px;" *ngFor="let col of colData">
<p-cellEditor>
...
</td>
</tr>
</ng-template>
</p-table>
</div>
<p-contextMenu #cm [model]="menuitems"></p-contextMenu>
</div>
我可以通过鼠标右键单击成功获取人民币菜单项。但是,我打算在单击鼠标按钮的列的 onContextMenuSelect(event,cm) 函数中进行进一步处理。有什么办法可以找到用户点击人民币的列索引吗?
迟到总比不到好...但是,至少,为了记录。
这是我的做法:
<td *ngFor="let col of columns" **[pContextMenuRow]="{col: col, data: this}"**>
<span *ngIf="!col.template && !col.component" class="p-text-bold p-ml-2">{{url[col.field]}}</span>
<span *ngIf="col.template && !col.component" class="p-text-bold p-ml-2">{{col.template(myRowData[col.field])}}</span>
<ng-container *ngIf="col.component">
<ng-container *ngComponentOutlet="col.component; injector: getInjector(col.field);">
</ng-container>
</ng-container>
</td>
这样,您就可以在 table 组件的 contextMenu 命令回调中获得所需的信息。 在我的例子中,列是动态添加的。所以我可以得到从col中选择的“字段”(列)。 您还可以在行上添加[pContextMenuRow],并根据上下文处理事件。