在基于 JSF 2.1 和 PrimeFaces 6.0 的应用程序中,我正在尝试将工具提示添加到数据表的标题中。
在我当前的解决方案中,该工具提示仅在将鼠标精确地指向文本标题(" Projekttyp")时才会出现。每当鼠标指针位于列标题中时,我都需要工具提示出现。不幸的是,不可能将ID分配给Facet标题。
我知道,如下所述的全局工具提示primefaces展示工具提示只能在JSF的更高版本中使用(JSF 2.2)。
这是我的代码:
<p:column sortBy="#{d.auftraggeber.typ}" filterBy="#{d.auftraggeber.typ}" field="auftraggeber.typ"
filterFunction="#{filterController.filterByString}" filterable="true" sortable="true"
width="6%" styleClass="#{Constants.STRING_COL_STYLE_CLASS}">
<f:facet name="filter">
<p:inputText onkeyup="clearTimeout(window.customFilterDelay);window.customFilterDelay=setTimeout(function() {PrimeFaces.getWidgetById('#{component.parent.parent.clientId}').filter();},1500)"
value="#{sucheForm.filter.typFilter}"
tabindex="1"
styleClass="input-filter #{Constants.NO_DIRTY_CHECK_STYLE_CLASS}">
<p:ajax event="keyup" update="@(.updateableFromTableFilter)" delay="1500" />
</p:inputText>
</f:facet>
<f:facet name="header">
<h:outputText id="typColumntitle" title="Projekttyp" value="Projekttyp"/>
<p:tooltip id="typTooltip"
for="typColumntitle"
rendered="true"
myPosition="left bottom" atPosition="right bottom"
hideDelay="500">
<p:scrollPanel style="width: 300px;height:200px">
<p:dataTable id="projektTypTable" var="typ" value="#{projekttypListProducer.typAndDescList}">
<p:column headerText="Projekttyp" width="30%">
<h:outputText value="#{typ.inhalt}"/>
</p:column>
<p:column headerText="Bemerkung" width="70%">
<h:outputText value="#{typ.bemerkung}"/>
</p:column>
</p:dataTable>
</p:scrollPanel>
</p:tooltip>
</f:facet>
<h:outputText value="#{d.auftraggeber.typ}"/>
</p:column>
添加f:facet
标签,如上所述,它可以正常工作(我的意思是显示工具提示值);如果将鼠标悬停在列标题内的任何地方。
甚至在列标题中的文本外部。
<p:column id= "keyColumnId">
<f:facet name="header">
<h:outputText value="YOUR COLUMN HEADER" />
<p:tooltip value="TOOLTIP VALUE TO SHOW" for="keyColumnId" />
</f:facet>
</p:column>
PrimeFaces在p:tooltip
的for
属性中支持" jQuery"选择器。您实际上需要使用ID Typcolumntitle选择该元素的"父",因此(很可能)可以使用。
<p:tooltip id="typTooltip"
for="@(#typColumntitle:parent)"
rendered="true"
myPosition="left bottom" atPosition="right bottom"
hideDelay="500">
解决此问题最终很容易。我只需要为<p:column id="columnwithtooltip"
列分配一个ID并相应地调整工具提示中的for="columnwithtooltip"
:
<p:column id="projekttypColumn" sortBy="#{d.auftraggeber.typ}" filterBy="#{d.auftraggeber.typ}" field="auftraggeber.typ"
filterFunction="#{filterController.filterByString}" filterable="true" sortable="true"
width="6%" styleClass="#{Constants.STRING_COL_STYLE_CLASS}">
<f:facet name="filter">
<p:inputText onkeyup="clearTimeout(window.customFilterDelay);window.customFilterDelay=setTimeout(function() {PrimeFaces.getWidgetById('#{component.parent.parent.clientId}').filter();},1500)"
value="#{sucheForm.filter.typFilter}"
tabindex="1"
styleClass="input-filter #{Constants.NO_DIRTY_CHECK_STYLE_CLASS}">
<p:ajax event="keyup" update="@(.updateableFromTableFilter)" delay="1500" />
</p:inputText>
</f:facet>
<f:facet name="header">
<h:outputText id="typColumntitle" title="Projekttyp" value="Projekttyp"/>
<p:tooltip id="typTooltip"
for="projekttypColumn"
rendered="true"
myPosition="left bottom" atPosition="right bottom"
hideDelay="500">
<p:scrollPanel style="width: 300px;height:200px">
<p:dataTable id="projektTypTable" var="typ" value="#{projekttypListProducer.typAndDescList}">
<p:column headerText="Projekttyp" width="30%">
<h:outputText value="#{typ.inhalt}"/>
</p:column>
<p:column headerText="Bemerkung" width="70%">
<h:outputText value="#{typ.bemerkung}"/>
</p:column>
</p:dataTable>
</p:scrollPanel>
</p:tooltip>
</f:facet>
<h:outputText value="#{d.auftraggeber.typ}"/>
</p:column>