多行多列表格

1.controller层

 @RequestMapping("list/data")
//    public String listData(@RequestParam(required = false) Long unitId, @RequestParam(required = false) Long areaId, @RequestParam(required = false) Long deviceId, ModelMap mmap) {
    public String listData(NyysJzjlDeviceTree nyysJzjlDeviceTree, ModelMap mmap) {

        //供水单位行
        List<NyysJzjlDeviceTree> unitList = nyysJzjlDeviceTreeService.selectNyysJzjlUnitList(nyysJzjlDeviceTree);

        //灌片行
        List<NyysJzjlDeviceTree> areaList = nyysJzjlDeviceTreeService.selectNyysJzjlAreaList(nyysJzjlDeviceTree);

        //水表行
        List<NyysJzjlDeviceTree> deviceList = nyysJzjlDeviceTreeService.selectNyysJzjlAreaDeviceList(nyysJzjlDeviceTree);

        mmap.put("devicelist", deviceList);
        //初始化数据
        for (NyysJzjlDeviceTree unit : unitList) {
            if (unit.getUnitName() == null) {
                unit.setUnitName("-");
            }
            if (unit.getAreaCount() == null) {
                unit.setAreaCount(0);
            }
            if (unit.getDeviceCount() == null) {
                unit.setDeviceCount(0);
            }
            if (unit.getItemCount() == null) {
                unit.setItemCount(0);
            }
            if (unit.getItemArea() == null) {
                unit.setItemArea(new BigDecimal(0.00));
            }
            if (unit.getBillCount() == null) {
                unit.setBillCount(0);
            }
            if (unit.getBillAmount() == null) {
                unit.setBillAmount(new BigDecimal(0.00));
            }
        }


        //初始化数据
        for (NyysJzjlDeviceTree area : areaList) {
            if (area.getAreaName() == null) {
                area.setAreaName("-");
            }
            if (area.getDeviceCount() == null) {
                area.setDeviceCount(0);
            }
            if (area.getItemCount() == null) {
                area.setItemCount(0);
            }
            if (area.getItemArea() == null) {
                area.setItemArea(new BigDecimal(0.00));
            }
            if (area.getBillCount() == null) {
                area.setBillCount(0);
            }
            if (area.getBillAmount() == null) {
                area.setBillAmount(new BigDecimal(0.00));
            }
        }

        //初始化数据
        for (NyysJzjlDeviceTree device : deviceList) {
            if (device.getDeviceDesc() == null) {
                device.setDeviceDesc("-");
            }
            if (device.getItemCount() == null) {
                device.setItemCount(0);
            }
            if (device.getItemArea() == null) {
                device.setItemArea(new BigDecimal(0.00));
            }
            if (device.getBillCount() == null) {
                device.setBillCount(0);
            }
            if (device.getBillAmount() == null) {
                device.setBillAmount(new BigDecimal(0.00));
            }
        }


//        Map<Object, Object> areamap = new HashMap<>();
        // key 为unitId，value 为单位下的灌片
        Map<Long, List<NyysJzjlDeviceTree>> areamap = new HashMap<>();
//        Map<Object, Object> devicemap = new HashMap<>();
        // key 为areaId，value 为灌片下的水表
        Map<Long, List<NyysJzjlDeviceTree>> devicemap = new HashMap<>();
        //遍历供水单位获取unitId
//        for (NyysJzjlDeviceTree unit : unitList) {
//             Long unitId = unit.getUnitId();
//        }
        for (NyysJzjlDeviceTree area : areaList) {
            //如果供水单位Id与灌片供水单位Id相同，以供水单位Id作为key得到对应灌片数据
            if(!areamap.containsKey(area.getUnitId())){
                areamap.put(area.getUnitId(), new ArrayList<>());
            }
            areamap.get(area.getUnitId()).add(area);
        }
        for (NyysJzjlDeviceTree device : deviceList) {
            //如果水表的areaId与灌片的areaId相同,以灌片的areaId作为key 得到水表数据
            if(!devicemap.containsKey(device.getAreaId())){
                devicemap.put(device.getAreaId(), new ArrayList<>());
            }
            devicemap.get(device.getAreaId()).add(device);
        }

        // 计算跨行的数量
        for (NyysJzjlDeviceTree unit : unitList) {
            List<NyysJzjlDeviceTree> aList = areamap.get(unit.getUnitId());
            int areaCount = 0;
            int deviceCount = 0;
            if(aList==null){
                areaCount=0;
            }else {
               areaCount+=aList.size();
            for (NyysJzjlDeviceTree area : aList){
                    List dList = devicemap.get(area.getAreaId());
                    deviceCount += dList == null ? 0 : dList.size();
            }
            }
            unit.setRowCount(1+areaCount+deviceCount);
        }

        mmap.put("unitList", unitList);
        mmap.put("areamap", areamap);
        mmap.put("devicemap", devicemap);
//        logger.info(String.valueOf(mmap));
        return prefix + "/list_data";
    }

