Question

我正在进行搜索，该搜索通过数据库并在我的Web应用程序中以h:dataTable的形式提供结果。但是h:dataTable有很多可选行。

我h:selectManyCheckbox的简单代码：

<h:panelGroup styleClass="panelGroup">
    <h:selectManyCheckbox value="#{searchBean.auswahl}">
        <f:selectItems value="#{searchBean.auswahl}" />
    </h:selectManyCheckbox>
</h:panelGroup>

使用我的h:selectManyCheckbox的默认布局，它只会在一行中显示所有~30个复选框，完全破坏了网站的设计。

然而，在研究可能的布局选项后，似乎只有两个。

默认情况下将它们全部水平显示在一行中，或者将它们全部垂直显示在一行中。我更喜欢沿着几行的行布局，每行有5个复选框。

我如何实现这一目标？

Answer 1

让所有表格单元格float保留block个元素，clear每个Xn+(X+1) child浮动，其中X是列数。为了使所有内容保持一致，请确保空格don't wrap并且宽度正好100%/X，并考虑到box sizing覆盖填充+边框。

换句话说，给出了：

<h:selectManyCheckbox styleClass="grid">

您可以创建一个3列网格，如下所示：

.grid td {
    display: block;
    float: left;
    white-space: nowrap;
    width: 33.3333333333%;
    box-sizing: border-box;
}
.grid td:nth-child(3n+4) {
    clear: left;
}

如下所示的4列网格：

.grid td {
    display: block;
    float: left;
    white-space: nowrap;
    width: 25%;
    box-sizing: border-box;
}
.grid td:nth-child(4n+5) {
    clear: left;
}

如下所示的5列网格：

.grid td {
    display: block;
    float: left;
    white-space: nowrap;
    width: 20%;
    box-sizing: border-box;
}
.grid td:nth-child(5n+6) {
    clear: left;
}

等等。

Answer 2

上述解决方案确实是我需要的-除了我在“兼容”环境（公司政策）中工作外。它可以很好地在MS Edge / IE11中工作，但不能在IE 11兼容模式下工作。

但是，答案是直接转到Javascript中的DOM并重新格式化表格。可以从'onload'中的<body>事件中调用该函数 'form:identifier'是{ 'id=...'

<h:selectManyCheckBox id="MyManyCheckBox"

如何更改h：selectManyCheckbox的布局以包含多行？

2 个答案: