2

我正在使用<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>或其他方式来实现呢？

4

1 回答 1

3

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

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

<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 种基本颜色时的样子：

在此处输入图像描述

于 2013-11-08T20:45:03.527 回答