2014-02-11 4 views
6

So zeigen Sie QuickInfo für die Kopfzeile der dynamischen Tabelle p: dataTable an, wenn Sie mit der Maus über die Kopfzeile gehen, um den gesamten Titel der Kopfzeilenspalte anzuzeigen.QuickInfo anzeigen, wenn die Maus über die Kopfspalte bewegt wird dataTable

<p:dataTable id="detailDataTable" widgetVar="detailWidgetVar" 
value="#{model.elements}" var="element" 

paginator="false" resizableColumns="false" scrollWidth="100%" 
scrollable= "true" emptyMessage="Aucun résultat" 
styleClass="tableResultat" rowStyleClass=""> 
<p:columns value="#{model.columns}" var="column" columnIndexVar="colIndex" 
headerText="#{column.header}" 
styleClass="#{column.styleClass}" width="#{column.width}" 
sortBy="#{(element[column.productId])[column.property]}"> 
<h:outputText value="#{(element[column.productId])[column.property]}" 
title="#{(element[column.productId])[column.property]}"/> 
         </p:columns> 
        </p:dataTable> 

Antwort

13

Sie könnten die Global Primefaces Tooltip; Sie müssen nur Ihren Ansatz ändern, um den Kopfzeilen-Text festzulegen, indem Sie das <f:facet/> lieber als das headerText Attribut verwenden. Arbeiten mit dem Codebeispiel

<p:tooltip/> 

    <p:columns value="#{model.columns}" var="column" columnIndexVar="colIndex" 
     headerText= styleClass="#{column.styleClass}" width="#column.width}" sortBy="#{(element[column.productId])[column.property]}"> 
    <f:facet name="header"> 
      <h:outputText value="#{column.header}" title="#{column.header}"/> 
    </f:facet> 
     <h:outputText value="#{(element[column.productId])[column.property]}" title="#{(element[column.productId])[column.property]}"/> 
    </p:columns> 

Zwei Dinge haben

passiert
  1. Ich habe ein global definiert <p:tooltip/>
  2. Mit dem HTML-Standard title Attribut auf dem Kopf Facette Text. Dies ist, was sich in den globalen Tooltip einklinkt, um Tooltip-Text pro Spalte
anzuzeigen