使用 10 列渲染 p:selectManyCheckbox

Question

我为一些统计数据开发了一个接口 JEE / JSF。 我创建了复选框来选择用户希望显示的引用，但问题是我使用基于数据库中的数据生成复选框 Arraylist。

而且我无法按我的意愿定位它们。我希望在 10 个复选框之后，其他人直接生成到行等。..

我有这个结果

我希望我能做到这一点

MTBFBEAN

private List<String> selectedReference = new ArrayList<String>();
private List<String> listReference = new ArrayList<String>(); 
private Boolean afficher = false; // Déclaration du bool pour le rendered de
                                    // ma vue dans MTBF

@SuppressWarnings("deprecation")
public StatisticsBeanMTBF() {
    this.beginDate = new Date(2001, 00, 01);
    List<ProductConfModel> listtmp = this.moduleGlobal.getProductConfModels(2);
    for (ProductConfModel pcm : listtmp) {

        this.listReference.add(pcm.getReference());
        }
    }

public void mTBFByType() {
    this.afficher = true;
    this.listMTBF = new ArrayList<StatistiquesMTBF>();
    List<StatistiquesMTBF> suspense = this.moduleGlobal.getMTBFByType(nbHeure, nbJour, NS, DAE, beginDate, endDate);
    for (StatistiquesMTBF smtbf : suspense) {
        for (String s : this.selectedReference) {
            if (smtbf.getReference().equals(s)) {
                this.listMTBF.add(smtbf);
            }

JSF XHTML

    <h:outputText value="Date début :* " />
                    <p:calendar value="#{statisticsBeanMTBF.beginDate}"
                        navigator="true" required="true" />
                    <h:outputText value="Date fin:* " />
                    <p:calendar value="#{statisticsBeanMTBF.endDate}" navigator="true"
                        required="true" />

                </h:panelGrid>
                <h:panelGrid columns="1">
                    <h:outputText value="Selectionner votre référence : " />

                    <p:selectManyCheckbox id="grid" columns="5"
                        value="#{statisticsBeanMTBF.selectedReference}">
                        <f:selectItems value="#{statisticsBeanMTBF.listReference}" />
                        </p:selectManyCheckbox> 
                </h:panelGrid>
                <p:separator />

如果有人可以帮助我，那就太好了。

谢谢！

Answer 1

我得到了这个结果：

<h:panelGroup layout="block" styleClass="selection">
    <p:selectManyCheckbox layout="pageDirection" value="#{selection.selection}">
</h:panelGroup>

并设置每个<tr>:

.selection tr {
   float: left;
    width: 33%;
} 

在您的情况下，将其设置为 10%，将外部容器设置为 width: 100%。

看起来是这样的：

Answer 2

您应该根据此example 将layout="grid" 添加到您的p:selectManyCheckbox。像这样：

<p:selectManyCheckbox id="grid" layout="grid" columns="5" value="#{statisticsBeanMTBF.selectedReference}">
    <f:selectItems value="#{statisticsBeanMTBF.listReference}" />
</p:selectManyCheckbox>

编辑：

在 PrimeFaces 文档中的快速搜索显示 columns 是在 4.0 版中添加的。如果您没有此版本或无法升级，则需要使用一些 CSS 以旧方式进行。