专栏首页宣言(Siam)博客layui2.0数据表格导出复杂表头EXCEL解决方案,table2excel

layui2.0数据表格导出复杂表头EXCEL解决方案,table2excel

layui 数据表格组件

layui是一套面向所有层次的前后端开发者,零门槛开箱即用的前端UI解决方案。很多的后端开发在开发后台系统时候都会选择它。

数据表格组件也是使用非常频繁的,它可以快速从api得到数据并进行处理渲染成表格,并且还有排序、总计、导出表格等等功能。

在一次的需求中,需要使用复杂表头并且导出EXCEL表格,发现layui并不支持复杂表头的处理,社区之中也还未找到相关的方案。于是使用了table2excel插件协助完成需求。(如果你有更好更方便的方法,希望你能联系我或者留言交流一下,谢谢)

以下简单记一下笔记和步骤,方便自己和他人。

talbe2excel

https://github.com/rusty1s/table2excel

在github上有挺多个叫table2excel的仓库,我选择了以上这个仓库。

在页面引入jquery和table2excel.js

一个快速的demo

<script src="table2excel.js"></script>

<script>
  var table2excel = new Table2Excel();
  table2excel.export(document.querySelectorAll("table"));
</script>

但是此方式在layui生成的数据表格中并不适用。具体原因和解决方案有空待研究~ 其他小伙伴也可以补充哦!

原生写的table标签可以正常导出,并且可以使用复杂表头。

于是绕了一下弯路,在layui数据表格加载完数据后,在页面操作原生tableDom(并且隐藏起来 (╹▽╹) ),再使用table2excel导出表格。

<table id="report-table" cellpadding=1 cellspacing=1 border =1>
    <tr>
        <th rowspan="2">id</th>
        <th colspan="2">信息</th>
    </tr>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tbody id="report-table-tbody">
        <tr>
            <th>1</th>
            <th>Siam</th>
            <th>19</th>
        </tr>
    </tbody>
</table>

javascript代码

table.render({ //其它参数在此省略
  done: function(res, curr, count){
    $.each(res.data,function(index,value){
        let html = '';

        html += '<tr>';
        html += '<td>';
        html += '<td>'+value.name+'</td>';
        html += '<td>'+value.other+'</td>';
        html += '</td>';
        html += '</tr>';
        $('#report-table-tbody').append(html);
    });

  }
});
$('#report-table-downexcel').click(function(){
  var table2excel = new Table2Excel();
  table2excel.export($('#report-table'));
})

这样子就可以完成导出复杂表头的表格了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • php-fpm应用与php-swoole应用进行通信

    我们使用swoole环境的常驻内存、协程特性来做一些其他事务,如:任务队列及其消费、缓存、异步执行等情况时

    宣言言言
  • php计算两个日期之间的间隔,避免导出大量数据

    在做系统业务功能的时候,有的时候业务人员会进行超大范围地导出excel表格,导致内存、CPU占用飙升。

    宣言言言
  • [OpenSSL] 微信支付证书pfx分解成pem

    事件起因:做香港本地微信支付(香港公司收取香港用户钱包)申请的商户只提供了cert.pem和一个pfx的文件。程序使用pem需要cert和key两个文件,所以需...

    宣言言言
  • 黑科技!Fundebug支持可视化重现出错场景

    很多前端的bug,比如WeixinJSBridge is not defined,JQuery is not defined,Script error.。它们到...

    Fundebug
  • 黑科技!Fundebug支持可视化重现出错场景

    Fundebug
  • C++11新特性——range for

    很多编程语言都有range for语法功能,自C++11起,终于将这个重要功能加入C++标准中。range for语句,可以方便的遍历给定序列中的每个元素并对其...

    Dabelv
  • java nio 源码分析2 IO

    getTemporaryDirectBuffer和SocketChannelImpl值得分析

    平凡的学生族
  • 动态 | IBM :实现机器学习的「量子优势」还任重道远,但在特征映射方面的努力将见成效

    AI 科技评论按:「量子优势」这个概念是科技公司大多公开表达或半公开支持一种说法,即量子计算机的计算性能超越史上最强的经典计算机。在通往「量子优势」这条道路上,...

    AI研习社
  • 动态 | IBM :实现机器学习的「量子优势」还任重道远,但在特征映射方面的努力将见成效

    AI 科技评论按:「量子优势」这个概念是科技公司大多公开表达或半公开支持一种说法,即量子计算机的计算性能超越史上最强的经典计算机。在通往「量子优势」这条道路上,...

    AI科技评论
  • Golang Leetcode 454. 4Sum II.go

    版权声明:原创勿转 https://blog.csdn.net/anakinsun/article/details/89143799

    anakinsun

扫码关注云+社区

领取腾讯云代金券