如何将索引处的行插入已排序的 ag-grid答案

【问题标题】：How to insert row at index into sorted ag-grid如何将索引处的行插入已排序的 ag-grid
【发布时间】：2019-08-17 05:48:40
【问题描述】：

我有一个启用排序的网格设置。每行都有一个重复按钮。复制一行时，我想在复制行的下方插入新行。这适用于默认排序，但如果您对列进行排序，例如状态，它会随机将行插入网格，使其难以找到。

我注意到网格在保存期间的某个时间进行了排序，但在它收到分配新 ID 的响应之前。

我尝试使用带有 addIndex 的 updateRowData(transaction) 添加行，但它要么不插入任何内容，要么忽略索引。

我确实可以从 postSort 访问任何组件变量，但我只能在 postSort 之后收到带有 ID 的响应。

cloneRow(item: any): void {
 let newRow = JSON.parse(JSON.stringify(item.data)) as Object;
 newRow.gridItemId = null;

 this.index = this.api.getFocusedCell().rowIndex;

 this.selectRow(newRow, ++index);
 this.saveRow(newRow);
}

selectRow(newRow: Object, index: number) {
 this.selectedObject = [];
 this.gridItemList.splice(index, 0, newRow);

 this.api.setFocusedCell(index, "ColumnName");
 this.api.startEditingCell({
  rowIndex: index,
  colKey: "ColumnName"
 });
}

saveRow(newRow: Object): void {
 let objectsToSave = new Array<Object>();
 objectsToSave.push(newRow);

 this.CustomService.saveRow(objectsToSave)
  .subscribe(
   (response) => {
    if (!newRow.rowId) {
     newRow.rowId = response[0].rowId;
    }
    this.gridItemList.filter(g => g.gridItemId === response[0].gridItemId)[0] = response[0];
    this.api.refreshCells();
}

postSort = function(rowNodes) {
 console.log("Post Sort");
}

预期：复制的行被插入到原始行的正下方。实际：复制的行被插入到网格中的某处。

【问题讨论】：

标签： angular ag-grid

【解决方案1】：

它将行随机插入到网格中，很难找到。

其实不是随机的，可以通过updateRowData插入新值

api.updateRowData({add:[listofvalues], addIndex:startIndexPosition})

listofvalues 要插入的对象列表（即使它只是一个对象），以及 startIndexPosition index 插入开始的位置不排序

让我们更深入一点，ag-grid 有几个状态：

默认：它将准确地显示它是如何传递给rowData的，在这种情况下addIndex很重要，我想只在默认状态下使用addInex。
已排序：根据排序条件显示。
分组：猜测它的复杂状态，因为组可以被定义为默认并具有排序

简单的example进行演示

尝试按 athlete 排序（更改为 asc、desc 和默认排序）并单击添加行，您将在开始、结束和插入位置看到新行（默认州）

【讨论】：

看起来有人连续给你投了反对票（见your rep page，但最近的投票似乎被自动反转了）。 meta 上有很多关于此的内容。
是的，它的一部分已经恢复，但无论如何都会保持联系。

【解决方案2】：

显然，agGrid 自己破坏了（好吧，折旧了）agGrid v23.1 中的addIndex 功能......哦，但他们随后决定在 v24.1 中恢复它。

是的，认真的。

因此，解决此问题的最佳方法是首先检查您是否有旧版本的 agGrid：

npm outdated

如果是这样，请使用以下命令进行更新：

npm install ag-grid-angularlatest
npm install ag-grid-community@latest
npm install ag-grid-enterprise@latest

您现在需要使用以下命令将行添加到您的 agGrid：

   let trans:RowDataTransaction = {
       add: [ newRecord ],
       addIndex: 0
   };
   gridApi.applyTransaction(trans);

【讨论】：