时间戳

首页 > 解决方案 > 如何将索引处的行插入已排序的 ag-grid

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

问题描述

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

我注意到网格在保存期间的某个时间进行了排序，但在它得到分配新 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");
}

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

标签： angularag-grid

解决方案

它将行随机插入到网格中，使其难以找到。

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

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

wherelistofvalues要插入的对象列表（即使它只是一个对象），以及插入开始的位置startIndexPosition 索引而不进行排序

让我们更深入一点，ag-grid 的状态很少：

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

example演示简单

尝试按运动员排序（更改为按升序、降序和默认排序）并单击添加行，您将在开始、结束和插入位置看到新行（默认状态）

推荐阅读