PrimeNG TurboTable如何编程式启动编辑模式？实现双击触发

针对你提到的两个需求，我整理了亲测有效的实现方法：

1. 是否支持编程式启动编辑模式？ #

当然支持！PrimeNG的p-cellEditor组件内置了toggle()方法，能手动触发编辑/预览模式的切换。你只需要通过ViewChild或ViewChildren获取对应p-cellEditor的实例，直接调用这个方法即可。

举个简单的实现示例：

组件模板（HTML） #

<p-table [value]="products">
  <ng-template pTemplate="body" let-product>
    <tr>
      <td pEditableColumn>
        <p-cellEditor #nameEditor>
          <ng-template pTemplate="display">{{product.name}}</ng-template>
          <ng-template pTemplate="input">
            <input pInputText type="text" [(ngModel)]="product.name" />
          </ng-template>
        </p-cellEditor>
      </td>
      <td>
        <button pButton label="编辑名称" (click)="startEditing(nameEditor)"></button>
      </td>
    </tr>
  </ng-template>
</p-table>

组件类（TS） #

import { Component } from '@angular/core';
import { CellEditor } from 'primeng/celleditor';

@Component({
  selector: 'app-product-table',
  templateUrl: './product-table.component.html'
})
export class ProductTableComponent {
  products = [{ name: 'Product 1' }, { name: 'Product 2' }];

  startEditing(editor: CellEditor) {
    editor.toggle(); // 手动触发进入编辑模式
  }
}

2. 修改为双击进入编辑模式 #

默认的单击触发是pEditableColumn的内置行为，我们需要先阻止这个默认逻辑，再给预览视图绑定双击事件来手动启动编辑。具体实现如下：

组件模板（HTML） #

<p-table [value]="products">
  <ng-template pTemplate="body" let-product>
    <tr>
      <td pEditableColumn (click)="$event.stopPropagation()">
        <p-cellEditor #cellEditor>
          <!-- 给预览视图绑定双击事件触发编辑 -->
          <ng-template pTemplate="display" (dblclick)="cellEditor.toggle()">
            {{product.name}}
          </ng-template>
          <ng-template pTemplate="input">
            <input pInputText type="text" [(ngModel)]="product.name" 
                   (keydown.enter)="cellEditor.toggle()" />
          </ng-template>
        </p-cellEditor>
      </td>
    </tr>
  </ng-template>
</p-table>

关键细节说明： #

• (click)="$event.stopPropagation()"：添加在pEditableColumn上，阻止默认的单击触发编辑行为。
• (dblclick)="cellEditor.toggle()"：给预览视图模板绑定双击事件，调用toggle()进入编辑模式。
• 额外优化：给输入框绑定(keydown.enter)="cellEditor.toggle()"，支持按回车键退出编辑模式，提升用户操作体验。

如果你的表格有大量可编辑列，不想逐个绑定#cellEditor，可以通过ViewChildren批量获取所有CellEditor实例，再通过事件目标关联到对应的编辑器（不过上面的单个绑定方式已经能满足大部分场景需求）。

内容的提问来源于stack exchange，提问作者Greggy