thymleaf 一行中存在多行 大小行通过索引操作

<div id="table" class="wrapper wrapper-content animated fadeInRight" xmlns:th="http://www.thymeleaf.org">
  <meta charset="UTF-8">
  <style type="text/css">
    /* TABLES */
    .excelTableHead{
      color: black;
      margin-bottom: 6px;
    }
    .excelTable {
      width: auto;
      font-size: 13px;
      color: black;
      border: 1px solid #333333;
    }

    .excelTable>thead>tr>th, .excelTable>thead>tr>td {
      background-color: #333333;
      border-bottom-width: 1px;
    }

    .excelTable>thead>tr>th, .excelTable>tbody>tr>th,  .excelTable>tfoot>tr>th, .excelTable>thead>tr>td,  .excelTable>tbody>tr>td, .excelTable>tfoot>tr>td {
      border: 1px solid #333333;
    }

    .excelTableFoot{
      color: black;
    }
    @media print {
      #alert_danger{
        display: none;
      }
    }
    td {
      white-space: nowrap;
    }

    .slash {
      width: 100px;
      height: 50px;
      background-color: #000000;
      position: relative;
      padding: 0 !important;
    }

    .slash::before {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      background-color: #ffffff;
      clip-path: polygon(0px 0.5px, 0px 100%, calc(100% - 0.5px) calc(100% + 0.5px));
      position: absolute;
      top: 0;
    }

    .slash::after {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      background-color: #ffffff;
      clip-path: polygon(100% calc(100% - 0.5px), 100% 0px, 0px -0.5px);
      position: absolute;
      top: 0;
    }
  </style>
  <table id="reportHead" class="excelTableHead" style="width: 100%">
    <tr>
      <td th:colspan="8" align="center" style="font-size: 26px; font-weight: 700; padding-bottom: 6px">测试表</td>
    </tr>
    <tr>
      <td colspan="4">隶属单位(盖章):测试</td>
    </tr>
  </table>
  <table id="report" class="table excelTable" billstandardborder="1" cellspacing="0" cellpadding="0" style="width: 100%">
    <tr>
      <td style="font-weight: 700;" align="center" rowspan="2">序号</td>
      <td style="font-weight: 700;" align="center" rowspan="2">隶属</td>
      <td style="font-weight: 700;" align="center" rowspan="2">供水单位</td>
      <td style="font-weight: 700;" align="center" rowspan="2">水表编号</td>
      <td style="font-weight: 700;" align="center" rowspan="2">用户姓名</td>
      <td style="font-weight: 700;" align="center" rowspan="2">用户电话</td>
      <td style="font-weight: 700;" align="center" rowspan="2">年份</td>

      <td style="font-weight: 700;" align="center" colspan="4">年度用水计划指标</td>

      <td style="font-weight: 700;" align="center" rowspan="2">实际用水量(m3)</td>
      <td style="font-weight: 700;" align="center" rowspan="2">年度用水计划指标使用率</td>

    </tr>
    <tr>
      <td style="font-weight: 700;" align="center" >种植结构</td>
      <td style="font-weight: 700;" align="center" >种植面积(亩)</td>
      <td style="font-weight: 700;" align="center" >定额(m3/亩)</td>
      <td style="font-weight: 700;" align="center" >合计(m3)</td>
    </tr>

    <th:block th:each="item:${res}">
      <tr th:if="${item.number} == 1" >
        <td  align="center" th:text="${itemStat.count}"></td>
        <td align="center">a</td>
        <td align="center">b</td>
        <td align="center">c</td>
        <td align="center">d</td>
        <td align="center">e</td>
        <td align="center">[[${item.bill_year}]]</td>

        <th:block th:each="itemr:${item.records}">
          <td align="center">f</td>
          <td align="center">[[${itemr.get('item_num')}]]</td>
          <td align="center">[[${itemr.get('item_quota')}]]</td>
          <td align="center">[[${itemr.get('num')}]]</td>
        </th:block>

        <td align="right">[[${item.use_amount}]]</td>
        <td align="right">[[${item.use_rate}]]%</td>

      </tr>

      <th:block th:if="${item.number} != 1">
        <tr  >
          <td  align="center" th:text="${itemStat.count}" th:rowspan="${item.number+1}"></td>
          <td align="center" th:rowspan="${item.number+1}">a</td>
          <td align="center" th:rowspan="${item.number+1}">b</td>
          <td align="center" th:rowspan="${item.number+1}">c</td>
          <td align="center" th:rowspan="${item.number+1}">d</td>
          <td align="center" th:rowspan="${item.number+1}">e</td>
          <td align="center" th:rowspan="${item.number+1}">[[${item.bill_year}]]</td>

          <th:block th:each="itemr:${item.records}">
            <th:block th:if="${itemrStat.index==0}">
              <td align="center" >f</td>
              <td align="center">[[${itemr.get('item_num')}]]</td>
              <td align="center">[[${itemr.get('item_quota')}]]</td>
              <td align="center">[[${itemr.get('num')}]]</td>
            </th:block>
          </th:block>

          <td align="right" th:rowspan="${item.number+1}">[[${item.use_amount}]]</td>
          <td align="right" th:rowspan="${item.number+1}">[[${item.use_rate}]]%</td>
        </tr>
        <th:block th:each="itemr:${item.records}">
          <tr  th:if="${itemrStat.index>0}">
            <td align="center" >f</td>
            <td align="center">[[${itemr.get('item_num')}]]</td>
            <td align="center">[[${itemr.get('item_quota')}]]</td>
            <td align="center">[[${itemr.get('num')}]]</td>
          </tr>
        </th:block>
        <tr >
          <td align="center" style="font-weight: bold;">小计</td>
          <td align="center" style="font-weight: bold">[[${item.itemNumSum}]]</td>
          <td class="slash"></td>
          <td align="center" style="font-weight: bold">[[${item.quotaSum}]]</td>
        </tr>

      </th:block>

    </th:block>

  </table>
  <br/>
</div>


效果图

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值