Ag-Grid单元格渲染器RowIndex无法实时更新，如何实现行展开/收起？

我正在完善一个Ag-Grid单元格渲染器，需求是点击图标在当前行下方添加一行，再次点击则删除该行。但现在遇到的问题是，单个单元格渲染器的rowIndex无法实时更新，除非硬刷新整个网格——但硬刷新会丢失下拉图标的‘open’状态。

当前实现代码：

const insertIndex = params.rowIndex + 1;

this.eventListener = () => {
    if (!this.eButton.classList.contains('open')) {
        gridOptions.api.applyTransaction({add:[{step: this.dropdownValue, dropdownRow: true}], addIndex: insertIndex });
    } else {
        let rowData = [];
        gridOptions.api.forEachNode(function (node) {
            rowData.push(node);
        });

        let insertedRow = rowData[insertIndex];
        gridOptions.api.applyTransaction({remove:[insertedRow.data]});
    }

    this.eButton.classList.toggle('open');
};

this.eButton.addEventListener('click', this.eventListener);

我考虑了两种方案：

• 方案1：硬刷新网格，但会丢失下拉图标的‘open’状态，如何在硬刷新后保留状态？
• 方案2：让params.rowIndex在applyTransaction后自动更新。

补充说明：我尝试过默认的rowGroup功能，但它默认隐藏所有列，无法满足需求。我想要的是一个简单的、仅对当前行下方单行进行展开/收起切换且不影响其他行的解决方案。

解决方案 #

核心思路：放弃依赖rowIndex，改用行节点关联插入行 #

rowIndex是Ag-Grid根据数据顺序生成的临时值，数据变动后就会失效，且单元格渲染器的params不会自动更新。正确的做法是用稳定的标识关联父行与插入行，而非依赖动态索引。

具体实现步骤

1. 给插入行绑定父行唯一标识
   添加行时，给新行数据增加parentRowId字段，值为当前行节点的id（Ag-Grid会为每个行节点自动生成唯一id，也可以用自定义业务id）：

   this.eventListener = () => {
       if (!this.eButton.classList.contains('open')) {
           // 获取当前行节点的唯一标识
           const parentRowId = params.node.id;
           gridOptions.api.applyTransaction({
               add: [{
                   step: this.dropdownValue,
                   dropdownRow: true,
                   parentRowId: parentRowId // 绑定父行标识
               }],
               addIndex: params.node.rowIndex + 1 // 仅用于初始插入位置，删除时不再依赖
           });
       }
       // ...后续代码
   }
   

2. 删除时通过父行标识查找目标行
   删除操作不再依赖insertIndex，而是遍历行节点，找到与当前行绑定的插入行：

   } else {
       let targetRow = null;
       gridOptions.api.forEachNode(node => {
           if (node.data.parentRowId === params.node.id) {
               targetRow = node.data;
           }
       });
       if (targetRow) {
           gridOptions.api.applyTransaction({remove: [targetRow]});
       }
   }
   

3. 保留图标状态：将状态存储到行数据中
   如果必须硬刷新网格，可把图标open状态绑定到当前行数据的字段中，比如isExpanded：

   • 点击图标时同步更新行数据：

     this.eButton.classList.toggle('open');
     // 更新当前行的展开状态
     params.node.setDataValue('isExpanded', this.eButton.classList.contains('open'));
     

   • 渲染器初始化时读取状态：

     // 在单元格渲染器的init方法中
     if (params.data.isExpanded) {
         this.eButton.classList.add('open');
     }
     

关键说明

rowIndex是动态变化的临时值，行节点的id和自定义的parentRowId是稳定的关联标识，不受数据增删、排序等操作影响，能彻底解决索引失效的问题。

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