Primefaces 样式问题：Ui:使用SelectManyCheckBox重复，使用可切换面板

我想要的是一种简单的方式，让用户为我的软件设置权限

我有一个对象树集，每个对象应该在视图中创建一个可切换面板。并非每个网格的每一行都有3个复选框，有些网格只有1或2个复选框

我的对象类：

public class PermissionCheckBox {

    //the title of the toggleable panel
    private String title;

    //the rights read write delete
    private TreeMap<String, String> rights = new TreeMap<String, String>();

    //the documents which the rights belong to
    private TreeMap<String, String> documents = new TreeMap<String, String>();

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public TreeMap<String, String> getRights() {
        return rights;
    }

    public void setRights(TreeMap<String, String> rights) {
        this.rights = rights;
    }

    public TreeMap<String, String> getDocuments() {
        return documents;
    }

    public void setDocuments(TreeMap<String, String> documents) {
        this.documents = documents;
    }

}

公共类权限复选框{
//可切换面板的标题
私有字符串标题；
//读写删除权限
私有树映射权限=新建树映射（）；
//权利所属的文件
私有树映射文档=新树映射（）；
公共字符串getTitle（）{
返回标题；
}
公共无效集合标题（字符串标题）{
this.title=标题；
}
公共树映射getRights（）{
归还权；
}
公共无效设置权限（树映射权限）{
这个。权利=权利；
}
公共树映射getDocuments（）{
归还文件；
}
公共文档（树映射文档）{
本文件=文件；
}
}

在我看来，我试过这样做：

<ui:repeat var="group" value="#{GroupBean.permissionCheckBoxes}">

    <p:panel header="#{messages[group.title]}" toggleable="true"
        collapsed="true" style="margin-bottom: 40px;">

        <div class="Card">

            <div class="CardBody">

                <ui:repeat var="right" value="#{group.rights.entrySet().toArray()}">

                    <p:outputLabel value="#{messages[right.key]}"  style="float:right"/>

                </ui:repeat>

                <ui:repeat var="document"
                value="#{group.documents.entrySet().toArray()}">

                    <p:selectManyCheckbox style="float:right;" 
                    value="#{GroupBean.selectedPermissions}" layout="responsive"
                    columns="#{group.rights.size()}">

                         <f:selectItems value="#{group.rights.entrySet().toArray()}"
                        var="right" itemLabel=""
                        itemValue="#{right.value} + ';' + #{document.value}" />

                    </p:selectManyCheckbox>

                    <p:outputLabel style="float:left;"
                    value="#{messages[document.key]}" />

                </ui:repeat>

            </div>

        </div>

   </p:panel>

</ui:repeat>

正如你所看到的，我使用float将所有东西移动到正确的位置。我知道这不是很灵敏，所以我正在寻找一种更好的方法来获得这样的设计。 我曾尝试将CeckBox和selectedItems的标签放在两个不同的网格中，但后来我的复选框消失了

我还想有一个网格与2列的可切换面板

---

我现在找到了使用panelGrids的解决方案。接下来的工作对我们的css人员来说应该很容易：）

那么这在使用普通的jsf时有效吗？或者换句话说，你添加的标签不是最好的。这很可能是一个简单的html/css问题，通过将其标记为PrimeFaces（我认为这一点都不相关），能够帮助您的人数并不是最优的。但是对于客户端html/css问题，您必须发布客户端html，而不是服务器端facelet/xhtmlIf。我只使用jsf的对应项。它看起来非常糟糕：我认为它与primefaces有关，因为通常我应该使用面板网格来将所有内容按正确的顺序排列，所以我希望有人能想出一个办法来解决这个问题。

<ui:repeat var="group" value="#{GroupBean.permissionCheckBoxes}">
        <p:panel header="#{messages[group.title]}" toggleable="true"
            collapsed="true" style="margin-bottom: 40px;">
            <div class="Card">
                <div class="CardBody">
                    <ui:repeat var="right"
                        value="#{group.rights.entrySet().toArray()}">
                        <p:outputLabel value="#{messages[right.key]}"
                            style="float:right" />
                    </ui:repeat>
                    <ui:repeat var="document"
                        value="#{group.documents.entrySet().toArray()}">
                        <p:panelGrid columns="2" styleClass="ui-panelgrid-blank"
                            layout="grid">
                            <p:panelGrid columns="1" styleClass="ui-panelgrid-blank"
                                layout="grid">
                                <p:outputLabel value="#{messages[document.key]}" />
                            </p:panelGrid>
                            <p:panelGrid columns="1" styleClass="ui-panelgrid-blank"
                                layout="grid">
                                <ui:repeat var="right"
                                    value="#{group.rights.entrySet().toArray()}"> 
                                    <p:selectBooleanCheckbox style="float:right"
                                        value="#{GroupBean.selectedPermissions[document.value';'right.value]}" />
                                </ui:repeat>
                            </p:panelGrid>
                        </p:panelGrid>
                    </ui:repeat>
                </div>
            </div>
        </p:panel>
</ui:repeat>