在 ag-grid 中编辑后行移到顶部答案

【问题标题】：Row moves to top after editing in ag-grid在 ag-grid 中编辑后行移到顶部
【发布时间】：2019-05-31 00:34:04
【问题描述】：

我已经为 columnDefs 数组中的一个字段使用带有可编辑=true 的 ag-grid 创建了网格。当我为任何行编辑该列时，编辑该行后会自动移动到顶部。

我浏览了 ag-grid 的所有文档，但没有找到与此问题相关的任何内容。可以通过某种方式预防吗？

HTML

            <ag-grid-angular
                style="width: 100%; height: 300px; box-sizing: border-box;" 
                class="ag-theme-balham"
                [rowData]="selectedSecurities"
                [columnDefs]="columnDefs"
                [enableColResize]="true"
                [deltaRowDataMode]="true"
                [getRowNodeId]="getRowNodeId"
                [context]="context"
                [frameworkComponents]="frameworkComponents"
                [stopEditingWhenGridLosesFocus]="true"
                [singleClickEdit]="true"
                (gridReady)="onGridReady($event)">
            </ag-grid-angular>

TS

constructor() {
    this.columnDefs = [{
        headerName: 'Name',
        field: 'name',
        colSpan: (params) => {
            if (params.data.section === 'big-title')
                return 2;
            return 1;
        },
        cellClassRules: this.cellClassRules,
        editable: (params) => { return params.data.section === 'big-title'; },
        cellRenderer: 'spotGridCellRenderer',
        colId: 'spotGridNameField',
        getQuickFilterText: (params) => {
            return params.data.name.toLowerCase();
        }
    },
    { headerName: 'Spot', field: 'spot', hide: true, valueFormatter: this.numberValueFormater },
    { headerName: 'Fwd', field: 'fwd', hide: true, valueFormatter: this.numberValueFormater },
    {
        headerName: 'Value',
        cellRenderer: "agAnimateShowChangeCellRenderer",
        valueGetter: function totalValueGetter(params) {
            if (params.data.fwd)
                return params.data.spot + params.data.fwd;
            return params.data.spot;
        }, valueFormatter: this.numberValueFormater
    }];
    this.context = { componentParent: this };
    this.frameworkComponents = {
    spotGridCellRenderer: spotGridCellRenderer
    };
    this.getRowNodeId = data => data.name;
}

private selectedSecurities = [{"currencyPairId":3,"name":"AUDJPY3m","type":"fwd","tenorIndex":5,"tokenIds":[5,6],"spot":6.731458,"fwd":2.7974},{"currencyPairId":3,"name":"AUDJPY2m","type":"fwd","tenorIndex":4,"tokenIds":[5,6],"spot":6.731458,"fwd":0.172959}];

private addCustomHeader(rowIndex) {
   let obj = {
      'name': 'Custom Header...',
      'section': 'big-title'
   };
   this.selectedSecurities.splice(rowIndex, 0, obj);
   this.selectedSecurities = [...this.selectedSecurities];
   this.gridApi.setRowData(this.selectedSecurities);
   this.gridApi.refreshCells();
}

我使用 rowIndex 调用 addCustomHeader 方法，我需要在 selectedSecurities 中添加新数据，它完美地完成了此操作并更新了网格。但是当我尝试编辑任何可编辑的列时，该特定行将移动到网格的顶部。我检查了原始数组，它仍然正确显示了顺序。我无法理解如果数组以正确的顺序保存数据并且我也在使用 deltaRowDataMode，那么为什么编辑的列的行会移动到网格的顶部。

编辑前

enter image description here

编辑第二行后

enter image description here

【问题讨论】：

你能在 plunk 或 stackblitz 上重现你的问题，以便其他人可以轻松地帮助你吗？通过minimal reproducible example
stackblitz.com/edit/angular-stycah 请找到该问题的最小复制。我嘲笑了我更新数组中数据的方式，更新后出现了这个问题。

标签： angular6 ag-grid ag-grid-angular

【解决方案1】：

agGrid 的默认行为是在向网格输入新数据时滚动到顶部。您可以使用suppressScrollOnNewData 在编辑单元格时禁用滚动。

来自文档：

当为 true 时，当提供新的行数据时，网格不会滚动到顶部。如果您不希望每次加载新数据时都滚动到顶部的默认行为，请使用此选项。

https://www.ag-grid.com/javascript-grid-properties/

【讨论】：