2.html层

<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;
      }
    }

    table td {
      max-width: 200px;
      max-height: 50px;
      word-wrap: break-word;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      page: true;
    }

    table td:hover {
      white-space: normal;
      overflow: auto;
    }


  </style>
  <table id="reportHead" class="excelTableHead" style="width: 100%" th:with="maxcols=41">
    <tr>
      <td th:colspan="7" align="center" style="font-size: 26px; font-weight: 700; padding-bottom: 6px">
        水表树账单统计表
      </td>
    </tr>

  </table>
  <table id="report" class="table excelTable" billstandardborder="1" cellspacing="0" cellpadding="0"
         style="width: 100%">
    <tr>
      <td style="font-weight: 700;white-space: nowrap;" align="center">供水管理单位</td>
      <td style="font-weight: 700;white-space: nowrap;" align="center">灌片</td>
      <td style="font-weight: 700;white-space: nowrap;" align="center">水表</td>
      <td style="font-weight: 700;white-space: nowrap;" align="center">地块</td>
      <td style="font-weight: 700;white-space: nowrap;" align="center">地块面积</td>
      <td style="font-weight: 700;white-space: nowrap;" align="center">账单</td>
      <td style="font-weight: 700;white-space: nowrap;" align="center">账单累计</td>
    </tr>

    <th:block th:each="unit:${unitList}" th:with="areaList=${areamap.get(unit.unitId)}">
      <tr>
        <td align="center" th:rowspan="${unit.rowCount}">
          [[${unit.unitName}]]
        </td>
        <td align="center">[[${unit.areaCount}]]个</td>
        <td align="center">[[${unit.deviceCount}]]个</td>
        <td align="center">[[${unit.itemCount}]]块</td>
        <td align="center">[[${unit.itemArea}]](㎡)</td>
        <td align="center">[[${unit.billCount}]]份</td>
        <td align="center">[[${unit.billAmount}]]元</td>
      </tr>

      <th:block th:each="area:${areaList}" th:with="deviceList=${devicemap.get(area.areaId)}" >
        <tr >
          <td align="center" th:rowspan="${deviceList==null?1:deviceList.size()+1}">
            [[${area.areaName}]]
          </td>
          <td align="center">[[${area.deviceCount}]]个</td>
          <td align="center">[[${area.itemCount}]]块</td>
          <td align="center">[[${area.itemArea}]](㎡)</td>
          <td align="center">[[${area.billCount}]]份</td>
          <td align="center">[[${area.billAmount}]]元</td>
        </tr>

        <tr th:if="${deviceList!=null}" th:each="device:${deviceList}" >
          <td align="center">[[${device.deviceDesc}]]</td>
          <td align="center">[[${device.itemCount}]]块</td>
          <td align="center">[[${device.itemArea}]](㎡)</td>
          <td align="center">[[${device.billCount}]]份</td>
          <td align="center">[[${device.billAmount}]]元</td>
        </tr>
      </th:block>

    </th:block>
  </table>

</div>