在 thymeleaf 中使用 <ol> 和 <li> 元素渲染组合列表

Question

我正在学习Themeleaf，并尝试制作一些简单的座位预订服务应用程序。在这里，我有一个用于预订飞机座位的模板，我希望使用 Thymeleaf th:each 表达式动态创建具有相同结构的此页面。有可能这样做吗？

<form action="#" th:action="@{/bookseats}" th:object="${seatsDTO}" method="post">
  <div class="plane">
    <div class="cockpit">
      <h1>Please select a seat</h1>
    </div>
    <div class="exit exit--front fuselage"></div>
    <ol class="cabin fuselage">
      <li class="row row--1">
        <ol class="seats" type="A">
          <li class="seat">
            <input type="checkbox" id="1A" th:checked="${seatsDTO.checkedSeats[0].reserved}" />
            <label for="1A"></label>
          </li>
          <li class="seat">
            <input type="checkbox" id="1B" />
            <label for="1B"></label>
          </li>
          <li class="seat">
            <input type="checkbox" id="1C" />
            <label for="1C"></label>
          </li>
          <li class="seat">
            <input type="checkbox" id="1D" />
            <label for="1D"></label>
          </li>
          <li class="seat">
            <input type="checkbox" id="1E" />
            <label for="1E"></label>
          </li>
          <li class="seat">
            <input type="checkbox" id="1F" />
            <label for="1F"></label>
          </li>
        </ol>
      </li>
      <li class="row row--2">
        <ol class="seats" type="A">
          <li class="seat">
            <input type="checkbox" id="2A" />
            <label for="2A"></label>
          </li>
          <li class="seat">
            <input type="checkbox" id="2B" />
            <label for="2B"></label>
          </li>
          <li class="seat">
            <input type="checkbox" id="2C" />
            <label for="2C">s[8].id}"></label>
          </li>
          <li class="seat">
            <input type="checkbox" id="2D" />
            <label for="2D"></label>
          </li>
          <li class="seat">
            <input type="checkbox" id="2E" />
            <label for="2E"></label>
          </li>
          <li class="seat">
            <input type="checkbox" id="2F" />
            <label for="2F"></label>
          </li>
        </ol>
      </li>
    </ol>
    <div class="exit exit--back fuselage"></div>
  </div>
  <input type="submit" />
</form>

我尝试在“ol”部分添加 th:each，但这对我不起作用。

更新 1

我正在使用 Spring Boot，这些是我的控制器类

@Controller
public class SeatController {

    private final SeatService seatService;
    private final OrderService orderService;

    @Autowired
    public SeatController(SeatService seatService, OrderService orderService) {
        this.seatService = seatService;
        this.orderService = orderService;
    }

    @RequestMapping(value = "/tickets", method = RequestMethod.GET)
    public String getAllSeats(Model model) {
        List<Seat> seats = seatService.getAllSeats();
        model.addAttribute("seatsDTO", new SeatsDTO());
        model.addAttribute("seats", seats);
        return "booking";
    }

    @RequestMapping(value = "/reset", method = RequestMethod.POST)
    public String resetReservation(Model model) {
        List<Seat> seats = seatService.getAllSeats();
        model.addAttribute("seats", seats);
        seats.stream()
                .filter(Seat::isReserved)
                .forEach(seat -> {
                    seat.setReserved(false);
                    seat.setOrder(null);
                });
        seatService.updateSeats(seats);
        orderService.deleteAllOrders();
        return "redirect:tickets";
    }
}

@Controller
public class OrderController {

    private final SeatService seatService;
    private final OrderService orderService;

    @Autowired
    public OrderController(SeatService seatService, OrderService orderService) {
        this.seatService = seatService;
        this.orderService = orderService;
    }

    @RequestMapping(value = "/tickets", method = RequestMethod.POST)
    public String updateSeats(@ModelAttribute("seatsDTO") SeatsDTO seatsDTO, Model model) {
        model.addAttribute("seatsDTO", seatsDTO);
        Order order = new Order();
        List<Seat> seats = seatsDTO.getCheckedSeats();
        Integer sum = seats.stream().mapToInt(Seat::getPrice).sum();
        seats.forEach(seat -> seat.setOrder(order));
        seats.forEach(seat -> seat.setReserved(true));
        order.setEmail(seatsDTO.getEmail());
        order.setName(seatsDTO.getName());
        order.setTotal(sum);
        order.setSeatsList(seats);
        orderService.makeOrder(order);
        System.out.println(seats);
        return "redirect:tickets";
    }
}

Answer 1

您需要在 li 上使用循环而不是 ol。我为每个循环使用了 2 个，如下所示。

java 中的虚拟上下文

    Context ctx = new Context();
    List<String> rowList = new ArrayList<>();
    rowList.add("row--1");
    rowList.add("row--2");
    rowList.add("row--3");
    List<String> seatList = new ArrayList<>();
    seatList.add("A");
    seatList.add("B");
    seatList.add("C");
    seatList.add("D");
    seatList.add("E");
    seatList.add("F");
    ctx.setVariable("rows", rowList);
    ctx.setVariable("seats", seatList);

html 模板

<ol >
    <li th:each="row,iterRow : ${rows}" th:class="'row ' +  ${row}"> <!-- iteration over rows -->
        <ol class="seats">
            <li class="seat" th:each="seat,iterSeat : ${seats}">  <!-- iteration over seats for each row -->
                <input type="checkbox" th:id="${iterRow.count} + ${seat}">
                <label th:for="${iterRow.count} + ${seat}"></label>
            </li>
        </ol>
    </li>
</ol>

输出

<ol>
    <li class="row row--1">
        <ol class="seats">
            <li class="seat">
                <input type="checkbox" id="1A">
                <label for="1A"></label>
            </li>
            <li class="seat">
                <input type="checkbox" id="1B">
                <label for="1B"></label>
            </li>
            <li class="seat">
                <input type="checkbox" id="1C">
                <label for="1C"></label>
            </li>
        </ol>
    </li>
    <li class="row row--2">
        <ol class="seats">
            <li class="seat">
                <input type="checkbox" id="2A">
                <label for="2A"></label>
            </li>
            <li class="seat">
                <input type="checkbox" id="2B">
                <label for="2B"></label>
            </li>
            <li class="seat">
                <input type="checkbox" id="2C">
                <label for="2C"></label>
            </li>
        </ol>
    </li>
</ol>

为了简洁起见，我删除了一些重复。

希望这能解决您动态生成页面的问题。

注意：你会注意到我没有为标签添加文本（即 s[6].id}），它可以使用 th:text 和使用 iterSeat 和 iterRow 变量作为数组元素编号来完成，这两个变量都保存像计数和索引这样的值。