Question

我使用JSF 2.0创建了Web应用程序，我可以选中h:selectManyCheckbox复选框。以下是我的代码

<h:selectManyCheckbox value="#{UserRegistration.pagesSelected}" id="myPages">
    <f:selectItem itemValue="registerForPatentss" itemLabel="Register New Applicant"/>
    <f:selectItem itemValue="success" itemLabel="Register New Project" />
    <f:selectItem itemValue="getReportss" itemLabel="Patent Reports" />
    <f:selectItem itemValue="searhPatentss" itemLabel="Search For Project" />
    <f:selectItem itemValue="addUserss" itemLabel="Add User Account" />
    <f:selectItem itemValue="logPatentSystemss" itemLabel="System Log" />
    <f:selectItem itemValue="userlistss" itemLabel="Details Of Registered Users" />
</h:selectManyCheckbox>

我得到的输出是

[] Register New Applicant [] Register New Project [] Patent Reports [] Search For Project [] Add User Account [] System Log [] Details Of Registered Users

问题是这是一线。

我想要的是如下。

[] Register New Applicant [] Register New Project [] Patent Reports [] Search For Project
[] Add User Account [] System Log [] Details Of Registered Users

即。一行 4个复选框....

知道如何完成这项工作吗？

编辑1

HTML生成的输出是

<table id="myPages">
    <tr>
<td>
<input name="myPages" id="myPages:0" value="registerForPatentss" type="checkbox" checked="checked" /><label for="myPages:0" class=""> Register New Applicant</label></td>
<td>
<input name="myPages" id="myPages:1" value="success" type="checkbox" checked="checked" /><label for="myPages:1" class=""> Register New Project</label></td>
<td>
<input name="myPages" id="myPages:2" value="getReportss" type="checkbox" checked="checked" /><label for="myPages:2" class=""> Patent Reports</label></td>
<td>
<input name="myPages" id="myPages:3" value="searhPatentss" type="checkbox" checked="checked" /><label for="myPages:3" class=""> Search For Project</label></td>
<td>
<input name="myPages" id="myPages:4" value="addUserss" type="checkbox" checked="checked" /><label for="myPages:4" class=""> Add User Account</label></td>
<td>
<input name="myPages" id="myPages:5" value="logPatentSystemss" type="checkbox" checked="checked" /><label for="myPages:5" class=""> System Log</label></td>
<td>
<input name="myPages" id="myPages:6" value="userlistss" type="checkbox" /><label for="myPages:6" class=""> Details Of Registered Users</label></td>
    </tr>
</table>

Answer 1

请查看tomahawk的<t:selectManyCheckbox>，其中包含简单的用法说明，例如： here

Answer 2

您可以使用CSS：

    <style type="text/css">
        .cb table {
            width: 100%;
        }

        .cb tr {
            display: inline;
        }

        .cb td {
            display: inline-block;
            width: 24%;
        }
    </style>

    <h:form>
        <div class="cb">
            <h:selectManyCheckbox value="#{UserRegistration.pagesSelected}" id="myPages">
                <f:selectItem itemValue="registerForPatentss" itemLabel="Register New Applicant"/>
                <f:selectItem itemValue="success" itemLabel="Register New Project"/>
                <f:selectItem itemValue="getReportss" itemLabel="Patent Reports"/>
                <f:selectItem itemValue="searhPatentss" itemLabel="Search For Project"/>
                <f:selectItem itemValue="addUserss" itemLabel="Add User Account"/>
                <f:selectItem itemValue="logPatentSystemss" itemLabel="System Log"/>
                <f:selectItem itemValue="userlistss" itemLabel="Details Of Registered Users"/>
            </h:selectManyCheckbox>
        </div>
    </h:form>

Answer 3

用于tomahawk的lib

xmlns:t="http://myfaces.apache.org/tomahawk"

<t:selectManyCheckbox value="#{UserRegistration.pagesSelected}" id="myPages" layout="pageDirection"  layoutWidth="4">
    <f:selectItem itemValue="registerForPatentss" itemLabel="Register New Applicant"/>
    <f:selectItem itemValue="success" itemLabel="Register New Project" />
    <f:selectItem itemValue="getReportss" itemLabel="Project Reports" />
    <f:selectItem itemValue="searhPatentss" itemLabel="Search For Project" />
    <f:selectItem itemValue="addUserss" itemLabel="Add User Account" />
    <f:selectItem itemValue="logPatentSystemss" itemLabel="System Log" />
    <f:selectItem itemValue="userlistss" itemLabel="Details Of Registered Users" />
</t:selectManyCheckbox>

在一行上显示4个复选框，而不是在一行上显示所有复选框

编辑1

3 个答案:

Reference