Question

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

我认为解决方案必须涉及能够在幕后隐藏列进行排序，无论用户选择的排序顺序是什么。例如，用户当前按“姓氏”列升序进行排序，因此我首先按不可见的“分拣”列降序排序，然后按“姓氏升序”排序。除了新添加的行（值为1）之外，表中的每条记录的分类值都为0。

然后，如何覆盖p-datatable的排序，以便无论最终用户如何使用GUI对表进行排序，我的新行总是出现在表的顶部？现在，当用户单击要排序的列时，它将删除我在幕后的排序。

谢谢！

Answer 1

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

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

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 ];
}

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

1 个答案: