Question

我正在编写Primefaces 5.1 portlet。

它包含一个包含panelMenu的唯一页面，我需要它从每次用户更改页面时折叠的任何面板开始（在页面加载时）。

但是，如果我打开一个面板，然后更改页面，它将开始显示该面板仍然打开。

我无法找到实现此目标的任何选项（例如，collapsed = true，ignoreCookie = true或类似内容）。

我找到的唯一解决方案是以下Javascript代码：

PrimeFaces.widgets.myPanelMenu.collapseRootSubmenu(PrimeFaces.widgets.myPanelMenu.headers);

问题是这段代码会折叠任何打开的面板（因此页面加载用户可以看到面板菜单折叠动画）但似乎它并没有将此状态存储在其cookie / localstorage中......结果是在任何页面加载用户都可以看到这个动画。

我确定它不会保存其状态，因为解决问题的唯一方法是“解决问题”。问题是手动重新打开并重新折叠面板...然后，在下一页更改后，这些菜单开始关闭（并且没有动画）。

我在崩溃后也尝试使用PrimeFaces.widgets.sideMenuPanel.saveState()，但没有成功。

你有什么想法吗？

谢谢...

Answer 1

我找到了问题的解决方案。

如果您阅读我与Kukeltje的讨论（对我的问题的评论），您会发现最新的Primefaces＆＃39;版本将解决问题。

否则，如果您想避免升级或修改源代码，并且只需要基于Javascript的快速修复，请阅读以下部分答案。

它使用JavaScript直接在组件的状态下工作。

首先，您需要对组件进行变量引用：

<p:panelMenu model="#{menuBackingBean.menuModel}" widgetVar="sidePanelMenu" />

然后你应该在文档就绪上添加以下JS代码：

                var panelMenu = PrimeFaces.widgets.sidePanelMenu;
                // 1. On page loading collapses possible opened panels
                panelMenu.collapseRootSubmenu(panelMenu.headers);
                // following line is commented because it never should be necessary is not necessary (unless unexpected situation I never verified)
                //clearSidePanelMenuPreferences();
                // 2. Call the "clear preferences" actions on click on two tpe of links: first level are the panel link (used to open/close the menu) and second level are the destination links
                // We need to fork also on the first level links to be sure it works after user clicks there then exit from the page in another way
                panelMenu.headers.children("a").click(function(){setTimeout(clearSidePanelMenuPreferences, 500)}); // setTimeout is necessary because this event should be fired after preferences are written
                panelMenu.headers.siblings().find("a").click(function(){clearSidePanelMenuPreferences();});

调用清除首选项的功能如下：

        function clearSidePanelMenuPreferences() {
            var panelMenu = PrimeFaces.widgets.sidePanelMenu;
            panelMenu.expandedNodes = [];   // clear the opened panels lists
            panelMenu.saveState();          // store this information
        }

希望有所帮助

Answer 2

请检查此代码块

PF('myPanelMenu').headers.each(
                function(){
                    var header = jQuery(this);                     
                          PF('myPanelMenu').collapseRootSubmenu(header);
                          header.removeClass('ui-state-hover');                     
                }
            );

Answer 3

我更喜欢这样做才能只执行一次此方法并保持选中菜单选项。

$(document).ready(function() {
if(location.pathname == "/cotizador/" || location.pathname == "/cotizador/faces/login.xhtml"){
    var panelMenu = PrimeFaces.widgets.sidePanelMenu;

    // 1. On page loading collapses possible opened panels
    panelMenu.collapseRootSubmenu(panelMenu.headers);
    panelMenu.expandedNodes = [];   // clear the opened panels lists
    panelMenu.saveState();
 }   
});

在页面加载时自动折叠PrimeFaces PanelMenu中的任何项目

3 个答案: