Question

我正在使用Primeng table，并尝试使用“重新排序”列功能，但未成功。

当我移动列时，显示“箭头”图像，但是当我将列放到其他位置时-没有任何反应（列仍在“上一个位置”）。

<div class="container">
  <p-table #dt [value]="pagedTasks"
           [paginator]="true"
           [rows]="pageSize"
           [first]="first"
           [lazy]="true"
           [totalRecords]="totalRecords"
           [autoLayout]="true"
           (onLazyLoad)="loadTasksLazy($event)"
           [responsive]="true"
           sortField="id"
           sortOrder="-1"
           [reorderableColumns]="true"
           >
   <ng-template pTemplate="caption">
    ...
   /ng-template>
   <ng-template pTemplate="header">
     <tr>
        <th *ngFor="let col of cols" [pSortableColumn]="col.field" pReorderableColumn>
          <div *ngIf="col.field !== 'actions'">
            {{ col.header }}
            <p-sortIcon [field]="col.field"></p-sortIcon>
          </div>
          <div *ngIf="col.field === 'actions'">
            <fa name="file-code"></fa>
          </div>
        </th>
      </tr>
   ...
  </p-table>
</div>

如您所见，我正在[reorderableColumns]="true"元素中使用p-table，和pReorderableColumn元素上的th。我想念什么吗？

Answer 1

今天有一个类似的问题，因为我想保存顺序和列的选择，所以我使用了<p-table [columns]="selectedColumns" (onColReorder)="saveReorderedColumns($event)" ...>

问题是在我的函数中我没有再次设置selectedColumns。解决方案正在执行以下操作：

saveReorderedColumns(event: any) {
  this.selectedColumns = this.clone(event.columns); // <-- important
  localStorage.setItem(this.dataKeyForStorage, JSON.stringify(event.columns));
}

之后，它对我来说很好。希望它可以帮助某人:-)

Answer 2

我一直将表与Primeng网站中的示例进行比较，发现我没有将cols数组绑定到columns属性 [columns]="cols" 在p-table元素中。

<p-table
...
[columns]="cols"
>

primeng，p表列“重新排序”不起作用

2 个答案: