primefaces对话框作为工具提示，如facebook显示人员详细信息

当鼠标放在一个人的名字上时，我想通过Facebook上显示的对话框显示此人的详细信息

我正在

primefaces

中使用对话框框架。 对话框应显示鼠标放在人身上时必须加载的数据

问题在于对话框位置：

<p:dataTable filterDelay="700"  reflow="true"   emptyMessage="No se encontraron elementos"  widgetVar="tblist"  
   id="dataTableList" var="item"  paginator="true"  paginatorPosition="bottom"
   rows="10" rowKey="#{item.idPersona}" value="#{listadoPersonasMB.listPersonas}" filteredValue="#{listadoPersonasMB.filterlistPersonas}">
   <f:facet name="header">
      Resultado de la búsqueda #{listadoPersonasMB.cantPerFilter}
   </f:facet>
   <p:ajax event="filter" oncomplete="handleLoadStart();"/>
   <p:column  style="width: 50px">
      <p:graphicImage  style="border-radius: 50%"  alt="image" id="fotoPer"  value="#{listadoPersonasMB.fotoPersonaTabla}" cache="false" width="100%">
         <f:param name="personId" value="#{item.idPersona}" />
      </p:graphicImage>
   </p:column>
   <p:column width="100%"  headerText="Nombre y apellidos" sortBy="#{item.nombre}" style="text-align: left" filterBy="#{item.nombre} #{item.nombre2} #{item.apellidos} #{item.apellidos2}" filterMatchMode="contains">
      <p:commandLink ajax="false" id="pict" action="#{mBDetallesPersona.detallesPersona(item.idPersona)}" onmouseover="showPersonDetail();">
         <h:outputText value="#{item.nombre} #{item.nombre2} #{item.apellidos} #{item.apellidos2}"/>
      </p:commandLink>
   </p:column>
</p:dataTable>
<p:remoteCommand id="rcomperson" name="showPersonDetail" process="@this" 
   actionListener="#{listadoPersonasMB.showPersonDetail}"
   update=":form2:perDeta" oncomplete="PF('carOP').show('#{component.clientId}')"
   />
<p:overlayPanel widgetVar="carOP" showEffect="fade" hideEffect="fade">
   <p:outputPanel id="perDeta">
      <ui:include src="perDialog.xhtml" />
   </p:outputPanel>
</p:overlayPanel>

Resultado de la búsqueda#{listadoPersonasMB.cantPerFilter}

我终于找到了使用OverlyPanel、remoteCommand和一些javascript代码的解决方案

xhtml

Resultado de la búsqueda#{listadoPersonasMB.cantPerFilter}

javascript代码，将参数发送到remoteCommand

var-idcom=0；
函数LoaderSondetalles（idC、idPer）{
showPersonDetail（[{name:'x'，value:idPer}，{name:'y'，value:20}]）；
idcom=idC；
}
函数loadPanel（）{
PF（“carOP”）.show（idcom）；
}

扁豆

public void showPersonDetail（）{
试一试{
Map params=FacesContext.getCurrentInstance（）.getExternalContext（）.getRequestParameterMap（）；
this.idPerSeledtToDialog=Integer.valueOf（params.get（“x”）；
}捕获（例外e）{
JsfUtil.addErrorMessage（e，“Error:filterListener（）”+e.getMessage（））；
}
}

