JSF2 或 primefaces p:selectManyCheckbox 带有图标的样式答案

【问题标题】：JSF2 or primefaces p:selectManyCheckbox styling with iconsJSF2 或 primefaces p:selectManyCheckbox 带有图标的样式
【发布时间】：2013-03-28 21:37:17
【问题描述】：

一个问题是谁用图标设计了许多复选框？

<p:selectManyCheckbox value="#{Step4Bean.selectedItems}" id="tag-list" >
                        <f:selectItems value="#{Step4Bean.allItems}" var="item" itemLabel="#{item}" itemValue="#{item}"/>
                    </p:selectManyCheckbox>

我有 6 个项目的复选框，我必须有 2 行，每行 3 个项目，每个项目附近必须有一个图标。我们如何解决这个问题？这是一个输出示例链接

http://jpeg.am/images/?i=5692b9db7ea1d060bc7c97bcc788d6b8.jpg

【问题讨论】：

可能相关：Customizing Primefaces and other JSF solutions
正如@LuiggiMendoza 链接所说，您可以使用布局

标签： jsf checkbox primefaces styling selectmanycheckbox

【解决方案1】：

PF 已经有这个组件的 Grid 布局。

<h3>Grid Layout</h3>
<p:selectManyCheckbox id="grid" value="#{checkboxView.selectedCities}" layout="grid" columns="3">
    <f:selectItems value="#{checkboxView.cities}" var="city" itemLabel="#{city}" itemValue="#{city}" />
</p:selectManyCheckbox>

但最新的 PF 5.2.3 和 5.3-SNAPSHOT 有自定义布局选项

<h3>Custom Layout (since v5.2.3)</h3>
<p:outputPanel id="customPanel" style="margin-bottom:20px">
    <p:selectManyCheckbox id="custom" value="#{checkboxView.selectedConsoles2}" layout="custom">
        <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
        <f:selectItem itemLabel="PS4" itemValue="PS4" />
        <f:selectItem itemLabel="Wii U" itemValue="Wii U" />
    </p:selectManyCheckbox>

    <div class="ui-grid ui-grid-responsive">
        <div class="ui-grid-row">
            <div class="ui-grid-col-4">
                <p:checkbox id="opt1" for="custom" itemIndex="0" />
            </div>
            <div class="ui-grid-col-4">
                <p:checkbox id="opt2" for="custom" itemIndex="1" />
            </div>
            <div class="ui-grid-col-4">
                <p:checkbox id="opt3" for="custom" itemIndex="2" />
            </div>
        </div>
        <div class="ui-grid-row">
            <div class="ui-grid-col-4">
                <h:outputLabel for="opt1" value="Xbox One" />
            </div>
            <div class="ui-grid-col-4">
                <h:outputLabel for="opt2" value="PS4" />
            </div>
            <div class="ui-grid-col-4">
                <h:outputLabel for="opt3" value="Wii U" />
            </div>
        </div>
    </div>
</p:outputPanel>

不确定最新功能如何以及是否可以与<f:selectItems/> 一起使用，或者只能与多个<f:selectItem/> 一起使用。我怀疑是后者

另请参阅： - 见http://www.primefaces.org/showcase/ui/input/manyCheckbox.xhtml

（取自 PF 展示柜的示例！）

【讨论】：