Angular-Slickgrid中setColumns()触发滚动位置重置问题求助

问题描述 #

在Angular-Slickgrid的内联编辑场景中，对网格调用setColumns()方法会导致垂直滚动位置重置至顶部。动态更新列时，网格无法保留当前滚动位置，直接滚动回顶部。同时疑问：该滚动重置行为是否与Angular-Slickgrid或SlickGrid的版本变更/升级有关？

已尝试操作 #

使用grid.setColumns(columnDefs)动态更新列定义，这是基于内容调整列宽函数的一部分。

环境信息 #

复现步骤 #

• 垂直滚动至网格中间位置（非顶部）。
• 内联编辑任意列的单元格以触发列更新。
• 内联编辑完成后，调用setColumns()方法动态更新或调整列宽（例如执行resizeColumnsByCellContent函数）。
• 观察到列更新后网格滚动位置重置至顶部。

代码示例 #

resizeColumnsByCellContent(angularGrid: AngularGridInstance) { 
  const grid = angularGrid.slickGrid; 
  grid.setColumns(columnDefs); // 此处发生滚动重置 
}

预期与实际行为 #

• 预期行为：网格在更新列（内联编辑场景）时应保留当前滚动位置。
• 实际行为：调用setColumns()会将垂直滚动位置重置至顶部。

解决方案 #

核心思路 #

在调用setColumns()前后手动保存并恢复滚动位置，避免网格重新渲染后丢失滚动状态。

修改后的代码 #

resizeColumnsByCellContent(angularGrid: AngularGridInstance) { 
  const grid = angularGrid.slickGrid; 
  // 保存当前垂直滚动位置
  const scrollTop = grid.getScrollPosition().top;
  
  // 执行列更新操作
  grid.setColumns(columnDefs); 
  
  // 恢复之前的滚动位置
  grid.scrollTo(undefined, scrollTop);
}

版本相关说明 #

该滚动重置行为是SlickGrid原生setColumns()方法的默认行为——重新设置列定义时网格会触发重新渲染，默认重置滚动位置。并非Angular-Slickgrid特定版本的问题，若此前版本无此现象，可能是SlickGrid底层实现变更导致，手动保存恢复滚动位置是通用的规避方案。

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