如何将 h:selectManyCheckbox 的布局更改为多行？答案

【问题标题】：How can I change the layout of h:selectManyCheckbox to have multiple rows?如何将 h:selectManyCheckbox 的布局更改为多行？
【发布时间】：2017-04-04 22:09:37
【问题描述】：

我目前正在进行搜索，该搜索通过数据库并在我的网络应用程序中以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 个复选框。

我如何做到这一点？

【问题讨论】：

绝对有必要使用复选框吗？你可以使用<h:selectManyListbox style="height: 300px; overflow-y: auto;" >... 来避免所有的混乱。
selectManyCheckbox 的问题在于 UIComponent 在table 网格内创建了复选框，因此即使您要通过 via css 甚至引导程序的限制，我也会所有都被我尝试过的组件类覆盖。因此，也许您可以创建自己的 Custom UIComponent 来在 LIST 网格中创建复选框？这会更容易设计。
在实现“代码”selectManyCheckbox 之前，我确实有一个“代码”selectManyListbox。这样做的问题是，如果您有超过 30 种可能的选择，它既不好看也不好用。如果我找不到其他任何东西，我想我将不得不考虑创建一个自己的自定义组件。
查看规范（或 IDE 中的代码完成）：docs.oracle.com/javaee/7/javaserver-faces-2-2/vdldocs-jsp/h/… 一些关于布局属性的内容
令人遗憾的是，layout 属性没有提供任何选项，除了将它们全部放在一行（水平）或一个 collum（垂直）。

标签： css jsf layout selectmanycheckbox

【解决方案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;
}

等等。

【讨论】：

【解决方案2】：

上述解决方案确实是我所需要的——除了我在“兼容性”环境中工作（公司政策）。它在 MS Edge/IE11 中运行良好，但在 IE 11 兼容模式下无法运行。

但是，解决方法是直接进入 Javascript 中的 DOM 并重新格式化表格。可以从<body> 中的'onload' 事件调用该函数 'form:identifier' 是 'id=...' 在 <h:selectManyCheckBox id="MyManyCheckBox"

function reformatSelectManyCheckbox() {
    var tabl=document.getElementById("form:MyManyCheckBox");
    var tr=tabl.rows;    // find the TR row
    var cells=tr[0].cells;  // all the cells (TD) on this row
    var g;
    var sz=cells.length;
    var r=0;               // index for the new rows
    var celln=0;           // index for the new cells, per row
    var row=null;
    for (g=0; g< sz; g++) {
            // I want 4 cells per row
        if(g % 4 == 0) { row=tabl.insertRow(r); r++; celln=0;}
        var cell = row.insertCell(celln);
        cell.innerHTML=cells[g].innerHTML;
        celln++;
    }
    tabl.deleteRow(r); // delete the original one line row
}

【讨论】：