当我使用它来隐藏 table 列时，如何在多选 PrimeNG 中保持顺序？

Question

我正在使用多选 PrimeNG 来显示或隐藏我的 ptable 的列，它可以很好地隐藏列，但是当我显示它们时，它们会出现并附加到 table 的最后一个所以这破坏了 table 列的顺序，因为我认为 multiselect 创建了一个列数组来显示或隐藏它在隐藏时弹出并添加回数组因此它最后出现。

Answer 1

您可以将唯一键添加到您的列，然后在更改过滤器时您可以根据您的唯一键进行排序。

在 ts:

cols = [
      { field: 'name', header: 'Name', key: 1 },
      { field: 'type', header: 'Type', key: 1 },
      { field: 'description', header: 'Description', key: 3 },
      { field: 'created_on', header: 'Created on', key: 4 }
    ]

private _selectedColumns: any;

@Input('selectedColumns')
set selectedColumns(selectedColumns: any) {
  this._selectedColumns = selectedColumns;
  this._selectedColumns.sort((a, b) => a.key- b.key)
}

get selectedColumns(): any { return this._selectedColumns; }

在 html 模板中：

<p-multiSelect [options]="cols" [(ngModel)]="selectedColumns" optionLabel="header"defaultLabel="Column Options">
</p-multiSelect>

Answer 2

你只需要维护两个数组，一个选择的列列表说“selectedColumns”，其他所有列的数组说“columnsList”现在在 multiselect onChange 事件上创建一个函数 say toggle() 现在在这个函数中遍历数组 columnsList 并检查 selectedColumns 中包含该列名称，仅此而已，即使您隐藏或撤消列之间的列，您也可以保持 table 列的顺序。

这是正确的方法，您必须理解并实施。希望能帮助到你。

当我使用它来隐藏 table 列时，如何在多选 PrimeNG 中保持顺序？

How to Maintain Order in multiselect PrimeNG when i am using this to hide table columns?

angular

primeng

angular8

primeng-turbotable

primeng-table