JSF 2.0 + Primefaces 2.x：データテーブル行のツールチップ

Question

ユーザが私のプリミクスデータテーブル内の行の上を移動するたびにツールチップを表示する方法を知っている人はいますか？また、ツールヒントにはプライムフェイスツリーが表示される必要があり、ツールヒントが表示される前にツリーを作成するデータを読み込む必要があります。

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

私はより良い解決策を見つけようとしていましたが、プライムエクステンションの共有ツールチップが見つかりました。ツールチップのセレクタのみがこのテーブルとなし、他のテーブルと一致する必要がありますので、

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

は、私は私のコードでは、このソリューションの作品を作りました。