如何在ag-grid中显示行序号（拖拽排序后自动更新）

阿华AIGC实验室

2026-5-27

解决AG Grid拖拽重排后行序号不自动更新的问题

我明白你的痛点——用rowIndex作为行序号时，拖拽重排后序号不会跟着刷新，还要手动监听事件太麻烦。其实AG Grid本身就提供了更优雅的方式，不需要额外加事件监听。

问题根源

你之前用的args.node.rowIndex是节点在原始数据源中的索引，当开启rowDragManaged: true拖拽重排时，虽然AG Grid会更新rowData的顺序，但rowIndex并不会触发单元格的即时重新渲染，导致序号显示滞后。

最优解决方案

改用AG Grid API的getDisplayedRowIndex(node)方法，这个方法会返回当前节点在显示列表中的实时位置，无论拖拽、排序还是过滤操作，只要行的显示顺序变化，valueGetter就会自动重新计算这个值，完美适配你的需求。

修改你的_getIndexValue方法即可：

_getIndexValue(args: ValueGetterParams): any {
  // 返回当前节点在显示列表中的索引（从0开始）
  return args.api.getDisplayedRowIndex(args.node);
}

完整修改后的代码

import { Grid, GridOptions, ColDef } from "ag-grid/main";
import { ValueGetterParams } from "ag-grid/dist/lib/entities/colDef";
// for ag-grid-enterprise users only
import 'ag-grid-enterprise/main';
import "ag-grid/dist/styles/ag-grid.css";
import "ag-grid/dist/styles/ag-theme-balham.css";

class SimpleGrid {
  _getIdValue(args: ValueGetterParams): any {
    return args.node.id;
  }

  _getIndexValue(args: ValueGetterParams): any {
    // 替换为实时获取显示索引的方法
    return args.api.getDisplayedRowIndex(args.node);
  }

  private gridOptions: GridOptions = <GridOptions>{};

  constructor() {
    this.gridOptions = {
      columnDefs: this.createColumnDefs(),
      rowData: this.createRowData(),
      rowDragManaged: true,
    };
    let eGridDiv:HTMLElement = <HTMLElement>document.getElementById('myGrid');
    new Grid(eGridDiv, this.gridOptions);
  }

  // specify the columns
  private createColumnDefs(): ColDef[] {
    return [
      {headerName: "Index", valueGetter: (args) => this._getIndexValue(args), rowDrag: true},
      {headerName: "ID", valueGetter: (args) => this._getIdValue(args)},
      {headerName: "Make", field: "make"},
      {headerName: "Model", field: "model"},
      {headerName: "Price", field: "price"}
    ];
  }

  // specify the data
  private createRowData() {
    return [
      {make: "Toyota", model: "Celica", price: 35000},
      {make: "Ford", model: "Mondeo", price: 32000},
      {make: "Porsche", model: "Boxter", price: 72000}
    ];
  }
}

window.addEventListener("load", () => {
  new SimpleGrid();
});