4

我目前正在进行搜索，该搜索通过数据库并h:dataTable在我的 Web 应用程序中以 a 的形式提供结果。但是，它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 个复选框。

我该如何做到这一点？

4

2 回答 2

4

让所有表格单元格作为块元素向左浮动并清除每个子元素的浮动，其中是列数。为了使所有内容保持一致，请确保空白不换行，并且宽度完全考虑到盒子大小覆盖填充+边框。Xn+(X+1)X100%/X

换句话说，给定一个：

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

等等。

于 2017-08-24T21:07:49.243 回答
0

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

但是，答案是直接进入 Javascript 中的 DOM 并重新格式化表格。可以从 The中的 'onload'事件调用该函数<body>'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
}
于 2018-12-17T17:19:08.407 回答