1

我已经为 columnDefs 数组中的一个字段使用带有 editable=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，那么为什么编辑的列的行会移动到网格的顶部。

编辑前

在此处输入图像描述

编辑第二行后

在此处输入图像描述

4

1 回答 1

3

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

从文档：

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

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

于 2019-11-04T06:58:39.433 回答