p:selectManyCheckbox 或其他 p:selectMany*/One* 的 Primefaces 工具提示

Question

我想為p:selectManyCheckBox每個元素添加一個工具提示。 但是我想不出解決辦法。

我有一個Role類，它有 3 個屬性，“id”（Long）、“name”（String）和“description”（String）。 顯示名稱，我希望將描述作為工具提示。

這是一段工作代碼：

<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，反之亦然。

我想出了這個：

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

但不幸的是它不起作用。

Answer 1

您可以通過使用SelectItem#getDescription()屬性來實現這一點，如下所示：

<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 起就支持此功能（實際上是因為您現在正在閱讀的這個答案）。

如果您還沒有使用 PrimeFaces 6.2 並且由於某種原因無法升級，那么您需要手動覆蓋 PrimeFaces SelectManyCheckboxRenderer#encodeOptionLabel()如下以便識別和渲染它：

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>

Answer 2

自 Primefaces v6.2 版本起添加了對 selectManyCheckbox 的工具提示支持。 其他組件也支持這一點。

XHTML 代碼與 BalusC 報告的相同

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

Answer 3

我不得不修改 BalusC 的解決方案以使其適用於我的情況。 那是因為我必須在 Bean 端構建 SelectItem 列表。

public List<SelectItem> getMyItems(){
  List<SelectItem> mySelectItems = new ArrayList<>();
  [loop or ohter code to collect items]
  // create SelectItem with description
  mySelectItems.add(new SelectItem([value], [label], [description]));
  ...
  return mySelectItems;
}

然后這些 SelectItems 可以用於：

<f:selectItems value="#{myBean.myItems}"/>