Question

有人知道每当用户将鼠标悬停在我的primefaces数据表中的某一行时，我如何显示工具提示？此外，工具提示需要显示一个primefaces树，并且在显示工具提示之前需要加载填充树的数据。

我通过将工具提示添加到我的<p:column>尝试了一个简单的P.O.C，但工具提示仅显示该列，我需要将鼠标直接放在列中的文本上以显示工具提示。我的P.O.C在工具提示中没有树，因为我还没有想到那个部分。

非常感谢任何帮助/建议。

Answer 1

您可以考虑迁移到最新版本的PrimeFaces并开始使用overlayPanel。这完全符合您的要求。

<p:dataTable value="#{myBean.myDetails}" var="myItem" rowIndexVar="rowIndex" >
    <p:column>
        <f:facet name="header">
            <h:outputLabel value="#"/>
         </f:facet>
         <h:outputLabel value="#{rowIndex}" id="myLbl"/>

         <p:overlayPanel id="myPanel" for="myLbl" showEvent="mouseover" hideEvent="mouseout">
               <p:panelGrid columns="2">  
                  <f:facet name="header">Details In Tree</f:facet>  

                  <h:outputLabel value="Column 1 of Table" />  
                  <h:outputLabel value="#{dataItem.Col1}" />

                  <h:outputLabel value="Column 2 of Table" />  
                  <h:outputLabel value="#{dataItem.Col2}" />

               </p:panelGrid>  
          </p:overlayPanel>  
    </p:column>
    .....
    .....
</p:dataTable>

在上面的示例中，当用户在表行上移动鼠标时，行的数据将显示在标签中。我们也可以根据您的要求在overlayPanel中显示树。

希望这有帮助。

Answer 2

我试图找到一个更好的解决方案，并找到了primefaces扩展的共享工具提示。

我在我的代码中使用了这个解决方案：

<p:dataTable var="entry" value="#{....}" styleClass="myTable">
    <p:column headerText="Header 1">
        <h:outputText value="#{entry.value1}" />
    </p:column>

    <p:column headerText="Header 2">
        <h:outputText value="#{entry.value2}" />
        <pe:tooltip value="This is row number #{rowIndex}" forSelector=".myTable tr[role=row][data-ri=#{rowIndex}]"
            shared="true" atPosition="top center" myPosition="bottom center" showDelay="500" />
    </p:column>
</p:dataTable>

数据表需要一个styleClass，因为工具提示的选择器必须只匹配该表而不匹配其他表。

JSF 2.0 + Primefaces 2.x：数据表行的工具提示

2 个答案: