您的位置:首页 > 其它

thymeleaf遍历时合并单元格

2019-06-11 20:47 2506 查看

在开发中会遇到一个订单下有多个商品,但是他们的订单号一样,这时就需要在遍历时把订单号单元格合并起来.

没合并之前:

没合并之前代码:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>thymeleaf单元格合并</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>订单号</th>
<th>商品名称</th>
<th>商品价格</th>
</tr>
</thead>
<tr th:each="order:${orderList}">
<td><span th:text="${order.oId}">订单号</span></td>
<td><span th:text="${order.shopNmae}">商品名称</span></td>
<td><span th:text="${order.shopMoney}">商品价格</span></td>
</tr>
</table>
</body>
</html>

合并之后:

合并之后代码:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>thymeleaf单元格合并</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>订单号</th>
<th>商品名称</th>
<th>商品价格</th>
</tr>
</thead>
<!--
状态变量定义在一个th:每个属性和包含以下数据:

  1.当前迭代索引,从0开始。这是索引属性。index

  2.当前迭代索引,从1开始。这是统计属性。count

  3.元素的总量迭代变量。这是大小属性。 size 

合并单元格使用rowspan

-->
<tr th:each="order,star:${orderList}">
<!-- 遍历第一次的时候输入订单号 -->
<span th:if="${star.index} == 0">
<td th:rowspan="${star.size}"><span th:text="${order.oId}">订单号</span></td>
<td><span th:text="${order.shopNmae}">商品名称</span></td>
<td><span th:text="${order.shopMoney}">商品价格</span></td>
</span>
<!-- 第一次之后就不需要了 -->
<span th:if="${star.index} != 0">
<td><span th:text="${order.shopNmae}">商品名称</span></td>
<td><span th:text="${order.shopMoney}">商品价格</span></td>
</span>
</tr>
</table>
</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: