排序 primeng 列

Question

我正在使用 primeng table 并且正在使用他们的列切换方法。唯一的问题是，当您关闭并重新打开其中一个列时，列 returns 列到 table 的末尾。我想知道是否有人知道如何对它们进行排序，以便该列返回到原始位置

我尝试在我的 component.ts 文件中使用各种排序方法，但没有成功。

Here 是我在 PrimeNG 中使用的示例（可以在那里测试和查看代码）

Answer 1

示例中的列顺序由 selectedColumns 数组确定。默认情况下，在 MultiSelect 组件中，它会将任何更改附加到数组的末尾。因此，您应该在 MultiSelect 上的每个更改事件之后对其进行排序。添加事件处理程序 modelChange()

<p-multiSelect [options]="cols" [ngModel]="selectedColumns" 
            (ngModelChange)='modelChange($event)'
                optionLabel="header"
                        selectedItemsLabel="{0} columns selected" [style]="{minWidth: '200px'}" defaultLabel="Choose Columns"></p-multiSelect>

并且在你的组件 ts 文件中，

  modelChange(event) {
    console.log('change fired')
    this.selectedColumns = event;
    this.selectedColumns.sort(
      function compare(a, b) {
        if (a.field < b.field)
          return -1;
        if (a.field > b.field)
          return 1;
        return 0;
      }

    );
    console.log(this.selectedColumns);
  }
}

在此处查看演示：https://stackblitz.com/edit/angular7-template-fork-first-ow8wtw

排序 primeng 列

Sorting primeng columns

primeng

angular

primeng-turbotable