JSF 2.0 + Primefaces 2.x: подсказка для строкой datatable

Кто-нибудь знает, как я могу показать всплывающую подсказку всякий раз, когда пользователь навешивается над строкой в моем ядре? Кроме того, всплывающая подсказка должна отображать дерево поверхностей, а данные для заполнения дерева должны быть загружены до отображения всплывающей подсказки.

Я пробовал простой P.O.C, добавив всплывающую подсказку в мой <p:column>, но всплывающая подсказка показывает только для этого столбца, и мне нужно иметь мышь непосредственно над текстом в столбце для всплывающей подсказки. У моего P.O.C нет дерева в всплывающей подсказке, потому что я еще не понял эту часть.

Любая помощь/предложения будут очень благодарны.

Ответ 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 согласно вашему требованию.

Надеюсь, что это поможет.

Ответ 2

Я пытался найти более приятное решение и нашел общую всплывающую подсказку о расширениях интерфейсов.

Я сделал это решение в своем коде:

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

Для данных datatable нужен styleClass, потому что селектор всплывающей подсказки должен соответствовать только этой таблице и другим таблицам.