评估企业版Grid:实现选中行自适应高度,默认行高28px
针对你在AG Grid企业版中遇到的「默认固定行高、选中行自适应展开」需求,我整理了一套基于内置功能的优化方案,能解决你提到的样式丢失和性能问题:
一、解决溢出省略样式丢失的问题
你之前的方案因为全局开启autoHeight,导致未选中行的单元格默认换行,丢失了省略号样式。我们可以通过CSS+列配置结合来精准控制:
- 首先在列配置中开启文本换行(为选中行的自适应高度做准备):
const columnDefs = [ { headerName: "长数据列", field: "longText", wrapText: true, // 允许文本换行 // 其他列配置... }, // 其他列... ];
- 添加CSS规则,强制未选中行的单元格保持单行省略:
.ag-row:not(.ag-row-selected) .ag-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
这样未选中行的长文本会显示省略号,选中行则自动换行展开内容。
二、优化大规模数据下的性能
你原来的方案每次触发都遍历所有行节点,大数据量下肯定会有性能瓶颈。AG Grid提供了局部行高更新的能力,我们只需要监听行选中事件,仅处理状态变化的行即可:
- 先在Grid配置中设置默认行高:
const gridOptions = { rowHeight: 28, // 默认固定行高 onRowSelected: handleRowSelectionChange, // 其他Grid配置... };
- 实现选中事件的处理函数,仅更新当前行的高度:
function handleRowSelectionChange(event) { const rowNode = event.node; if (rowNode.selected) { // 选中时,让Grid自动计算该行的高度 rowNode.setRowHeight(null); } else { // 取消选中时,恢复默认固定行高 rowNode.setRowHeight(28); } // 只更新当前行的高度,无需全量刷新 gridOptions.api.onRowHeightChanged([rowNode]); }
方案优势
- 完全利用AG Grid内置的行高计算逻辑,不需要自己维护估算对象,
setRowHeight(null)会自动根据单元格内容计算合适的高度 - 仅处理状态变化的行,避免全量遍历节点,大数据量下性能更友好
- 通过CSS精准控制样式,未选中行保持省略号,选中行自适应展开
内容的提问来源于stack exchange,提问作者y182720




