thymeleaf制作统计表及导出统计表

已于 2022-05-19 10:04:14 修改
阅读量836 收藏 1
点赞数
文章标签： html javascript 前端
于 2022-05-18 15:20:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenqinghu98/article/details/124842998
版权

thymeleaf制作表格的模板

1.后台

/**
 * @author cqh
 * @create 2022/5/18 15:42
 */
@Controller
@RequestMapping("/system/demo")//前台包地址前缀
public class demo extends BaseController {

    private String prefix = "/system/demo";

    @Autowired
    ISysDeptService sysDeptService;

    @GetMapping("list")
    public String list(ModelMap mmap) {
        mmap.put("user", getSysUser());
        mmap.put("dept", sysDeptService.getCachedDeptById(getSysUser().getDeptId()));
        mmap.put("year", DateUtils.dateTimeNow("yyyy"));
        return prefix + "/list";
    }

    @RequestMapping("list/data")
    public String listData(ModelMap mmap) {
        String sql="SELECT * FROM `table`";
        List<Record> records = Db.find(sql);
        mmap.put("records",records);
        return prefix + "/list_data";
    }
}

2.导出功能list.html

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <th:block th:include="include :: header('项目名称')" />
</head>
<body class="gray-bg">
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li>
                                <a class="btn btn-info btn-rounded btn-sm" onclick="toExcel()"><i class="fa fa-download"></i>&nbsp;导出</a>
                                <a id="dlink"  style="display:none;"></a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
            <div class="btn-group-sm" id="toolbar" role="group"></div>
            <div class="col-sm-12 select-table" style="overflow-x: scroll"></div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <script type="text/javascript" th:inline="javascript">

        function reset(){
            $.modal.loading("正在查询，请稍后...");
            var url = ctx + "/system/demo/list/data";
            $(".select-table").load(url, function (responseTxt,statusTxt,xhr) {
                if (statusTxt === 'success') {
                    $.modal.closeLoading();
                }
            });
        }

        function load(){
            $.modal.loading("正在查询，请稍后...");
            var url = ctx + "/system/demo/list/data";
            $(".select-table").load(url, function (responseTxt,statusTxt,xhr) {
                if (statusTxt === 'success') {
                    $.modal.closeLoading();
                }
            });
        }



        function toExcel(){
            $.widget.tableToExcel('report','reportHead','reportFoot',
                $("#reportYear").text()+"年",
                "Excel表名");
        }

        $(function(){
            reset();
        })
    </script>
</body>
</html>

3.表格模板list_data.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="${maxcols}" align="center" style="font-size: 26px; font-weight: 700; padding-bottom: 6px">
        统计表表名
      </td>
    </tr>
    <tr>
      <td colspan="6">地址：[[${dept.deptName}]]</td>
      <td th:colspan="${maxcols-7}" align="right">时间：[[${today}]]</td>
      <td align="right">单位：</td>
    </tr>
  </table>
  <table id="report" class="table excelTable" billstandardborder="1" cellspacing="0" cellpadding="0"
         style="width: 100%">
    <tr>
      <td style="font-weight: 700;"rowspan="2" align="right">序号</td>

      <td style="font-weight: 700;white-space: nowrap" rowspan="2" colspan="2" align="center">1</td>
      <td style="font-weight: 700;white-space: nowrap;" rowspan="2" colspan="2" align="center">2</td>
      <td style="font-weight: 700;white-space: nowrap;" rowspan="2" colspan="2" align="center">3</td>
      <td style="font-weight: 700;white-space: nowrap;" rowspan="2" colspan="2" align="center">4</td>
      <td style="font-weight: 700;white-space: nowrap;" rowspan="2" colspan="2" align="center">5</td>
      <td style="font-weight: 700;white-space: nowrap;" rowspan="2" colspan="2" align="center">6</td>
      <td style="font-weight: 700;white-space: nowrap;" rowspan="2" colspan="2" align="center">7</td>
      <td style="font-weight: 700;white-space: nowrap;" colspan="4" align="center">8</td>
      <td style="font-weight: 700;white-space: nowrap;" colspan="8" align="center">9</td>
      <td style="font-weight: 700;white-space: nowrap;" colspan="10" align="center">10</td>
      <td style="font-weight: 700;white-space: nowrap;" rowspan="2" colspan="2" align="center">11</td>
      <td style="font-weight: 700;white-space: nowrap;" rowspan="2" colspan="2" align="center">12</td>

    </tr>
    <tr>
      <td style="font-weight: 700;white-space: nowrap;" align="center">13</td>
      <td style="font-weight: 700;white-space: nowrap;" align="center">14</td>
      <td style="font-weight: 700;white-space: nowrap;" align="center">15</td>
      <td style="font-weight: 700;white-space: nowrap;" align="center">16</td>


      <td style="font-weight: 700;white-space: nowrap;" align="center">17</td>
      <td style="font-weight: 700;white-space: nowrap;" align="center">18</td>
      <td style="font-weight: 700;white-space: nowrap;" align="center">19</td>
      <td style="font-weight: 700;white-space: nowrap;" align="center">20</td>
      <td style="font-weight: 700;white-space: nowrap;" align="center">21</td>
      <td style="font-weight: 700;white-space: nowrap;" align="center">22</td>
      <td style="font-weight: 700;white-space: nowrap;" align="center">23</td>
      <td style="font-weight: 700;white-space: nowrap;" align="center">24</td>


      <td style="font-weight: 700;white-space: nowrap;" align="center">25</td>
      <td style="font-weight: 700;white-space: nowrap;" align="center">26</td>
      <td style="font-weight: 700;white-space: nowrap;" align="center">27</td>
      <td style="font-weight: 700;white-space: nowrap;" align="center">28</td>
      <td style="font-weight: 700;white-space: nowrap;" align="center">29</td>
      <td style="font-weight: 700;white-space: nowrap;" align="center">30</td>
      <td style="font-weight: 700;white-space: nowrap;" align="center">31</td>
      <td style="font-weight: 700;white-space: nowrap;" align="center">32</td>
      <td style="font-weight: 700;"align="center">33</td>
      <td style="font-weight: 700;white-space: nowrap;" align="center">34</td>

    </tr>

    <tr th:each="item:${list}" >
      <td th:text="${itemStat.count}" ></td>
      <td align="center" colspan="2" >[[${item.get('1')}]]</td>
      <td align="center" colspan="2" >[[${item.get('2')}]]</td>
      <td  colspan="2"  >[[${item.get('3')}]]</td>
      <td colspan="2" >[[${item.get('4')}]]</td>
      <td  colspan="2">[[${item.get('5')}]]</td>
      <td  colspan="2">[[${#numbers.formatDecimal(item.get('6'),1,'COMMA',0,'POINT')}]]</td>
      <td  colspan="2">[[${#numbers.formatDecimal(item.get('7'),1,'COMMA',0,'POINT')}]]</td>
      <td >[[${item.get('13')}]]</td>
      <td > [[${item.get('14')}]]</td>
      <td >[[${item.get('15')}]]</td>
      <td >
        [[${#numbers.formatDecimal(item.get('16'),1,'COMMA',0,'POINT')}]]
      </td>

      <td >[[${item.get('17')}]]</td>
      <td >[[${item.get('18')}]]</td>
      <td >[[${item.get('19')}]]</td>
      <td >[[${item.get('20')}]]</td>
      <td >[[${item.get('21')}]]</td>
      <td >[[${item.get('22')}]]</td>
      <td >[[${item.get('23')}]]</td>
      <td >[[${item.get('24')}]]</td>
      <td >[[${item.get('25')}]]</td>
      <td >[[${item.get('26')}]]</td>
      <td >[[${item.get('27')}]]</td>
      <td >[[${item.get('28')}]]</td>
      <td >[[${item.get('29')}]]</td>
      <td >[[${item.get('30')}]]</td>
      <td >[[${item.get('31')}]]</td>
      <td >[[${item.get('32')}]]</td>
      <td  >[[${item.get('33')}]]</td>
      <td >[[${item.get('34')}]]</td>
      <td  colspan="2">[[${item.get('11')}]]</td>
      <td  colspan="2">[[${item.get('12')}]]</td>

    </tr>
    <tr th:each="item:${Sumlist}">
      <td style="font-weight: 700;white-space: nowrap;"  align="right">合计</td>

      <td align="right" colspan="2"></td>
      <td align="right" colspan="2"></td>

      <td align="right" colspan="2"></td>
      <td align="right" colspan="2"></td>
      <td align="right" colspan="2"></td>
      <td align="right" colspan="2">[[${#numbers.formatDecimal(item.get('Sum6'),1,'COMMA',0,'POINT')}]]</td>
      <td align="right" colspan="2">[[${#numbers.formatDecimal(item.get('Sum7'),1,'COMMA',0,'POINT')}]]</td>
      <td align="right"></td>
      <td align="right"></td>
      <td align="right"></td>
      <td align="right">[[${#numbers.formatDecimal(item.get('Sum16'),1,'COMMA',0,'POINT')}]]</td>
      <td align="right"></td>
      <td align="right"></td>
      <td align="right"></td>
      <td align="right"></td>
      <td align="right"></td>
      <td align="right"></td>
      <td align="right"></td>
      <td align="right"></td>

      <td align="right"></td>
      <td align="right"></td>
      <td align="right"></td>
      <td align="right"></td>
      <td align="right"></td>
      <td align="right"></td>
      <td align="right"></td>
      <td align="right"></td>
      <td align="right"></td>
      <td align="right"></td>
      <td align="right" colspan="2"></td>
      <td align="right" colspan="2"></td>

    </tr>

  </table>
  <table id="reportFoot" class="excelTableFoot" style="width: 100%">
    <tr>
      <td style="width:80px;" colspan="2"></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td colspan="3">负责人：</td>

      <td colspan="3">审核人：</td>

      <td colspan="3">填报人：</td>
    </tr>
  </table>
  <br/>

</div>
阿虎-cqh
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
springboot mybatis thymeleaf 单表增删demo 文件上传demo
05-18
springboot mybatis thymeleaf 单表增删demo 文件上传demo
springboot+mybatisplus+thymeleaf导入导出excel表格和制作饼状图，柱状图
lyaizmj的博客
11-29 1010
switch (cell.getCellType()) { // 判断excel单元格内容的格式，并对其进行转换，以便插入数据库。dao层的方法，复制到service 层，lmpl实现一下就行了，其实查询所有可以直接用mybatisplus自带的方法，我这里是和其他方法冲突了，所以新建了一个方法。这里主要就是通过for循环将我们的数据循环到excel表格，注意这里put进去的key值，我这里使用的是form表单的方式进行的上传文件，导入的。下载JavaScript库。
myblog：使用Springboot + Thymeleaf制作个人博客
02-15
我的博客 使用Springboot + Thymeleaf制作个人博客 使用的技术 前端 jQuery的 CSS框架 代码高亮 动画 目录生成 音乐 照片墙 初步 Springboot 2.4.2 JDK 1.8 Mybatis持久层框架 Thymeleaf前端模板 PageHelper分页插件 MD5加密 阿里云服务器 MySQL数据库 页面展示 前置页面 首页
SpringBootMybatis+poi+Thymeleaf实现excel文件数据导入到数据库以及从数据库将数据导出成excel.zip
06-10
SpringBootMybatis+poi+Thymeleaf实现excel文件数据导入到数据库以及从数据库将数据导出成excel
thymeleaf循环遍历集合并呈现在表格中
12-14
Thymeleaf是一个很好用的模板引擎, 可以完全取代JSP 需求 数据库中有张名为commanders的表存有多个人的信息, 现在通过后台去查询整张表, 返回一个集合, 要求使用thymeleaf动态的把集合内容以表格的形式展示在网页上 表的内容如下 后台关键代码如下 @Controller public class HelloController { @Autowired CommanderDao commanderDao; @RequestMapping("/list") public String queryAll(Map map) {
Thymeleaf高级语法：使用rowspan等构建复杂表格
蛋壳城堡
05-20 5238
引子 之前自己撸代码的时候，需要使用邮件发送报表。当然，我曾在项目中见过有大佬直接使用StringBuilder拼接除了一整个表格的HTML。这种牛逼而又Low B的代码，实在是鄙视。针对这个需求，我选择的方式是，使用Thymeleaf将数据渲染到我们构建好的HTML模板上，同时拿到渲染完毕后HTML文档的字符串，最后将其嵌入邮件中进行发送。 通过查询资料，网上对于Thymeleaf的复杂表格...
SpringBoot整合Thymeleaf+EasyExcel实现excel文件的读取并展示，附加swagger2配置（超详细示范！）
qq_45416246的博客
07-28 1624
帮助新手快速实现SpringBoot整合Thyemleaf+EasyExcel。excel文件的读取并展示，附加swagger2配置
thymeleaf做一个简单的表单
大道至简
08-10 445
来绑定对应的对象的属性，使用*{}*来获取对应的属性值。文件是作为单独的属性去设置的 会将提交的文件对象放在file00提交上去。跳转一个页面，并传递一个DictoryDto 的对象作为名为dictory的对象传递过去，和一个用来做列表的list对象传递到前端thymeleaf模板中。来介绍对应的对象，这个对象也会对应的提交上去，这里居然能接收这么多的参数我也是想不到的。做一个信息提交和图片上传的表单。指向对应的控制层的url。
基于thymeleaf实现数据库图片展示到浏览器表格
记录、总结
04-10 3043
基于thymeleaf实现数据库图片展示到浏览器表格
SpringBoot2整合thymeleaf3及thymeleaf3语法.md
06-15
## springboot整合thymeleaf ### 1. 导入起步依赖 ```xml org.springframework.boot spring-boot-starter-thymeleaf ``` ### 2. 更改引入版本 ```xml 3.0.2.RELEASE 2.1.1 ``` > 1. springboot自带的thymeleaf依赖为2.1.3版本，使用thymeleaf-layout-dialect版本为2以下版本。 > 2. 使用3或3以上的thymeleaf时，需要thymeleaf-layout-dialect的版本为2或以上。 > 3. 锁定thymeleaf版本时不能使用thymeleaf.version标签，会和springboot内部的依赖标签冲突。应当使用springboot-thymeleaf.version标签来锁定版本。 ### 3. 配置文件配置 ```properties spring.thymeleaf.prefix=classpath:/templates/ spring.thymeleaf.check-template-location=true spring.thymeleaf.suffix=.html spring.thymeleaf.encoding=UTF-8 spring.thymeleaf.content-type=text/html spring.thymeleaf.mode=HTML spring.thymeleaf.cache=false ``` > spring.thymeleaf.cache为缓存，需要热部署时，需要设置为false ## 语法 ### 1. 替换标签体内容 ```html 显示欢迎 显示欢迎 ``` ### 2. 替换属性 ```html 显示欢迎 ``` ### 3. 在表达式中访问属性域 ```html 访问属性域 访问请求域 方式一 访问请求域 方式二 访问Session域 访Session域 方式一 访问Application域 方式一 ``` ### 4. 解析url地址 ```html 解析URL地址，获取ContextPath的值 @{}是把ContextPath的值附加到指定的地址前 @{}是把ContextPath的值附加到指定的地址前 ``` ### 5. 直接执行表达式 ```html 直接执行表达式 无转义效果 : [[${attrRequestScope}]] 有转义效果 : [(${attrRequestScope})] ``` ### 6. 分支与迭代 #### 1. if 判断 ```html if判断字符串是否为空 <p th
基于SpringBoot及thymeleaf搭建的疫情信息管理系统
06-16
基于SpringBoot及thymeleaf搭建的疫情信息管理系统 可做毕设 抗疫管理员登录后可以进行确诊患者管理、密切接触者管理、死亡管理、治愈管理，同时可以看到数据面板的数据变化与动态图。系统管理员除了拥有抗疫管理者...
SpringBoot + Echars + Thymeleaf 后端转html,pdf
qq_27242695的博客
04-13 3188
文章目录SpringBoot + Echars + Thymeleaf 后端转html,pdf1. 需要引用的依赖2. 后端将echars报表生成jpg2.1 phantomjs及echarts-convert资料下载2.1.1 phantomjs介绍2.1.2 echarts-convert.js2.2 echars转image.png2.2.1 EchartsFileService 调用服务2.2.2 EchartsUtil 工具生成图片2.2.3 application.propertyies3.
SpringBoot整合Thymeleaf模板
再见天涯
06-01 196
Thymeleaf是新-代Java模板引擎，类似于Velocity、FreeMarker 等传统Java模板引擎。与传统Java模板引擎不同的是，Thymeleaf支持HTML原型，既可以让前端工程师在浏览器中直接打开查看样式，也可以让后端工程师结合真实数据查看显示效果。同时, Spring Boot提供了Thymeleaf自动化配置解决方案，因此在Spring Boot中使用Thymeleaf非常方便。 一、创建工程，添加依赖 <!--添加thymeleaf依赖--> <
thymeleaf显示表格，for循环
热门推荐
Top5软件工程硕士，先后在京东、字节从事多年Java后端开发、实时和离线大数据开发
06-13 5万+
&lt;table border="1"&gt; &lt;tr&gt; &lt;th&gt;用户名&lt;/th&gt; &lt;th&gt;邮箱&lt;/th&gt; &lt;th&gt;状态变量：index&lt;/th&gt; &lt;th&gt;状态变量：count&
插入模板_Thymeleaf参考手册（八）：模板布局
weixin_30728435的博客
01-04 247
模板片段包含定义和引用片段在模板中，经常需要包含其他模板中的部分，例如页脚，页眉，菜单等部分。为了做到这一点，Thymeleaf需要定义这些要包含的部分“片段”，可以使用 th:fragment 属性来完成。假设我们要在所有页面中添加标准的版权页脚，因此我们创建一个 /WEB-INF/templates/footer.html 包含以下代码的文件：<!DOCTYPE html> &lt...
Thymeleaf显示表格
我的博客
08-03 520
//查询所有员工返回列表页面 ...
Web前端开发之HTML_3
最新发布
zx1026409886的博客
04-23 883
表单在Web网页中用来给用户填写信息，从而采集用户信息，使网页具有交互功能。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。表单是由容器和控件组成的，一个表单一般应包含用户填写信息的输入框，按钮等，这些输入框、按钮叫做控件，表单就是容器，它能够容纳各种各样的控件。
thymeleaf自动生成表
08-15
回答: 要使用Thymeleaf自动生成表单，首先需要在配置文件中设置Thymeleaf的相关配置。可以将模板文件放在templates下，配置servlet的content-type为text/html，设置文件编码为UTF-8，同时将缓存设置为false。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [thymeleaf生成静态页面-springBoot](https://blog.csdn.net/weixin_43635290/article/details/126694750)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* [Thymeleaf动态生成表格](https://blog.csdn.net/qq_18807917/article/details/108111345)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值