如何捕获PrimeNG Table的行重排事件？拖拽行触发事件求助

我之前也碰到过这个困惑——PrimeNG官方文档里确实没直接标注行重排完成后的触发事件，但其实它的行重排功能是基于Angular CDK拖放实现的，所以咱们可以借助CDK的拖放事件来搞定。

下面是具体的实现步骤：

1. 确保模块导入正确 #

首先要在你的Angular模块里导入DragDropModule（PrimeNG的Table重排依赖它）：

import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({
  imports: [
    // 其他模块
    DragDropModule
  ]
})
export class YourModule { }

2. 在模板中绑定拖放完成事件 #

给<p-table>添加cdkDropList指令，并绑定cdkDropListDropped事件；同时给每一行（<tr>或者<ng-template pTemplate="body">里的行元素）加上cdkDrag指令：

<p-table 
  [value]="yourDataSource"
  cdkDropList
  (cdkDropListDropped)="onRowReorder($event)"
>
  <ng-template pTemplate="header">
    <!-- 表头内容 -->
  </ng-template>
  <ng-template pTemplate="body" let-row>
    <tr cdkDrag>
      <!-- 表格单元格内容 -->
      <td>{{row.id}}</td>
      <td>{{row.name}}</td>
    </tr>
  </ng-template>
</p-table>

3. 在组件中处理重排事件 #

在你的组件类里实现onRowReorder方法，这个方法会在拖拽完成后触发，你可以在这里获取重排前后的索引，更新数据源，同时执行你的业务逻辑：

import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

// ...

onRowReorder(event: CdkDragDrop<any[]>) {
  // 使用CDK的moveItemInArray方法直接更新数据源的顺序
  moveItemInArray(this.yourDataSource, event.previousIndex, event.currentIndex);
  
  // 这里添加你自己的业务逻辑，比如调用接口保存新的排序
  console.log('行重排完成，新顺序:', this.yourDataSource);
  // this.saveNewOrder(this.yourDataSource);
}

额外提示 #

• moveItemInArray是Angular CDK提供的工具方法，能帮你快速调整数组元素的顺序，不用自己手动处理索引。
• 如果你的Table是分页模式，要注意重排只会在当前页的数据源里生效，跨页的拖拽PrimeNG默认不支持，需要额外处理。

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