在 JSF/PrimeFaces 中显示复选框列表答案

【问题标题】：Displaying checkbox list in JSF/PrimeFaces在 JSF/PrimeFaces 中显示复选框列表
【发布时间】：2013-11-08 19:14:33
【问题描述】：

我正在使用<p:selectManyCheckbox> 显示复选框，如下所示。

<p:selectManyCheckbox id="colourList" value="#{productColourManagedBean.colours}" layout="grid" columns="4">
    <f:selectItems var="colour" 
                   value="#{productColourManagedBean.colourList}" 
                   itemLabel="#{colour.colourHex}" 
                   itemValue="#{colour.colourId}"/>
</p:selectManyCheckbox>

它根据列表在网格布局中显示复选框列表 - List<Colour> 由其对应的 JSF 托管 bean 提供。

它将colourHex 显示为复选框标签。我需要将实际颜色显示为复选框标签，以便列表可以显示如下。

这可以通过使用像 <div> 这样的容器标签来实现，如下所示。

<div style="background-color:##{colour.colourHex}" 
     title="name : #{colour.colourName} Hex : #{colour.colourHex}">

     &nbsp;&nbsp;
</div>

但是如何通过使用<p:selectManyCheckbox> 或其他方式来实现呢？

【问题讨论】：

标签： jsf checkbox primefaces checkboxlist jsf-2.2

【解决方案1】：

您可以使用带有var 和showCheckbox 属性集的<p:selectManyMenu> 来实现此目的。 var 属性允许通过嵌套的<p:column> 定义自定义内容。 showCheckbox 属性可以设置为true 以获取复选框列。另请参阅its showcase 中的“高级”示例。

这是一个启动示例（提示您应该如何实际命名这些属性，无需在属性名称中重复实体名称）：

<p:selectManyMenu value="#{bean.selectedColors}" var="color" showCheckbox="true" converter="omnifaces.SelectItemsConverter">
    <f:selectItems value="#{bean.availableColors}" var="c" itemValue="#{c}" itemLabel="#{c.name}" />
    <p:column>  
        <div style="width: 100px; height: 20px; background-color:##{color.hex}; border: 1px solid black;" 
            title="Name: #{color.name} Hex: #{color.hex}" />
    </p:column>  
</p:selectManyMenu>

Bean 相当简单：

private List<Color> selectedColors;
private List<Color> availableColors;

// ...

5 种基本颜色对我来说是这样的：

【讨论】：