我正在学习 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 类
@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";
}
}
最佳答案
你需要在 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 变量的用法来完成数组元素编号,这两个变量都包含计数和索引等值。
关于java - 在 thymeleaf 中使用 <ol> 和 <li> 元素呈现组合列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47980523/