Primefaces selectManyCheckbox布局从上到下分列

Question

任务：有一个面板，带有 5 列的 selectMany 复选框。选择框的值按升序排列，但它们在列中从左到右显示，而不是从上到下显示。

使用：Primefaces 代码：

<p:selectManyCheckbox id="chkbx" value=.. layout="grid" columns="5">
<p:selectItems value=.. itemValue=".." itemLabel=".."/>
</p:selectManyCheckbox>

当前屏幕：

[] a    [] b    [] c  

[] d    [] e    [] f

[] g    [] h    [] i

预计：

[] a    [] d    [] g  

[] b    [] e    [] h

[] c    [] f    [] i

Answer 1

幸运的是我们有 CSS 来救援。展示有一个网格布局示例

如果您查看生成 html，您会看到类似

的内容

<table id="j_idt701:grid" role="presentation" class="ui-selectmanycheckbox ui-widget">
    <tbody>
        <tr>
            <td>
                <div class="ui-chkbox ui-widget">
                    <div class="ui-helper-hidden-accessible">
                        <input id="j_idt701:grid:0" name="j_idt701:grid" type="checkbox" value="Miami" data-p-hl="manychkbox" data-p-grouped="true">
                    </div>
                    <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
                        <span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c" />
                    </div>
                </div>
                <label for="j_idt701:grid:0">Miami</label>
            </td>
            <td>
                <div class="ui-chkbox ui-widget">
                    <div class="ui-helper-hidden-accessible">
                        <input id="j_idt701:grid:1" name="j_idt701:grid" type="checkbox" value="London" data-p-hl="manychkbox" data-p-grouped="true">
                    </div>
                    <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
                        <span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"/>
                    </div>
                </div>
                <label for="j_idt701:grid:1">London</label>
            </td>
            <td>
                <div class="ui-chkbox ui-widget">
                    <div class="ui-helper-hidden-accessible">
                        <input id="j_idt701:grid:2" name="j_idt701:grid" type="checkbox" value="Paris" data-p-hl="manychkbox" data-p-grouped="true">
                    </div>
                    <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
                        <span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"/>
                    </div>
                </div>
                <label for="j_idt701:grid:2">Paris</label>
            </td>
        </tr>
        <tr>...</tr>
        <tr>...</tr>
    </tbody>
</table>

是的，这里使用了 table，但人们经常忘记您可以使用 CSS 覆盖现有元素的 CSS，因此您可以使 table 、tbody、tr 和 td 显示为 'flex' 而不是默认显示值。只需使用下面的 CSS 即可。

table.ui-selectmanycheckbox, table.ui-selectmanycheckbox tbody ,table.ui-selectmanycheckbox tr, table.ui-selectmanycheckbox td{
    display: flex;
}

现在的技巧是使用 css flex-direction 并将 row 分配给 tbody 并将 column 分配给 tr像这样

table.ui-selectmanycheckbox tbody{
    flex-direction: row;
}

table.ui-selectmanycheckbox tr{
    flex-direction: column;
}

结果如下：

如果您只想将它应用于一个 select，请向组件添加一个明确的 class 并在 selectors.

中使用它

Primefaces selectManyCheckbox布局从上到下分列

Primefaces selectManyCheckbox layout from top to bottom in columns

layout

jsf

orientation

primefaces

selectmanycheckbox