Primeng 表 - 如果有 groupRowsBy，数据在重新排序后不会更正？

Question

我用groupRowsBy创建了一个表，可以对行重新排序，但拖放行后结果没有改变。请帮我解决这个案子。

行组副标题 在此输入链接描述

重新订购 在此输入链接描述

这是我的代码 在此输入链接描述

Answer 1

拖放时，您可以监听 prime-ng table 事件

drag

，而不是监听

onRowReorder

事件。

<div class="card">
  <!-- remove groupRowsBy="group_by.id" will corrcet data afert drop ??? -->
  <p-table
    [value]="data"
    sortMode="single"
    [scrollable]="true"
    rowGroupMode="subheader"
    groupRowsBy="group_by.id"
    (onRowReorder)="onRowReorder($event)"
  >
  ...

这为您提供了两个细节

dragIndex

和

dropIndex

。我们可以使用这两个细节并交换数组元素，使用以下方法：

onRowReorder(data: any) {
  console.log(data);
  [this.data[data.dragIndex], this.data[data.dropIndex]] = [
    this.data[data.dropIndex],
    this.data[data.dragIndex],
  ];
}

完整代码：

TS：

import { Component, OnInit } from '@angular/core';
import { ImportsModule } from './imports';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'table-subheader-grouping-demo',
  templateUrl: 'table-subheader-grouping-demo.html',
  standalone: true,
  imports: [ImportsModule, CommonModule],
})
export class TableSubheaderGroupingDemo implements OnInit {
  data: any[] = [];

  constructor() {}

  ngOnInit() {
    this.data = [
      {
        id: 1,
        groupOrder: 1,
        group_by: { name: 'Manager', id: 1 },
        name: 'Manager 1',
        title: '1.1 Manager 1',
      },
      {
        id: 2,
        code: 1.2,
        groupOrder: 1,
        group_by: { name: 'Manager', id: 1 },
        name: 'Manager 2 ',
        title: '1.2 Manager 2',
      },
      {
        id: 7,
        groupOrder: 2,
        group_by: { name: 'Support', id: 2 },
        name: 'Support',
        title: '2.1 Support',
      },
    ];
  }

  onRowReorder(data: any) {
    console.log(data);
    [this.data[data.dragIndex], this.data[data.dropIndex]] = [
      this.data[data.dropIndex],
      this.data[data.dragIndex],
    ];
  }
}

HTML：

<div class="card">
  <!-- remove groupRowsBy="group_by.id" will corrcet data afert drop ??? -->
  <p-table
    [value]="data"
    sortMode="single"
    [scrollable]="true"
    rowGroupMode="subheader"
    groupRowsBy="group_by.id"
    (onRowReorder)="onRowReorder($event)"
  >
    <ng-template pTemplate="header">
      <tr>
        <th>#</th>
        <th>item</th>
      </tr>
    </ng-template>

    <ng-template pTemplate="groupheader" let-item>
      <tr pRowGroupHeader>
        <td colspan="100" class="font-weight-bold">{{ item.group_by.name }}</td>
      </tr>
    </ng-template>

    <ng-template pTemplate="body" let-item let-rowIndex="rowIndex">
      <tr pDraggable="item" [pReorderableRow]="rowIndex">
        <td>
          <span class="pi pi-bars" pReorderableRowHandle></span>
        </td>
        <td>{{ item.code }} {{ item.name }}</td>
      </tr>
    </ng-template>
  </p-table>
</div>
<pre>{{data | json}}</pre>

Stackblitz 演示