Question

当鼠标放在某个人的名字上时，我想显示一个带有对话框的人的详细信息，如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>

Answer 1

我终于找到了overlayPanel，remoteCommand和一些javascript代码的解决方案

XHTML

          <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>

javascript代码，将param发送到remoteCommand

 <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>

backingbean

 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());
    }
}

primefaces对话框作为Facebook的工具提示显示人们的详细信息

1 个答案: