htmledit_views">
需求背景
项目开发过程中 有需要生成html" title=pdf>pdf的需求 这种需求内可能会存在使用表格去展示一些数据给用户 使其更明显直观的对比数据 这时候会存在一个项目或者仪器对应了多个单子 这就用到了table的td合并
样例展示
类似例子中html" title=pdf>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",},];