Angular-Slickgrid启用冻结列时列标题错位问题求助

问题背景 #

横向滚动Angular-Slickgrid后启用冻结列，列标题出现错位，无法与对应数据列对齐。相关环境信息：

复现步骤：

• 横向滚动网格至任意位置
• 选择列并启用冻结，即可观察到标题错位现象

核心原因 #

滚动后直接设置冻结列，网格未重新计算标题区域的偏移位置，导致标题与数据列的滚动状态不一致，最终出现错位。

解决方案 #

方法1：重置滚动位置+强制刷新网格

修改setFrozenColumns方法，先将横向滚动条重置到起始位置，再设置冻结列并强制网格重新渲染：

setFrozenColumns(frozenCols: number) {
  // 重置横向滚动到初始位置
  this.gridObj.scrollColumnIntoView(0, false);
  
  // 设置冻结列配置
  this.gridObj.setOptions({ frozenColumn: frozenCols });
  
  // 强制网格重新渲染，计算标题位置
  this.gridObj.invalidate();
  this.gridObj.render();
  
  // 更新gridOptions触发Angular变更检测
  this.gridOptions = { ...this.gridObj.getOptions() };
}

方法2：响应式更新gridOptions

如果gridOptions是组件内的响应式变量，直接修改其frozenColumn属性，让Angular自动检测变化并更新网格：

setFrozenColumns(frozenCols: number) {
  // 先重置滚动位置
  this.gridObj.scrollColumnIntoView(0, false);
  
  // 响应式更新冻结列配置
  this.gridOptions = {
    ...this.gridOptions,
    frozenColumn: frozenCols
  };
}

注：若变更检测未自动触发，可注入ChangeDetectorRef并调用this.cdr.detectChanges()

方法3：强制更新列标题宽度

若前两种方法无效，可尝试手动触发列标题宽度计算，确保标题与内容列匹配：

setFrozenColumns(frozenCols: number) {
  this.gridObj.setOptions({ frozenColumn: frozenCols });
  // 强制更新列标题宽度
  this.gridObj.updateColumnHeaderWidths();
  this.gridOptions = { ...this.gridObj.getOptions() };
}

验证 #

按上述方法修改后，横向滚动网格再冻结列，列标题应与对应数据列保持对齐。

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