数据表中每一行的工具提示

Osc*_*rEi 8 datatable tooltip primefaces jsf-2 primefaces-extensions

这个问题尖叫是JSF 2.0 + Primefaces 2.x的重复:数据表行的工具提示,但由于这个老问题对我来说没有工作/满意的解决方案,并且没有办法(?)得到关注,我开了这个新的一.

这很简单:我有一个 dataTable(使用JSF标准或使用primefaces),我想为每个行添加一个不同的工具提示(不仅仅是为了一个字段!).

到目前为止我尝试了什么:

<pe:tooltip value="This is row number #{rowIndex}"
    for="@(#table1 tr[role=row][data-ri=#{rowIndex}])" 
    atPosition="top center" myPosition="bottom center"
    shared="true" />
Run Code Online (Sandbox Code Playgroud)

#table1我的数据表的ID 在哪里.因此我想到了这一点.

来自JSF 2.0 + Primefaces 2.x的两个解决方案:数据表行的工具提示:第一个解决方案有效,但仅适用于一个字段/ id而不适用于整行.第二种解决方案对我来说根本不起作用.

而且我100%肯定两个 - 主要表面和主要表面扩展 - 对我有用,我测试了它.

Dan*_*rgo 7

我做了一些测试,这种方法非常有效:

<p:dataTable var="entry" value="#{....}" styleClass="myTable" rowIndex="rowIndex">
    <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>
Run Code Online (Sandbox Code Playgroud)

请注意,为了将data-ri属性放在datatable行上,您需要添加属性rowIndex(rowIndex ="rowIndex").

它也合作

<p:tooltip for="@(.myTable tr[role=row][data-ri=#{rowIndex}])" value="This is row number #{rowIndex}" />  
Run Code Online (Sandbox Code Playgroud)

  • 将其更改为rowIndexVar (2认同)

小智 5

您也可以在不使用 primefaces 扩展的情况下执行此操作。此示例代码适用于 primefaces 5.2。请注意,在 primefaces 5.2 中,p:dataTable 属性是rowIndexVar而不是上面示例中的 rowIndex。

<h:form id="idform">

<p:dataTable var="komp" 
    id="idDataTable" 
    value="#{kompselect.listKomponenten}"
    rowIndexVar="rowIndex"
    selection="#{kompselect.selectedKomponente}"
    rowKey="#{komp.name}">
    <p:column>
        <h:outputText id="otSelKomponente" value="#{komp.name}" />
        <p:tooltip  rendered="#{komp.displayToolTip}"
                for="idForm:iddataTable:#{rowIndex}:otSelKomponente"
                value="this is my Tooltip"/>

    </p:column>
</p:dataTable>
Run Code Online (Sandbox Code Playgroud)