从 primeng 中的上下文菜单事件获取列索引 table

Question

我创建了一个具有特定行和列的 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) 函数中进行进一步处理。有什么办法可以找到用户点击人民币的列索引吗？

Answer 1

迟到总比不到好...但是，至少，为了记录。

这是我的做法：

<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]，并根据上下文处理事件。

从 primeng 中的上下文菜单事件获取列索引 table

Get column index from context menu event in primeng table

css

typescript

primeng

angular

primeng-turbotable