需要排列af:在三列中选择Many复选框

Question

我有一个项目列表（数量为16），需要为其提供复选框。我使用了af:selectManyCheckbox来渲染它们。挑战是在3列中呈现这16个项目。尝试将af:selectManyCheckbox放在h:panelGrid中，并带有"columns=3"，但没有成功。我只能在一列中得到列表。

<h:panelGrid cellpadding="0" cellspacing="0" columns="2"
                 id="pg2" width="100%">
        <af:selectManyCheckbox id="smc1" label="Languages">
            <af:forEach items="#{pageFlowScope.listingCreateBean.languageList}"
                        var="language">
                <f:selectItem itemValue="#{language.value}"
                              itemLabel="#{language.label}" id="si1"/>
            </af:forEach>
        </af:selectManyCheckbox>
    </h:panelGrid>        

感谢您的帮助。

Answer 1

尝试使用<af:panelFormLayout>组件，并将列设置为3，将行设置为6。

Answer 2

扔掉af:selectManyCheckbox
实现目标的唯一可靠方法是使用af：迭代器或af:forEach和f:selectBoolean复选框以及任何布局组件组合来获得所需布局。

并且避免使用非adf组件（如h:panelGrid），这会给ppr等带来很多麻烦。

Answer 3

试试这个

<style type="text/css">
.checkbox-grid {
    width: 100%;
}
.checkbox-grid .x2f{
    width: 100%;
}
.checkbox-grid div {
    display: block;
    float: left;
    /* 25% 4columns, 33% 3columns, 50% 2columns */
    width: 25%; 
} 
</style>

<af:selectManyCheckbox  value="#{listaFormatos}" styleClass="checkbox-grid">
   <af:forEach var="item" items="#{posiblesListaFormatos}" >
      <f:selectItem itemLabel="#{item.value}" itemValue="#{item.value}" id="si2"/>
   </af:forEach>
</af:selectManyCheckbox>