需求背景
项目开发过程中 有需要生成pdf的需求 这种需求内可能会存在使用表格去展示一些数据给用户 使其更明显直观的对比数据 这时候会存在一个项目或者仪器对应了多个单子 这就用到了table的td合并
样例展示
类似例子中pdf生成出来的图表 第一个项目有多个批号 这时候需要将项目的单元格td进行rowspan合并 但是因为这个对应的批号是动态的 类似第二个项目就只对应出来一条
实现过程
html
<table>
<thead>
<tr>
<th>测定</th>
<th colspan="6">绘制质控图的均值和标准差</th>
<th colspan="6">当月原始测定结果</th>
<th colspan="3">除失控后的测定结果</th>
<th colspan="5">累计测定结果</th>
<th colspan="2">质量目标</th>
</tr>
<tr>
<!-- 测定 -->
<th>项目</th>
<!-- 绘制质控图的均值和标准差 -->
<th>批号/效期</th>
<th>单位</th>
<th>水平</th>
<th>均值</th>
<th>SD</th>
<th>CV%</th>
<!-- 当月原始测定结果 -->
<th>均值</th>
<th>SD</th>
<th>CV%</th>
<th>N</th>
<th>失控数</th>
<th>在控率%</th>
<!-- 除失控后的测定结果 -->
<th>均值</th>
<th>SD</th>
<th>CV%</th>
<!-- 累计测定结果 -->
<th>均值</th>
<th>SD</th>
<th>CV%</th>
<th>N</th>
<th>%</th>
<!-- 质量目标 -->
<th>CV</th>
<th>SD</th>
</tr>
</thead>
<tbody>
<tr th:each="item : ${reportBody}">
<th:block th:if="${!#strings.isEmpty(item.customerReportItemName)}">
<td th:text="${item.customerReportItemName}" th:rowspan="${item.rowspan}"></td>
</th:block>
<td th:text="${item.qcBatchId}"></td>
<td th:text="${item.drawQcPictureUnit}"></td>
<td th:text="${item.drawQcPictureLevel}"></td>
<td th:text="${item.drawQcPictureAverageValue}"></td>
<td th:text="${item.drawQcPictureSdValue}"></td>
<td th:text="${item.drawQcPictureCvValue}"></td>
<td th:text="${item.currentMonthOriginAverageValue}"></td>
<td th:text="${item.currentMonthOriginSdValue}"></td>
<td th:text="${item.currentMonthOriginCvValue}"></td>
<td th:text="${item.currentMonthOriginCount}"></td>
<td th:text="${item.currentMonthOriginOutControlCount}"></td>
<td th:text="${item.currentMonthOriginInControlCountPercent}"></td>
<td th:text="${item.currentMonthWithOutControlAverageValue}"></td>
<td th:text="${item.currentMonthWithOutControlSdValue}"></td>
<td th:text="${item.currentMonthWithOutControlCvValue}"></td>
<td th:text="${item.currentYearAverageValue}"></td>
<td th:text="${item.currentYearSdValue}"></td>
<td th:text="${item.currentYearCvValue}"></td>
<td th:text="${item.currentYearCount}"></td>
<td th:text="${item.currentYearInControlPercent}"></td>
<td th:text="${item.targetCvValue}"></td>
<td th:text="${item.targetSdValue}"></td>
</tr>
</tbody>
</table>因为Thymeleaf内并不支持写js或者Java的逻辑 因为这部分是直接后端将数据对接到Thymeleaf 不经过前端 所以将逻辑放入后端去进行 在数据格式更改一个字段逻辑及加入一个字段去支持渲染（customerReportItemName、rowspan）
若项目内有多个批号 则在第一个批号对象内将customerReportItemName项目名称进行返回 rowspan是需要合并td的数量 若3个批号 这里则返回3 后面的批号内则不返回项目名称 这时候代码中if生效 会少进行生成一个td 若不进行判断的话单条行会多出一个空白td
html
//第一个项目的数据结构案例
[
{
customerReportItemCode: "zhikongtest",
customerReportItemId: "1856580801022141383",
customerReportItemName: "王质控-定量",
rowspan: "3",
currentMonthOriginAverageValue: "100.000",
currentMonthOriginCount: 1,
currentMonthOriginCvValue: "0.000",
currentMonthOriginInControlCountPercent: "0.0",
currentMonthOriginOutControlCount: 0,
currentMonthOriginSdValue: "0.000",
currentMonthWithOutControlAverageValue: "100.000",
currentMonthWithOutControlCvValue: "0.000",
currentMonthWithOutControlSdValue: "0.000",
currentYearAverageValue: "100.000",
currentYearCount: 1,
currentYearCvValue: "0.000",
currentYearSdValue: "0.000",
drawQcPictureAverageValue: "12.12",
drawQcPictureCvValue: "191.666",
drawQcPictureLevel: "H",
drawQcPictureSdValue: "23.23",
qcBatchId: "王质控-定量-001",
targetSdValue: "123.123",
},
{
customerReportItemCode: "zhikongtest",
customerReportItemId: "1856580801022141383",
customerReportItemName: "",
rowspan: "0",
currentMonthOriginAverageValue: "100.000",
currentMonthOriginCount: 1,
currentMonthOriginCvValue: "0.000",
currentMonthOriginInControlCountPercent: "0.0",
currentMonthOriginOutControlCount: 0,
currentMonthOriginSdValue: "0.000",
currentMonthWithOutControlAverageValue: "100.000",
currentMonthWithOutControlCvValue: "0.000",
currentMonthWithOutControlSdValue: "0.000",
currentYearAverageValue: "100.000",
currentYearCount: 1,
currentYearCvValue: "0.000",
currentYearSdValue: "0.000",
drawQcPictureAverageValue: "100.000",
drawQcPictureCvValue: "0.000",
drawQcPictureLevel: "H",
drawQcPictureSdValue: "0.000",
qcBatchId: "王质控-定量-003",
targetSdValue: "123.123",
},
{
customerReportItemCode: "zhikongtest",
customerReportItemId: "1856580801022141383",
customerReportItemName: "",
rowspan: "0",
currentMonthOriginAverageValue: "80.000",
currentMonthOriginCount: 1,
currentMonthOriginCvValue: "0.000",
currentMonthOriginInControlCountPercent: "0.0",
currentMonthOriginOutControlCount: 0,
currentMonthOriginSdValue: "0.000",
currentMonthWithOutControlAverageValue: "80.000",
currentMonthWithOutControlCvValue: "0.000",
currentMonthWithOutControlSdValue: "0.000",
currentYearAverageValue: "80.000",
currentYearCount: 1,
currentYearCvValue: "0.000",
currentYearSdValue: "0.000",
drawQcPictureAverageValue: "80.000",
drawQcPictureCvValue: "0.000",
drawQcPictureLevel: "M",
drawQcPictureSdValue: "0.000",
qcBatchId: "王质控-定量-003",
targetSdValue: "123.123",
},
{
customerReportItemCode: "zhikongtest",
customerReportItemId: "1856580801022141383",
customerReportItemName: "",
rowspan: "0",
currentMonthOriginAverageValue: "87.500",
currentMonthOriginCount: 2,
currentMonthOriginCvValue: "14.286",
currentMonthOriginInControlCountPercent: "0.0",
currentMonthOriginOutControlCount: 0,
currentMonthOriginSdValue: "12.500",
currentMonthWithOutControlAverageValue: "87.500",
currentMonthWithOutControlCvValue: "14.286",
currentMonthWithOutControlSdValue: "12.500",
currentYearAverageValue: "87.500",
currentYearCount: 2,
currentYearCvValue: "14.286",
currentYearSdValue: "12.500",
drawQcPictureAverageValue: "12.12",
drawQcPictureCvValue: "191.666",
drawQcPictureLevel: "L",
drawQcPictureSdValue: "23.23",
qcBatchId: "王质控-定量-001",
targetSdValue: "123.123",
},
{
customerReportItemCode: "zhikongtest",
customerReportItemId: "1856580801022141383",
customerReportItemName: "",
rowspan: "0",
currentMonthOriginAverageValue: "80.000",
currentMonthOriginCount: 1,
currentMonthOriginCvValue: "0.000",
currentMonthOriginInControlCountPercent: "0.0",
currentMonthOriginOutControlCount: 0,
currentMonthOriginSdValue: "0.000",
currentMonthWithOutControlAverageValue: "80.000",
currentMonthWithOutControlCvValue: "0.000",
currentMonthWithOutControlSdValue: "0.000",
currentYearAverageValue: "80.000",
currentYearCount: 1,
currentYearCvValue: "0.000",
currentYearSdValue: "0.000",
drawQcPictureAverageValue: "80.000",
drawQcPictureCvValue: "0.000",
drawQcPictureLevel: "M",
drawQcPictureSdValue: "0.000",
qcBatchId: "王质控-定量-002",
targetSdValue: "123.123",
},
];