为什么会出现对话框？为什么不是覆盖层？请看PrimeFaces演示，我现在正在尝试，但我应该在OverlyPanel中显示数据之前加载数据。是的，所以？看不出问题…它显示了表下方的OverlyPanle，与showcase不同，在按钮附近，我正在使用onmouseover事件启动remotecommand，从Dateles面板加载数据。请阅读文档。。。。

          <p:dataTable filterDelay="700"  reflow="true"   emptyMessage="No se encontraron elementos"  widgetVar="tblist"  
                                             id="dataTableList" var="item"  paginator="true"  paginatorPosition="bottom"
                                             rows="10" rowKey="#{item.idPersona}" value="#{listadoPersonasMB.listPersonas}" filteredValue="#{listadoPersonasMB.filterlistPersonas}"> 
                                    <f:facet name="header">
                                        Resultado de la búsqueda #{listadoPersonasMB.cantPerFilter}
                                    </f:facet>                                        
                                    <p:column  style="width: 50px">   
                                        <p:graphicImage  style="border-radius: 50%"  alt="image" id="fotoPer"  value="#{listadoPersonasMB.fotoPersonaTabla}" cache="false" width="100%">
                                            <f:param name="personId" value="#{item.idPersona}" />                           
                                        </p:graphicImage>

                                    </p:column> 

                                    <p:column width="100%"  headerText="Nombre y apellidos" sortBy="#{item.nombre}" style="text-align: left" filterBy="#{item.nombre} #{item.nombre2} #{item.apellidos} #{item.apellidos2}" filterMatchMode="contains">
                                        <p:commandLink ajax="false"  action="#{mBDetallesPersona.detallesPersona(item.idPersona)}" onmouseover="loadPersonDetalles('#{component.clientId}', #{item.idPersona});">
                                            <h:outputText value="#{item.nombre} #{item.nombre2} #{item.apellidos} #{item.apellidos2}"/>
                                        </p:commandLink>

                                    </p:column>   

                                    <p:column headerText="Edad" sortBy="#{item.calculaEdad()}" style="text-align: right; width: 60px"  sortFunction="#{utilMB.ordenarEnteros}">
                                        <h:outputText value="#{item.calculaEdad()}"/>
                                    </p:column>    
                                    <p:column filterBy="#{item.miembro eq true ? 'Sí' : 'No'}" headerText="Membresía"  filterMatchMode="contains" style="width: 220px">

                                        <h:outputText value="#{item.miembro eq true ? 'Sí' : 'No'}" />
                                        <span> <p:commandButton rendered="#{mBLogin.siTieneFuncion('AdminPersonas')}"  icon="fa fa-refresh Fs16 white" title="Cambiar" 
                                                                actionListener="#{listadoPersonasMB.selectToSetMember(item)}" oncomplete="PF('newDialog').show()"/>   </span>
                                    </p:column>

                                    <p:column   style="text-align: center; width: 40px" rendered="#{mBLogin.siTieneFuncion('AdminPersonas')}">  
                                        <p:commandButton  icon="fa fa-pencil Fs16 white" title="Modificar" 
                                                          action="#{listadoPersonasMB.cargaPersonaModi(item.idPersona)}"/>                                        
                                    </p:column>
                                    <p:column   style="text-align: center; width: 40px" rendered="#{mBLogin.siTieneFuncion('AdminPersonas')}">  
                                        <p:commandButton  icon="fa fa-trash Fs16 white" title="Dar Baja" 
                                                          action="#{mBDeletePersona.detallesPersona(item.idPersona)}"/>                                        
                                    </p:column>
                                </p:dataTable>   

                                <p:remoteCommand  name="showPersonDetail" process="@this" 
                                                  actionListener="#{listadoPersonasMB.showPersonDetail}"
                                                  update=":form2:perDeta"  oncomplete="loadPanel();"/> 

                                <p:overlayPanel widgetVar="carOP" my="right bottom" showEffect="fade" hideEffect="fade"
                                                dismissable="true" hideEvent="onmouseout"
                                                dynamic="true" 
                                                >
                                    <p:outputPanel id="perDeta">                                                        
                                        <ui:include src="perDialog.xhtml" />
                                    </p:outputPanel>                                               
                                </p:overlayPanel>

 <h:outputScript id="waypointScript" target="body">  

        var idcom = 0;

        function loadPersonDetalles(idC, idPer) {                     
         showPersonDetail([{name:'x', value:idPer}, {name:'y', value:20}]);  
         idcom = idC;
        }

        function loadPanel() {                               
         PF('carOP').show(idcom);
        }

    </h:outputScript>  

 public void showPersonDetail() {
    try {

        Map<String, String> params = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
        this.idPerSeledtToDialog = Integer.valueOf(params.get("x"));


    } catch (Exception e) {
        JsfUtil.addErrorMessage(e, "Error: filterListener() " + e.getMessage());
    }
}