Primefaces 数据表的列标题中的工具提示

Question

在基于 JSF 2.1 和 Primefaces 6.0 的应用程序中，我尝试向数据表的标题添加工具提示。

在我当前的解决方案中，仅当将鼠标精确指向文本标题（“Projekttyp”）时才会出现工具提示。我需要每当鼠标指针位于列标题中时就显示工具提示。不幸的是，无法为构面标头分配 id。

据我了解，此处描述的全局工具提示Primefaces Showcase Tooltip只能在更高版本的 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>

Answer 1

像上面一样添加

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>

Answer 2

PrimeFaces 在 for 的

p:tooltip

属性中支持

'jquery' 选择器

。您实际上需要选择 id 为typColumntitle 的元素的“父级”，因此这（很可能）会起作用。

<p:tooltip id="typTooltip"
    for="@(#typColumntitle:parent)"
    rendered="true"
    myPosition="left bottom" atPosition="right bottom"
    hideDelay="500">

Answer 3

最终证明解决这个问题很容易。我只需为

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

Answer 4

我提交了 pavan_115544 的答案，它工作正常，但是当我将数据表导出到 Excel 时，列名称消失了。所以我找到了另一个解决方案，它不是工具提示，它是列的标题，看起来非常好。 谢谢大家。

<p:column filterBy="#{eftSwiftMutabakatDTO.relatedRef202}" style="width:5%"
                        headerText="RELATED REFERANCE 202"
                        sortBy="#{eftSwiftMutabakatDTO.relatedRef202}"
                        filterMatchMode="startsWith">
                        <h:outputText id="swfrf202" value="#{eftSwiftMutabakatDTO.relatedRef202}"/>
                        <f:facet exportable="false" name="header" >
                            <h:outputText value="Gelen/Giden" title="Gelen/Giden"/>
                        </f:facet>
                    </p:column>