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

Question

我想要的是用户为我的软件设置权限的简单方法。

我有一个对象树集，每个对象都应该在视图中创建一个可切换的面板。并不是每个网格每行都有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;
    }
}

在我看来，我已经尝试过了：

<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>

正如你所看到的，我用浮动把所有的东西移动到正确的位置。我知道这不是很有反应，所以我正在寻找一种更好的方式来获得这样的设计。我试着把ceckboxes和selectedItems的标签放在两个不同的网格中，但后来我的复选框消失了。

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

目前它看起来像这个

Answer 1

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

<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>