JSF 2.0 + Primefaces 2.x:数据表行的工具提示 [英] JSF 2.0 + Primefaces 2.x: Tooltip for datatable row

问题描述

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

Does anyone know how I can show a tooltip whenever a user hovers over a row in my primefaces datatable? Also, the tooltip needs to display a primefaces tree and the data to populate the tree will need to be loaded before the tooltip is displayed.

我已经通过在我的<p:column>中添加工具提示来尝试一个简单的P.O.C，但是该工具提示仅针对该列显示，我需要将鼠标直接放在该列中的文本上才能显示该工具提示.我的P.O.C工具提示中没有树，因为我还没有弄清楚那部分.

I've tried a simple P.O.C by adding the tooltip to my <p:column> but the tooltip only shows for that column and I need to have the mouse directly over the text in the column for the tooltip to show. My P.O.C doesn't have the tree in the tooltip because I haven't figured that part out as yet.

任何帮助/建议将不胜感激.

Any help/suggestions will be greatly appreciated.

推荐答案

您可以考虑使用最新版本的PrimeFaces并为此开始使用overlayPanel.这完全符合您的要求.

You may consider moving to latest version of PrimeFaces and start using overlayPanel for this. This will exactly fit your requirement.

<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中显示树.

In the above example, data of a row is displayed in labels as user moves the mouse on table rows. We can as well display tree in the overlayPanel as per your requirement.

希望这会有所帮助.

这篇关于JSF 2.0 + Primefaces 2.x:数据表行的工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！