如何使用 Thymeleaf 和 HTML 将数据显示到两列中？

Question

我一直在左右寻找，但仍然找不到好的解决方案。另外，我对编程还很陌生，所以请原谅我描述事情的方式:)。我正在使用 Spring、MySQL、Java、Thymeleaf。

基本上，我有一个从控制器传递过来的对象列表：

[人[code=1,name=A,car=ford1],人[id=2,name=A,car=ford2],人[id=1,name=B,car=toyota1] , 人 [id=2, name=B, car=toyota2] ]

我想在 HTML table 或 bootstrap 网格系统中使用 Thymeleaf 显示此数据。

这是我得到的：

<div>
    <table
      class="
        table table-bordered table-striped table-hover table-responsive-xl
      "
    >
      <thead class="thead-dark">
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Car</th>
           <th>Name</th>
          <th>Car</th>
        </tr>
      </thead>
      <tbody>
        <tr th:each="person :${listOfPerson}">
          <td>
            [[${person.id}]]
          </td>
          <td>
            [[${person.name}]]
          </td>
          <td>
            [[${person.car}]]
          </td>
        </tr>
      </tbody>
    </table>
  </div>

所以这样显示数据：

ID	Name	Car
1	A	ford1
2	A	ford2
1	B	toyota1
2	B	toyota2

但我希望它显示如下：

ID	Name	Car	Name	Car
1	A	ford1	B	toyota1
2	A	ford2	B	toyota2

我想我可能需要以某种方式将这些数据分成 id 1 和 id 2。这里有两种我可以想到的方法：

使用 Thymeleaf th:if="${person.id.equals(1)} 获取 id 1 的数据然后重复 2，我只是不知道如何将其放入table.
使用查询格式化数据，我不知道如何在不使用 GROUP_CONCAT.

也许我需要更改 SQL table，请给我一些建议。

编辑：所以我想我找到了这个 MySQL pivot

的答案

Answer 1

按 ID 对您的人员列表进行分组。假设您有一个这样的列表：

List<Person> persons = Arrays.asList(
    new Person(1, "A", "ford1"),
    new Person(2, "A", "ford2"),
    new Person(1, "B", "toyota1"),
    new Person(2, "B", "toyota2")
)

分组：

Map<Integer, List<Person>> groupedByIdPersons = persons.stream().collect(Collectors.groupingBy(Person::getId));

在 Thymeleaf 中使用它：

遍历 th:block 中的整个地图以创建 header。重复次数与按 ID 分组的 collections 一样多。
遍历整个地图以提取两者 key/value，然后仅遍历 th:block
中的值

<thead>
    <tr>
        <th:block th:each="elem : ${groupedByIdPersons}">
            <th>ID</th>
            <th>Name</th>
            <th>Car</th>
        </th:block>
    </tr>
</thead>
<tbody>
    <tr th:each="elem : ${groupedByIdPersons}">
        <th:block th:each="person : ${elem.value}">
            <td>${person.id}</td>
            <td>${person.name}</td>
            <td>${person.car}</td>
        </th:block>
    </tr>
</tbody>

如何使用 Thymeleaf 和 HTML 将数据显示到两列中？

How do I display data into two column with Thymeleaf and HTML?

html

java

mysql

spring

thymeleaf