PrimeFaces Sheet滚动宽高异常及移除行调整功能问题

问题现象 #

使用PrimeFaces Extensions的Sheet组件（基于Handsontable），设置fixedCols="3"后：

• 向右滚动表格时，仅冻结的3列保持预设列宽和行高
• 非冻结列的宽高自动变化，即使通过colWidth属性指定了列宽也无效
• 向左滚动回初始位置后，所有列的宽高恢复正常

技术环境 #

• JSF 2.2.1
• PrimeFaces 6.2
• PrimeFaces Extensions 6.2

已尝试的无效操作 #

通过$(document).ready操作主Handsontable实例，但未生效，控制台无报错：

$(document).ready(function () {
    const $hot = PF('sheetWidget').ht;
    $hot.updateSettings({
        rowHeights(index) {
            return (index + 1) * 20;
        },
        manualRowResize: true,
    });
    $hot.render();
});

同时尝试过通过beforeRowResize返回false禁用行调整，同样无效果。

问题原因 #

PrimeFaces Sheet在fixedCols模式下，非冻结区域是一个独立的Handsontable子实例（clone），直接操作主实例的设置不会同步到这个子实例。此外，组件的stretchH="all"属性会强制列自动拉伸宽度，和fixedCols的固定列逻辑冲突，导致滚动后非冻结列宽异常。

解决方案 #

1. 修改Sheet组件属性 #

将stretchH="all"改为stretchH="none"，避免列自动拉伸：

<pe:sheet id="someSheet" widgetVar="sheetWidget"
          value="#{ManagedBean.materials}" var="material"
          rowKey="#{material.id}" showRowHeaders="true" extender="sheetExtender" height="300"
          sortBy="#{material.id}" fixedCols="3" sortOrder="ascending"
          stretchH="none" resizableCols="true" readOnly="false">
    <!-- 列定义保持不变 -->
</pe:sheet>

2. 使用官方推荐的extender函数扩展组件 #

通过组件的extender属性绑定扩展函数，确保在Sheet完全初始化后，同时更新主实例和冻结子实例的设置：

function sheetExtender() {
    // 获取主Handsontable实例
    const hotMain = this.ht;
    
    // 定义统一的行高和列宽配置
    const commonSettings = {
        // 自定义行高（示例：行索引+1乘以20）
        rowHeights: (index) => (index + 1) * 20,
        manualRowResize: true,
        // 统一设置列宽，对应每一列的宽度（可根据实际列数调整）
        colWidths: [150, 250, 250, 120, 150]
    };
    
    // 更新主实例设置
    hotMain.updateSettings(commonSettings);
    
    // 更新fixedCols对应的子实例（clone）设置
    if (hotMain.clone) {
        hotMain.clone.updateSettings(commonSettings);
        hotMain.clone.render();
    }
    
    // 重新渲染主实例
    hotMain.render();
}

3. 确保列宽配置一致 #

如果通过colWidth属性指定列宽，需确保所有列都明确设置该属性，避免默认宽度导致的异常。或者通过colWidths数组统一设置，优先级高于单个列的colWidth。

说明 #

• 使用extender是PrimeFaces Sheet官方推荐的扩展方式，能确保在组件初始化完成后执行代码，避免$(document).ready可能存在的时序问题
• fixedCols模式下必须同步更新主实例和子实例的配置，否则滚动后非冻结区域会使用默认设置
• stretchH="none"是解决列宽异常的关键，避免自动拉伸覆盖自定义列宽

内容的提问来源于stack exchange，提问作者Samet Dağ