如何展开动态子菜单答案

【问题标题】：How to expand a dynamic submenu如何展开动态子菜单
【发布时间】：2019-09-08 19:49:40
【问题描述】：

我创建了一个动态子菜单。当我点击这个动态子菜单时，我用 DAO 在里面创建了另一个动态子菜单，但是这个新的子菜单并没有出现并自动展开。它仅在我刷新页面时出现。怎么做才能让孩子的子菜单自动出现？

我尝试扩展 true、回调 bean、faces.update(clientID) 没有成功

我的 xhtml 文件带有带有绑定变量 classJS 的回调 bean

        <script>
            $(document).ready(function() { 
                $(".classJS").bind("click", function(e) {
                    var parent = document.getElementById(this.id).parentElement;
                    parent = parent.innerHTML;
                    var str = $(this).text()
                    var startPosition = parent.indexOf(str);
                    parent = parent.substring(startPosition-20);
                    parent = parent.split("-");
                    onCallBack( [ { name: 'Id', value: parent[1] } , { name: 'ClientId', value: this.id } ] );
                }); 
            });

            <h:form id="formID">
                <p:remoteCommand actionListener="#{structureOrganiqueBean.onCallBackFromJS}" name="onCallBack" style="display:none"></p:remoteCommand>
                <p:panelMenu  id="panelMenuId" model="#{structureOrganiqueBean.menuModel}" style="width:300px" ></p:panelMenu>
            </h:form>



Mybean : 

            public void onCallBackFromJS() {
                FacesContext context = FacesContext.getCurrentInstance();
                Map<String, String> requestParamMap = context.getExternalContext().getRequestParameterMap();
                String id = requestParamMap.get("Id");
                DefaultSubMenu submenParent = (DefaultSubMenu)findComponent(id);
                addSubMenuChildrenTo( submenParent);
            }

    public void addSubMenuChildrenTo(DefaultSubMenu parentmenuElement) {
        Long idTechnique = getIDTechnique(parentmenuElement)
        List<EntityStructureOrganique> entitesChildren = getFacade().getChildrenById(idTechnique);
        for (EntityStructureOrganique entiteChild : entitesChildren) {
            DefaultSubMenu childSubmenuitem = getDefaultSubMenu(entiteChild);
            parentmenuElement.getElements().add(childSubmenuitem);

        }
    }

当我单击子菜单项 parentmenuElement 时，会回调用 addSubMenuChildrenTo。 addSubMenuChildren 向 parentmenuElement 添加新的子菜单。我希望 parentmenuElement 扩展其新的子菜单

【问题讨论】：

嗨...您的问题中没有 jsf、primefaces、javabeans 或 facelets
至少在你的代码中没有
在我的代码中，否，但在我的项目中是。如果你需要更多，我可以放在这里。我是java新手。我还能给你什么？你能帮我吗？
从How to Ask和tour和stackoverflow.com/tags/jsf/info读取minimal reproducible example
您正在向组件树服务器端添加菜单元素。客户端（浏览器）对此一无所知。 panelMenu 组件必须重新渲染/更新。

标签： jsf primefaces javabeans facelets

【解决方案1】：

加载页面时，会设置一个根菜单，我想在其下添加动态子菜单。当我点击这个动态子菜单时，我用 DAO 在里面创建了另一个动态子菜单，但是这个新的子菜单并没有出现并自动展开。它仅在我刷新页面时出现。怎么做才能让孩子的子菜单自动出现？

我的 xhtml 文件

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
            <script type="text/javascript">
                $(document).ready(function() { 
                    $('.maClassJS').click(function(e){
                        e.stopPropagation();
                        onCallBack( [ { name: 'ClientId', value: this.id } ] );
                    });
                }); 
             </script>

        </h:head>
        <h:body>
            <h:form id="formID" name="formID">
                <p:remoteCommand update="panelMenuId" action="#{structureOrganiqueBean.onCallBackFromJS}" name="onCallBack" style="display:none"></p:remoteCommand>
                <p:panelMenu styleClass="maClassJS" id="panelMenuId" model="#{structureOrganiqueBean.menuModel}" style="width:300px" ></p:panelMenu>
            </h:form>
        </h:body>
