当然可以轻松实现这个需求！AG Grid本身就提供了完美的解决方案，完全不需要像你示例里那样把行号硬写到数据源里——这种方式不仅维护麻烦，还会在排序后混乱。

先明确核心需求 #

• 首列显示从1开始的连续行号
• 行号对应网格的视觉行位置，和源数据本身无关
• 不受排序、过滤、行插入/删除等操作影响，始终保持连续

现有方案的问题分析 #

你提到的示例存在两个关键问题：

• 维护成本极高：如果在数据开头插入行，需要手动更新后续所有数据的行号字段，效率极低且容易出错
• 排序后行号混乱：行号会跟着数据源排序，无法保持视觉上从1开始的连续编号

AG Grid的最优实现方式 #

我们可以利用AG Grid的cellRenderer自定义渲染器和rowIndex属性来动态计算行号，完全脱离源数据的依赖。

实现步骤 #

1. 给行号列定义一个cellRenderer函数，在里面通过params.node.rowIndex + 1获取视觉行号（因为rowIndex从0开始，所以加1变成从1开始的编号）
2. 给行号列设置sortable: false，避免用户点击行号列触发排序

完整可运行代码 #

<script src="https://unpkg.com/ag-grid/dist/ag-grid.min.noStyle.js"></script> 
<link rel="stylesheet" href="https://unpkg.com/ag-grid/dist/styles/ag-grid.css">
<link rel="stylesheet" href="https://unpkg.com/ag-grid/dist/styles/ag-theme-balham.css">
<div id="myGrid" style="height: 200px;width:500px;" class="ag-theme-balham"></div>
<script type="text/javascript" charset="utf-8">
// 列定义：行号列使用自定义渲染器动态计算行号
var columnDefs = [
 {
    headerName: "#", 
    width: 30,
    cellRenderer: function(params) {
        // rowIndex是当前行在视觉网格中的索引（从0开始），+1得到从1开始的连续行号
        return params.node.rowIndex + 1;
    },
    // 禁止行号列排序，避免破坏行号连续性
    sortable: false
 },
 {headerName: "Make", field: "make", width: 100 },
 {headerName: "Model", field: "model", width: 100},
 {headerName: "Price", field: "price", width: 100}
];

// 源数据无需包含行号字段，简化维护
var rowData = [
 {make: "Toyota", model: "Celica", price: 35000},
 {make: "Ford", model: "Mondeo", price: 32000},
 {make: "Porsche", model: "Boxter", price: 72000},
 {make: "Toyota", model: "Celica", price: 35000},
 {make: "Ford", model: "Mondeo", price: 32000},
 {make: "Porsche", model: "Boxter", price: 72000},
 {make: "Toyota", model: "Celica", price: 35000},
 {make: "Ford", model: "Mondeo", price: 32000},
 {make: "Porsche", model: "Boxter", price: 72000}
];

var gridOptions = {
 columnDefs: columnDefs,
 rowData: rowData,
 // 如果你启用了分页，只需要修改cellRenderer来计算分页偏移量：
 // cellRenderer: function(params) {
 //     return (params.paginationGetCurrentPage() * params.paginationGetPageSize()) + params.node.rowIndex + 1;
 // }
};

// 初始化网格
var eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, gridOptions);
</script>

关键细节说明 #

• rowIndex的作用：这个属性是基于当前网格的视觉渲染顺序，而不是源数据的原始顺序。所以无论你对数据进行排序、过滤、分组，rowIndex都会实时更新，确保行号始终对应视觉位置
• 分页支持：如果你的网格启用了分页，只需要在cellRenderer里加上当前页的偏移量，代码注释里已经给出了示例
• 无数据源依赖：源数据里不需要任何行号字段，插入/删除行时完全不需要额外操作，AG Grid会自动更新所有行号

内容的提问来源于stack exchange，提问作者Jeffrey Zhao