我来帮你搞定这个头疼的问题！你遇到的情况其实是PrimeFaces DataTable的一个常见小坑——当你局部更新展开行里的内容时，组件内部的展开状态没被正确保留，导致更新后行自动折回去了。结合你的代码，我给你分析下原因和具体的解决办法：

问题根源 #

1. 表单嵌套不合理：你把h:form放在了rowExpansion内部，每个展开行都会生成一个独立表单，这不仅会导致JSF视图树的冗余，还会让Ajax更新的范围和状态管理变得混乱。
2. 展开状态未持久化：默认情况下，DataTable的行展开状态是存在前端的，当你局部更新行内组件时，PrimeFaces可能会重置该行的DOM结构，导致展开状态丢失。

具体解决方案 #

方案1：后端绑定展开行状态（推荐） #

通过把DataTable的展开行绑定到后端Bean的集合，让服务器端跟踪展开状态，这样不管怎么更新，组件都会根据这个集合自动展开对应的行。

步骤1：在Bean中添加展开行集合

假设你的Topic实体的id是Long类型，在你的index Bean中添加：

import java.util.HashSet;
import java.util.Set;

// 维护展开的topic ID集合
private Set<Long> expandedTopicIds = new HashSet<>();

// 生成getter和setter
public Set<Long> getExpandedTopicIds() {
    return expandedTopicIds;
}

public void setExpandedTopicIds(Set<Long> expandedTopicIds) {
    this.expandedTopicIds = expandedTopicIds;
}

步骤2：修改DataTable代码

把表单移到DataTable外面，同时绑定expandedRows属性：

<h:form id="mainForm">
    <p:dataTable id="topicDataTable" 
                 value="#{index.topics}" 
                 var="topic" 
                 rowIndexVar="row" 
                 rowKey="#{topic.id}" 
                 style="border:none;"
                 expandedRows="#{index.expandedTopicIds}"> <!-- 绑定展开行集合 -->

        <!-- 你的列定义保持不变 -->
        <p:column style="border-style:none;">
            <p style="padding-left: 50px; font-size: 8px;"><br /></p>
            <p style="font-size: 18px;">#{topic.title}</p>
            <p style="font-size: 8px;">#{topic.displayedCreatedOn}</p>
        </p:column>
        <p:column style="width:2%; border-style:none;">
            <p:rowToggler />
        </p:column>

        <p:rowExpansion style="border:none;">
            <p style="font-size: 16px;"><br /></p>
            <div style="padding-left: 30px;">
                <p:panel id="repeatPanel">
                    <p:scrollPanel id="scrollPanel" style="padding-left:50px;max-height:300px; overflow-y: auto;" mode="native">
                        <p:repeat id="repeatComponent" value="#{topic.messages}" var="reply">
                            <div style="padding-left: 30px; font-size: 14px;">
                                <p style="font-size: 14px; color: black;">#{reply.createdBy}</p>
                                <p style="font-size: 8px; line-height: 12px">#{reply.displayedCreatedOn}</p>
                                <p style="font-size: 4px;"><br /></p>
                                <p style="color: rgba(0, 0, 0, .5); white-space: pre-wrap; font-size: 14px;">#{reply.text}</p>
                            </div>
                            <p style="padding-left: 50px; font-size: 16px;"><br /></p>
                        </p:repeat>
                    </p:scrollPanel>

                    <!-- 回复输入区域 -->
                    <p>
                        <p:inputTextarea id="replyArea" binding="#{replyInput}" required="true" 
                                         requiredMessage="The reply should not be empty" 
                                         style="vertical-align: middle; width:99.3%; " />
                    </p>
                    <p><p:message for="replyArea" style="color:red; font-size: 14px; " /></p>
                    <p style="font-size: 8px;"><br /></p>

                    <!-- 修改回复按钮的process和update -->
                    <p>
                        <p:commandButton value="Reply" 
                                         style="font-size: 12px; float:right; vertical-align:right;" 
                                         partialSubmit="true" 
                                         actionListener="#{index.updateMessages}" 
                                         process="@this replyArea" <!-- 只处理必要组件 -->
                                         update="repeatPanel">
                            <f:attribute name="rowId" value="#{row}" />
                        </p:commandButton>
                    </p>
                    <p style="padding-left: 50px; font-size: 8px;"><br /></p>
                </p:panel>
            </div>
            <p style="padding-left: 50px; font-size: 16px;"><br /></p>
        </p:rowExpansion>
    </p:dataTable>
</h:form>

方案2：前端JS保存并恢复展开状态 #

如果不想修改后端代码，可以用JavaScript记录当前展开的行，在Ajax更新完成后重新展开该行：

步骤1：添加JS函数

在页面的<h:head>或合适位置添加：

let currentExpandedRowKey;

// 记录展开的行
function saveExpandedRow() {
    const dtWidget = PF('topicDataTableWidget'); // 对应DataTable的widgetVar
    const expandedKeys = dtWidget.getExpandedRowsKeys();
    if (expandedKeys.length > 0) {
        currentExpandedRowKey = expandedKeys[0];
    }
}

// 恢复展开的行
function restoreExpandedRow() {
    const dtWidget = PF('topicDataTableWidget');
    if (currentExpandedRowKey) {
        dtWidget.expandRow(currentExpandedRowKey);
        currentExpandedRowKey = null;
    }
}

步骤2：修改DataTable和按钮

给DataTable添加widgetVar，并绑定展开/更新事件：

<p:dataTable id="topicDataTable" 
             value="#{index.topics}" 
             var="topic" 
             rowIndexVar="row" 
             rowKey="#{topic.id}" 
             style="border:none;"
             widgetVar="topicDataTableWidget"
             onExpandStart="saveExpandedRow()"> <!-- 展开时记录行 -->

    <!-- 其他列和行展开内容保持不变 -->

    <p:commandButton value="Reply" 
                     style="font-size: 12px; float:right; vertical-align:right;" 
                     partialSubmit="true" 
                     actionListener="#{index.updateMessages}" 
                     process="@form" 
                     update="replyForm:repeatPanel"
                     oncomplete="restoreExpandedRow()"> <!-- 更新完成后恢复展开 -->
        <f:attribute name="rowId" value="#{row}" />
    </p:commandButton>
</p:dataTable>

额外注意事项 #

• 尽量避免在rowExpansion内部嵌套表单，这会引发很多不必要的问题，表单最好包裹整个DataTable或者放在页面的顶层结构中。
• partialSubmit已经帮你做了局部更新，但process属性要尽量精确，只处理需要的组件（比如按钮和输入框），避免处理整个表单带来的性能问题和状态冲突。

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