layui数据表格table导出所有数据到excel

最新推荐文章于 2024-08-23 18:00:00 发布

Skye Lin

最新推荐文章于 2024-08-23 18:00:00 发布

阅读量1.2w

点赞数

分类专栏： layui 文章标签： layui table excel

本文链接：https://blog.csdn.net/skye_95/article/details/101099655

版权

layui 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在用layui自带的table导出excel表的时候发现，分页的时候只能导出当前页的数据。项目中甲方要求导出所有数据，后进行很多解决办法的尝试。

1.刚开始想到有用toobar在表头工具栏自己加一个导出按钮，不用layui设置的导出按钮，用户点击导出按钮的时候，发一个page:1,limit:100000000（将limit设置到足够大，以保证能请求到所有数据）的请求，再通过layui设置的导出任意数据的基础方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导出数据表格所有数据</title>
    <link rel="stylesheet" href="../layui/css/layui.css"  media="all">

</head>
<body>
<table id="LAY-credit-score" lay-filter="LAY-credit-score"></table>
<script type="text/html" id="toolbarExcel">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getExcel">导出表格</button>
    </div>
</script>
<script src="../layui/layui.js" charset="utf-8"></script>
<script>
layui.use(['table'],function () {
    var table = layui.table,
        $ = layui.$;

    tableIns = table.render({
        , url: 'xxx'
		,headers: {
                            "Authorization": "xxx"
                    }
        , elem: '#LAY-credit-score'
        , page: true //开启分页
        , toolbar: '#toolbarExcel'
        , defaultToolbar: []
        , cols: [
            [{
                field: 'name',
                title: '用户名',
                align: 'center'
            }, {
                field: 'telephone',
                title: '手机号',
                align: 'center'
            },{
                field: 'creditvalue',
                title: '积分值',
                align: 'center',
                sort:true
            },{
                field: 'other1',
                title: '违约次数',
                align: 'center',
                sort: true
            }]
        ],
        done: function (res, curr, count) {

        }
    });

    table.on('toolbar(LAY-credit-score)', function(obj){
        switch(obj.event){
            case 'getExcel':
                //请求所有数据
                $.ajax({
                    type:'get',
                    url:'xxx',
                    headers: {
                            "Authorization": "xxx"
                    },
                    data: {
                            page:1,
                            limit:100000000
                    },
                    success:function (res) {
                        table.exportFile(obj.config.id, res.data, 'xls');
                    }
                });
                break;
        };
    });
})
</script>
</body>
</html>

遇到的问题：

有的列显示不全，后发现原因是field没有设置列名的列都不能导出
用templet修改后的值不能再excel中显示出来，显示的还是后台返回的值，后发现新版的layui已解决这个bug

2.后来换用一种思路，将设置limits:[10,20,30,40,50,10000000]达到方式1中的ajax请求效果，还是继续用layui的导出按钮，并更新layui的table.js为最新版本（为什么不直接替换整个layui文件？因为有些源码有修改）

, page: true //开启分页
, toolbar: true
, defaultToolbar: ["exports"]
, limits:[10,20,40,90,100000000]

最后实现能导出所有数据到excel表，而且templet修改后的值也能导出到excel中。只有一次请求太多数据，会出现请求超时的情况。

Skye Lin

关注

0
点赞
踩
13

收藏

觉得还不错? 一键收藏
2
评论
layui数据表格table导出所有数据到excel

在用layui自带的table导出excel表的时候发现，分页的时候只能导出当前页的数据。项目中甲方要求导出所有数据，后进行很多解决办法的尝试。1.刚开始想到有用toobar在表头工具栏自己加一个导出按钮，不用layui设置的导出按钮，用户点击导出按钮的时候，发一个page:1,limit:100000000（将limit设置到足够大，以保证能请求到所有数据）的请求，再通过layui设置的导出...
复制链接

扫一扫

专栏目录