Question

我需要按顺序显示男女名单。将名称发送到视图的数据结构是List<String>。

问题是结果如下（例如，以a开头的男孩名字）：

（有序列表从左到右显示）

Aaron  Abraham   Adam   
Alen   Alex      Alexander  
..

我需要将它们显示为（有序列表应从顶部显示到按钮然后转到第二列）

Aaron     Alen   ...
Abraham   Alex
Adam      Alexander
...

毋庸置疑，每个小组都有不同的名字。例如，与'b'组相比，组'a'可能有更多名称。

<c:forEach var="name" items="${names}">
    <div class="col-md-4">
        ${name}
   </div>
</c:forEach>

Answer 1

首先您需要修改用于显示数据的列数，有关解释我将其视为3

并且有n个男孩和女孩，逻辑用于第一列，我们将显示n/3条记录，下一行n/3和在下一栏剩余的记录

以下是用于3列显示的JSP代码：

<div class="col-md-4">
    <c:forEach begin="0" end="${fn:length(names)/3}" var="name" items="${names}" varStatus="loop">
        ${name}<br/>
    </c:forEach>
</div>
<div class="col-md-4">
    <c:forEach begin="${(fn:length(names)/3) + 1}" end="${(fn:length(staffs)/3)*2}" var="name" items="${names}" varStatus="loop">
        ${name}<br/>
    </c:forEach>
</div>
<div class="col-md-4">
    <c:forEach begin="${((fn:length(names)/3)*2)+1}" var="name" items="${names}" varStatus="loop">
        ${name}<br/>
    </c:forEach>
</div>

注意：这里我使用Core JSTL函数fn:length(names)来计算数组的长度，为了使用它你需要添加

 <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

位于页面顶部。 See this

名称的排序应该从服务器端本身完成，以获得所需的输出。此外，如果要显示4列或5列，只需按所需列号更改3的除法。它会起作用

Answer 2

第一种方法

您可以使用column-count css属性：https://css-tricks.com/almanac/properties/c/columns/

第二种方法

或者，您可能希望将col-md-4更改为col-md-6，使其分为两列： ``` $ {NAME} ```
计算您拥有的名称数量，然后在达到名称数量的一半时使用if else，然后切换到第二列
这很黑，但有效

JSP - 如何按特定顺序显示元素？

2 个答案: