JSF PrimeFaces展开行内表格冻结列失效求助

1. 调整冻结列CSS，适配子表格场景 #

由于<p:rowExpansion>内的子表格是动态渲染的，且初始处于隐藏状态，需要强化sticky属性的定位规则，避免被容器样式覆盖：

/* 冻结列核心样式 */
.frozen-column {
    position: sticky !important;
    left: 0 !important;
    z-index: 10 !important;
    background-color: #ffffff !important; /* 用背景色覆盖滚动时的后方内容 */
    border-right: 1px solid #ddd !important; /* 增加分隔线提升视觉区分度 */
}

/* 确保表格滚动容器成为sticky的定位参考 */
.ui-table-scrollable-body {
    position: relative;
    overflow-x: auto;
}

2. 动态初始化子表格的冻结与滚动同步 #

子表格在展开前不存在于DOM中，因此需要借助PrimeFaces的rowToggle事件，在展开后触发初始化逻辑：

<!-- 主表格 -->
<p:dataTable scrollable="true" scrollWidth="100%" ...>
    <!-- 绑定行展开/收起事件 -->
    <p:ajax event="rowToggle" oncomplete="initFrozenTableSync()" />
    
    <p:rowExpansion>
        <!-- 子表格必须开启scrollable模式，否则无法触发横向滚动 -->
        <p:dataTable scrollable="true" scrollWidth="100%" scrollHeight="250px" styleClass="child-table" ...>
            <p:column styleClass="frozen-column" headerText="名称">
                <!-- 列内容 -->
            </p:column>
            <!-- 其他列 -->
        </p:dataTable>
    </p:rowExpansion>
</p:dataTable>

3. 编写JavaScript实现滚动同步与强制重绘 #

function initFrozenTableSync() {
    // 收集所有表格的滚动容器
    const scrollContainers = document.querySelectorAll('.ui-table-scrollable-body');
    
    // 先移除旧的滚动监听，避免重复绑定
    scrollContainers.forEach(container => {
        container.removeEventListener('scroll', syncAllTableScroll);
    });
    
    // 绑定新的滚动同步事件
    scrollContainers.forEach(container => {
        container.addEventListener('scroll', syncAllTableScroll);
    });
    
    // 强制子表格冻结列重绘，解决隐藏元素sticky不生效的问题
    document.querySelectorAll('.child-table .frozen-column').forEach(col => {
        // 触发浏览器重绘逻辑
        col.style.display = 'none';
        void col.offsetHeight; // 强制计算布局
        col.style.display = '';
    });
}

// 同步所有表格的横向滚动位置
function syncAllTableScroll(e) {
    const targetScrollLeft = e.target.scrollLeft;
    document.querySelectorAll('.ui-table-scrollable-body').forEach(container => {
        if (container !== e.target) {
            container.scrollLeft = targetScrollLeft;
        }
    });
}

4. 关键注意事项 #

• 彻底禁用PrimeFaces内置的frozenColumns属性，避免与自定义逻辑冲突导致表格崩溃；
• 子表格必须设置scrollable="true"并指定滚动高度/宽度，确保存在横向滚动容器；
• 若使用了自定义表格样式，需检查是否有overflow或position属性覆盖了滚动容器的默认行为。

内容的提问来源于stack exchange，提问作者Maciej Wawryszuk