thymeleaf遍历时合并单元格

最新推荐文章于 2023-12-07 11:01:43 发布

小飞技术

最新推荐文章于 2023-12-07 11:01:43 发布

阅读量4.1k

点赞数 3

分类专栏：其他分享文章标签： tymeleaf遍历 tymeleaf单元格合并单元格合并

本文链接：https://blog.csdn.net/xiaofeivip_top/article/details/91465810

版权

其他分享专栏收录该内容

70 篇文章 0 订阅

订阅专栏

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

没合并之前：
在这里插入图片描述
没合并之前代码:

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