如何使用JavaScript在ag-grid中隐藏或折叠指定单个行？

可行解决方案 #

方案1：使用ag-grid官方提供的行可见性API（最推荐）

直接调用ag-grid内置的setRowVisible方法即可实现指定行的隐藏/显示，无需额外配置CSS：

// 先获取目标行的rowNode
const rowNode = gridOptions.api.getRowNode(目标行的rowId);
// 隐藏行
gridOptions.api.setRowVisible(rowNode, false);
// 如果后续需要恢复显示，传入第二个参数为true即可
// gridOptions.api.setRowVisible(rowNode, true);

如果操作后未生效，调用gridOptions.api.redrawRows()触发行重绘即可。

方案2：修复CSS方案的空白问题

之前CSS方案残留空白是因为只隐藏了内容，没有清除行元素的高度占位，修改CSS样式如下即可：

.ag-row.hidden {
  visibility: collapse;
  height: 0 !important;
  min-height: 0 !important;
  border: none !important;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
}

给行添加hidden类后，调用gridOptions.api.redrawRows({ rowNodes: [目标rowNode] })触发指定行重绘即可生效。

方案3：使用外部过滤（适合批量隐藏行场景）

如果需要批量控制多行的显示隐藏，使用外部过滤性能更高：

const gridOptions = {
  // 其他配置
  isExternalFilterPresent: () => true,
  doesExternalFilterPass: (node) => {
    // 返回false的行会被隐藏
    return node.data.class !== 'hidden';
  }
}

// 标记需要隐藏的行后，调用以下方法触发过滤刷新
rowNode.setDataValue('class', 'hidden');
gridOptions.api.onFilterChanged();

原有方案失效原因说明 #

• 方法1-3的setExpanded系列API仅适用于行分组、树状表格的父节点展开/折叠操作，对普通数据行没有隐藏效果
• 方法4直接修改rowNode.style属性不生效，ag-grid内部会管理行的样式与DOM渲染，手动修改的属性会在网格重绘后被覆盖
• 原CSS方案仅设置visibility: collapse只会隐藏行内容，不会清除行元素的高度占位，因此会残留空白行

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