thymeleaf遍历时合并单元格

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

没合并之前:
thymeleaf遍历时合并单元格_第1张图片
没合并之前代码:

<!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>

合并之后:
thymeleaf遍历时合并单元格_第2张图片
合并之后代码:

<!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>

你可能感兴趣的:(其他分享)