Angular Slickgrid取消强制列适配后，按内容自动列宽失效求助

问题概述 #

在Angular Slickgrid中实现两个功能按钮：

• 强制列适配：点击后列宽适配窗口尺寸
• 自动调整列宽：点击后取消强制适配并按单元格内容调整列宽

但开启并取消强制列适配后，自动调整列宽功能失效，该问题可在官方演示场景复现。

复现步骤 #

• 打开Angular-Slickgrid的Resize by Content演示页面
• 拖拽调整任意列宽，验证自动调整功能正常
• 点击“Resize by Cell Content”按钮，功能正常
• 打开网格菜单，勾选后取消“强制列适配”选项
• 再次点击“Resize by Cell Content”按钮，功能失效

当前代码 #

public gridOptions: GridOption = {
    gridMenu: {
        hideForceFitButton:true // 隐藏网格菜单中的强制适配复选框
    }
}

onForceFitColumnClick() {
    this.angularGridInstance.slickGrid.setOptions({ forceFitColumns: true })
}

onAutoResizeColumnClick() {
    if (this.angularGridInstance.slickGrid.getOptions()['forceFitColumns']) {
        this.angularGridInstance.slickGrid.setOptions({ forceFitColumns: false })
    }
    this.angularGridInstance.resizerService.resizeColumnsByCellContent(true);
}

修复方案 #

问题根源：开启forceFitColumns后，Slickgrid会接管列宽的自动计算逻辑，取消该选项后，网格仍保留强制适配时的列宽状态，导致resizeColumnsByCellContent无法正确计算内容宽度。需手动重置列宽状态并强制网格重新渲染。

修改后的代码 #

// 组件内提前保存原始列定义（在初始化时执行）
originalColumnDefinitions: Column[];

ngOnInit() {
    // 深拷贝原始列定义，用于后续恢复
    this.originalColumnDefinitions = JSON.parse(JSON.stringify(this.columnDefinitions));
}

public gridOptions: GridOption = {
    gridMenu: {
        hideForceFitButton:true // 隐藏网格菜单中的强制适配复选框
    }
}

onForceFitColumnClick() {
    this.angularGridInstance.slickGrid.setOptions({ forceFitColumns: true })
}

onAutoResizeColumnClick() {
    const grid = this.angularGridInstance.slickGrid;
    const resizerService = this.angularGridInstance.resizerService;
    
    if (grid.getOptions().forceFitColumns) {
        // 取消强制列适配
        grid.setOptions({ forceFitColumns: false });
        
        // 恢复原始列定义，清除强制适配的宽度影响
        this.columnDefinitions = JSON.parse(JSON.stringify(this.originalColumnDefinitions));
        grid.setColumns(this.columnDefinitions);
        
        // 强制网格重新渲染
        grid.invalidate();
        grid.render();
    }
    
    // 执行按内容调整列宽
    resizerService.resizeColumnsByCellContent(true);
}

关键修复点 #

1. 保存原始列定义：组件初始化时深拷贝列定义，避免后续修改影响原始配置
2. 恢复列定义：取消强制适配后，重置列定义为原始状态，清除强制适配时的宽度设置
3. 强制网格渲染：调用invalidate()和render()方法，确保网格应用新的列配置

验证 #

• 点击强制列适配按钮，列宽成功适配窗口
• 点击自动调整按钮，列宽按单元格内容正确调整
• 重复切换两种模式，功能均正常生效

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