在primefaces数据表中设置复选框的工具提示

时间:2017-05-25 11:42:32

标签: java primefaces

您好我想在primfaces datatable中为选择列设置工具提示。作为示例,我使用了以下代码。

  <p:dataTable id="checkboxDT" var="car" value="#{dtSelectionView.cars6}" 
   selection="#{dtSelectionView.selectedCars}" rowKey="#{car.id}" 
    style="margin-bottom:0">

    <p:column id="selectId" selectionMode="multiple" style="width:16px;text-align:center">
        <p:tooltip for="selectId" value="tooltip for selection"/> 
    </p:column>

    <p:column headerText="Id">
        <h:outputText id="textId" value="#{car.id}" />
        <p:tooltip for="textId" value="tooltip for text"/> 
    </p:column>


</p:dataTable>

在上面的代码中,工具提示是为文本生成的,但不是为了选择。已经提出了类似的问题here但是注释中提到的解决方案不起作用。 请帮助我:))

1 个答案:

答案 0 :(得分:0)

<p:column>id时无法呈现selectionMode="multiple"

典型的<p:column selectionMode="multiple">将呈现以下html:

<td class="ui-selection-column" role="gridcell">
    <span class="ui-column-title"></span>
    <div class="ui-chkbox ui-widget">
        <div class="ui-helper-hidden-accessible">
            <input name="form:dataTableId_checkbox" aria-checked="false" aria-label="" type="checkbox">
        </div>
        <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
            <span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span>
        </div>
    </div>
</td>

鉴于上述代码,工具提示无法找到附加值消息的ID。

要显示选择列的工具提示消息,您可以使用Shapes and polygons google maps

示例代码:

<p:dataTable id="checkboxDT" var="car"
    value="#{dtSelectionView.cars6}"
    selection="#{dtSelectionView.selectedCars}" rowKey="#{car.id}"
    style="margin-bottom:0" rowIndexVar="rowIndex">

    <p:column selectionMode="multiple"
        style="width:16px;text-align:center">
        <p:tooltip for="@(.ui-datatable tr[role=row][data-ri=#{rowIndex}] td[class=ui-selection-column] div[class~=ui-chkbox])" value="tooltip for selection" />
    </p:column>
</p:dataTable>

当鼠标悬停行复选框时,此示例显示工具提示消息 你可以玩这个来达到你想要的效果。