Question

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

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

At the moment it looks like this

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>

样式问题：Ui：使用SelectManyCheckBox重复，带有可切换的面板

1 个答案: