primeng, столбец р-таблицы "переупорядочить" не работает - PullRequest
Новая
       9

primeng, столбец р-таблицы "переупорядочить" не работает

0 голосов
/ 03 июля 2018

Я использую Таблица Primeng и пытаюсь использовать функцию «переупорядочить» столбца, но безуспешно.

Когда я перемещаю столбец, отображается изображение «стрелки», но когда я опускаю столбец в другом месте - ничего не происходит (столбец все еще находится в «предыдущем месте»). 

<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. Я что-то упустил?

Ответы [ 2 ]

0 голосов
/ 09 июня 2019

У меня была похожая проблема сегодня, так как я хочу сохранить порядок и выбор столбцов, я использовал <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));
}

после этого у меня все работало нормально. Надеюсь, это кому-нибудь поможет :-)

0 голосов
/ 03 июля 2018

Я продолжал сравнивать свою таблицу с примером на сайте Primeng и обнаружил, что не привязывал массив cols к свойству columns [columns]="cols" в элементе p-table. 

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