</html>

我的 bean 文件

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package com.sdzee.exemple;

import java.io.Serializable;
import java.util.HashMap;
import java.util.Map;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

import org.primefaces.model.menu.DefaultMenuModel;
import org.primefaces.model.menu.DefaultSubMenu;
import org.primefaces.model.menu.MenuElement;
import org.primefaces.model.menu.MenuModel;

/**
 *
 * @author 
 */
@ManagedBean
@SessionScoped
public class StructureOrganiqueBean implements Serializable{
    /**
     * 
     */
    private static final long serialVersionUID = 1L;
    private MenuModel menuModel ;
    private Map<String, MenuElement> mapArborescence;
    private DefaultSubMenu subMenu; 

    public DefaultSubMenu getSubMenu() {
        return subMenu;
    }
    public void setSubMenu(DefaultSubMenu subMenu) {
        this.subMenu = subMenu;
    }
    public Map<String, MenuElement> getMapArborescence() {
        return mapArborescence;
    }
    public void setMapArborescence(Map<String, MenuElement> mapArborescence) {
        this.mapArborescence = mapArborescence;
    }

    @PostConstruct
    public void init() {
        setMapArborescence(new HashMap<>());
        setMenuModel(new DefaultMenuModel());

        setSubMenu(new DefaultSubMenu());
        getSubMenu().setLabel("Home test dynamic SN");
        getSubMenu().setExpanded(Boolean.FALSE);        

        DefaultSubMenu submenuitem0 = new DefaultSubMenu();
        submenuitem0.setLabel("Root");
        submenuitem0.setId("0_0"); //I arbitrarily put 0_0 to match with client side ID. No problem here
        submenuitem0.setStyleClass("maClassJS");
        getSubMenu().getElements().add(submenuitem0);
        getSubMenu().setExpanded(true);
        getMapArborescence().put(submenuitem0.getId(), submenuitem0);

        getMenuModel().addElement(getSubMenu());
    }

    public MenuModel getMenuModel() {
        return menuModel;
    }

    public void setMenuModel(MenuModel menuModel) {
        this.menuModel = menuModel;
    }

    public void addSubMenuChildrenTo(DefaultSubMenu parentmenuElement) {
        if (parentmenuElement.getElementsCount()==0) {
            String idChild = parentmenuElement.getId()+"_0";
            DefaultSubMenu submenuChild = new DefaultSubMenu();
            submenuChild.setLabel("Child"+idChild);
            submenuChild.setId(idChild);
            submenuChild.setStyleClass("maClassJS");
            parentmenuElement.getElements().add(submenuChild);
            getMapArborescence().put(submenuChild.getId(), submenuChild);
        }
    }

    public void onCallBackFromJS() {
        FacesContext context = FacesContext.getCurrentInstance();
        Map<String, String> requestParamMap = context.getExternalContext().getRequestParameterMap();
        String clientId = requestParamMap.get("ClientId");      
        DefaultSubMenu submenParent = (DefaultSubMenu)findComponent(clientId) ;     
        if(submenParent != null) {
            addSubMenuChildrenTo(submenParent);
        }
    }   

    public MenuElement findComponent(final String id) {
        return getMapArborescence().get(id);
    }

}

当我点击“Root”时，会出现第一个动态子菜单。但是，当我单击第一个动态子菜单时，没有任何附加内容或在他下面创建一个新的动态子菜单。但是，如果我刷新页面并单击最后一个子菜单，则会创建并显示一个新的动态 sudmenu。每次我需要刷新页面而不是自动扩展时。为什么？

【讨论】：