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

Question

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

我已经阅读了所有有关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

Answer 1

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

摘自文档：

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

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