p:selectManyCheckbox 或其他 p:selectMany*/One* 的 Primefaces 工具提示 [英] Primefaces tooltip for p:selectManyCheckbox or other p:selectMany*/One*

问题描述

我想为 p:selectManyCheckBox 中的每个元素添加一个工具提示.但是我想不出解决办法.

I would like to add a tooltip for each element in a p:selectManyCheckBox. However I can't come up with a solution.

我有一个 Role 类，它有 3 个属性，id"(长)、名称"(字符串)和描述"(字符串).显示名称，我希望将描述作为工具提示.

I've got a class Role that has 3 properties, "id" (Long), "name" (String) and "description" (String). The name is displayed and I would like to have the description as a tooltip.

这是一段工作代码:

<p:selectManyCheckbox layout="pageDirection" value="#{roleBean.selectedRoles}" converter="roleConverter">
    <f:selectItems value="#{roleBean.roles}" var="role" itemLabel="#{role.name}" itemValue="#{role}"/>
</p:selectManyCheckbox>

roleConverter 是一个 FacesConverter，它将 Role 转换为 id，反之亦然.

The roleConverter is a FacesConverter that converts the Role to an id and visa versa.

我想出了这个:

<p:selectManyCheckbox layout="pageDirection" value="#{roleBean.selectedRoles}" converter="roleConverter">
    <c:forEach var="role" items="#{roleBean.roles}">
        <f:selectItem id="role#{role.id}" itemLabel="#{role.name}" itemValue="#{role}" />
        <p:tooltip for="role#{role.id}" value="#{role.description}"/>
    </c:forEach>
</p:selectManyCheckbox>

但不幸的是它不起作用.

But unfortunately it doesn't work.

推荐答案

您可以使用 SelectItem#getDescription() 属性如下:

You can achieve this by using the SelectItem#getDescription() property as below:

<p:selectManyCheckbox layout="pageDirection"
    value="#{roleBean.selectedRoles}" converter="roleConverter">
    <f:selectItems value="#{roleBean.roles}" var="role" 
        itemValue="#{role}" itemLabel="#{role.name}" 
        itemDescription="#{role.description}" />
</p:selectManyCheckbox>

这是从 PrimeFaces 6.2 开始支持的(实际上是因为您现在正在阅读的这个答案).

This is supported since PrimeFaces 6.2 (actually because of this very answer you're reading now).

如果您还没有使用 PrimeFaces 6.2 并且由于某种原因无法升级，那么您需要手动覆盖 PrimeFaces SelectManyCheckboxRenderer#encodeOptionLabel() 如下，以便识别和渲染它:

In case you're not on PrimeFaces 6.2 yet and cannot upgrade for some reason, then you need to manually override the PrimeFaces SelectManyCheckboxRenderer#encodeOptionLabel() as below in order to recognize and render it:

public class YourSelectManyCheckboxRenderer extends SelectManyCheckboxRenderer {

    @Override
    protected void encodeOptionLabel(FacesContext context, SelectManyCheckbox checkbox, String containerClientId, SelectItem option, boolean disabled) throws IOException {
        ResponseWriter writer = context.getResponseWriter();
        writer.startElement("label", null);
        writer.writeAttribute("for", containerClientId, null);

        if (option.getDescription() != null) {
            writer.writeAttribute("title", option.getDescription(), null);
        }

        if (disabled) {
            writer.writeAttribute("class", "ui-state-disabled", null);
        }

        if (option.isEscape()) {
            writer.writeText(option.getLabel(), null);
        } else {
            writer.write(option.getLabel());
        }

        writer.endElement("label");
    }

}

在faces-config.xml中注册如下:

<render-kit>
    <renderer>
        <component-family>org.primefaces.component</component-family>
        <renderer-type>org.primefaces.component.SelectManyCheckboxRenderer</renderer-type>
        <renderer-class>com.example.YourSelectManyCheckboxRenderer</renderer-class>
    </renderer>
</render-kit>

这篇关于p:selectManyCheckbox 或其他 p:selectMany*/One* 的 Primefaces 工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！