如何更新PrimeFaces DataGrid可折叠面板且不丢失展开状态

我完全懂你现在的困扰——每次Ajax Poll刷新DataGrid后，那些可折叠的面板都会变回默认的折叠状态，之前手动展开的面板全重置了对吧？这是因为PrimeFaces在重新渲染组件时，默认不会保留客户端的交互状态，得我们手动做一些处理来保存和恢复状态。下面给你两个实用的解决方案：

方案一：纯客户端保存状态（LocalStorage） #

这个方案不需要修改后端代码，完全在前端处理，适合状态不需要跨会话/设备同步的场景：

步骤1：给面板添加唯一标识并绑定切换事件 #

修改你的<p:panel>，给它一个基于节点唯一属性的ID（比如hostname），同时绑定一个切换事件来保存状态：

<p:panel toggleable="true" 
         collapsed="true" 
         toggleTitle="Información detallada del nodo"
         id="nodePanel_#{node.hostname}"
         onToggle="savePanelState('#{node.hostname}', !this.collapsed)">
    <!-- 原面板内容保持不变 -->
</p:panel>

步骤2：添加JavaScript工具函数 #

在页面的<h:body>或者<h:head>里添加这段JS，用来保存和恢复面板状态：

// 保存单个面板的展开/折叠状态到LocalStorage
function savePanelState(nodeKey, isExpanded) {
    localStorage.setItem('panelState_' + nodeKey, isExpanded);
}

// 在DataGrid更新完成后，恢复所有面板的状态
function restorePanelStates() {
    // 找到所有节点面板
    document.querySelectorAll('[id^="server_node_form:nodeDataGrid:nodePanel_"]').forEach(panel => {
        // 提取节点的唯一标识（hostname）
        const nodeKey = panel.id.split('_').pop();
        const savedState = localStorage.getItem('panelState_' + nodeKey);
        
        if (savedState !== null) {
            const shouldBeExpanded = savedState === 'true';
            // 如果当前状态和保存的不一致，就切换面板
            if (panel.collapsed !== shouldBeExpanded) {
                PF(panel.id.split(':').pop()).toggle();
            }
        }
    });
}

步骤3：给Poll添加完成回调 #

修改<p:poll>，让它在更新完成后触发恢复状态的函数：

<p:poll interval="10" 
        listener="#{serverNodesView.updateNodes}" 
        update="nodeDataGrid"
        oncomplete="restorePanelStates()" />

方案二：服务器端保存状态（会话级同步） #

如果需要状态在用户的会话中同步（比如换浏览器标签页或重新打开页面后仍保留），可以在后端维护状态：

步骤1：在ManagedBean中添加状态存储 #

修改你的ServerNodesView，添加一个Map来记录每个节点面板的状态：

import java.util.HashMap;
import java.util.Map;
import javax.faces.view.ViewScoped;
import javax.inject.Named;
import java.io.Serializable;

@Named
@ViewScoped
public class ServerNodesView implements Serializable {
    // 存储节点hostname对应面板的展开状态
    private Map<String, Boolean> panelStates = new HashMap<>();

    // getter和setter
    public Map<String, Boolean> getPanelStates() {
        return panelStates;
    }

    public void setPanelStates(Map<String, Boolean> panelStates) {
        this.panelStates = panelStates;
    }

    // 处理面板切换的监听方法
    public void onPanelToggle(String nodeHostname, boolean isExpanded) {
        panelStates.put(nodeHostname, isExpanded);
    }

    // 你的updateNodes原有逻辑保持不变
    public void updateNodes() {
        // 获取新节点数据的逻辑...
    }
}

步骤2：修改面板的状态绑定和事件 #

更新<p:panel>，让它的折叠状态从后端读取，同时把切换事件同步到服务器：

<p:panel toggleable="true" 
         <!-- 默认折叠，若后端有保存状态则按保存的来 -->
         collapsed="#{empty serverNodesView.panelStates[node.hostname] ? true : !serverNodesView.panelStates[node.hostname]}"
         toggleTitle="Información detallada del nodo">
    <!-- 绑定切换事件到后端方法 -->
    <p:ajax event="toggle" listener="#{serverNodesView.onPanelToggle(node.hostname, event.data)}" />
    <!-- 原面板内容保持不变 -->
</p:panel>

注意事项 #

• 如果你的节点hostname包含特殊字符，建议换成更安全的唯一标识（比如节点ID），避免LocalStorage或后端Map的键出现问题；
• 方案一的LocalStorage会在用户浏览器中持久保存状态，若需要清理可以添加一个重置按钮或在页面加载时过滤无效状态；
• 方案二用了@ViewScoped，状态会在当前视图生命周期内保留，若需要跨视图可以换成@SessionScoped。

内容的提问来源于stack exchange，提问作者Néstor Almeida