PrimeNG - 对 p-dataTable 新行内联强制排序答案

【问题标题】：PrimeNG - forced sorting for p-dataTable new row inlinePrimeNG - 对 p-dataTable 新行内联强制排序
【发布时间】：2017-11-17 14:02:46
【问题描述】：

我正在尝试编写一种方法，让最终用户单击“添加新行”按钮，并在 p 数据表的第一行内嵌显示一个空白行。目前，当我在幕后将新项目添加到数组时，该行出现在表中看似随机的位置。

我认为解决方案必须涉及能够在后台通过隐藏列进行排序，无论用户选择的排序顺序是什么。例如，用户当前按姓氏列升序排序，所以我首先按不可见的排序器列降序排序，然后按姓氏升序排序。表中的每条记录对于排序器的值为 0，但新添加的行除外，其值为 1。

那么，无论最终用户如何使用 GUI 对表进行排序，我如何覆盖 p-datatable 的排序，以使我的新行始终出现在表的顶部？现在，当用户单击要排序的列时，它会在后台删除我的排序。

谢谢！

【问题讨论】：

标签： angular primeng primeng-datatable

【解决方案1】：

首先，您可能想要创建一个虚拟行（我动态创建它，因为我从服务器获取列的名称）。根据primeng docs，在添加/删除行时，您应该始终创建一个新的数组引用而不是操作现有数组，因为如果引用没有更改，Angular 不会触发设置器。然后新行将显示在顶部，直到用户单击列标题对行进行排序。

这是我用于将行添加到表格开头的代码：

buildNewRowDummy(): string[] {
    const newRowDummy = [];
    for (let col = 0; col < this.cols.length; col++) {
      const columnName = this.cols[col];
      newRowDummy[columnName] = '';
    }

    return newRowDummy;
  }

addRow() {
  this.rows = [ this.buildNewRowDummy(), ...this.rows ];
}

【讨论】：