关于layui数据表格导出所有数据的一个解决方案

分享 未结
9 168
quantong
quantong 2019-1-30
悬赏:20飞吻
layui自带导出导出excel功能还仅限于当前页面的数据,但是大多数还是希望下载所有的数据,或者配合筛选功能进行下载对应的数据。
具体思路就是重新请求接口,获取数据,然后调用table.exportFile。

添加一个按钮,然后给按钮添加点击事件:
            $("#btn_export").on("click", function () {
var filter1 = $("#filter1");
var filter2 = $("#filter2");
$.get("/xxxx/download", { "filter1": filter1.val(), "filter2": filter2.val() }, function (res) {
if (res.code == 0) {
table.exportFile(['列名1', '列名2', '列名3', '列名4', '列名5', '列名6'], res.data, 'xls');
}
});
});
列名需要和返回的数据一致
回帖
  • wolf123456
    2019-1-31
    table.exportFile(ins1.config.id, data); //data 为该实例中的任意数量的数据,使用该方法,自己后台获取data数据
    1 回复
  • quantong
    2019-1-30
    导出文件的文件名没有解决。。。哪位大神来支两招啊
    0 回复
  • 实际你这个处理方式有点绕,没必要自己写title,只要知道你要导出的是那张表知道它的实例的id就可以用
    table.exportFile(tableId, data, type)这种方式自然就会根据config解析出表头,还有如果设置了title也会有导出的文件夹名称
    0 回复
  • quantong
    2019-1-31
    @岁月小偷 这样导出的只是当前页的数据,不能导出所有数据
    0 回复
  • @quantong 话说你看文档了吗?你试过了吗?
    0 回复
  • quantong
    2019-1-31
    @岁月小偷 不好意思,我还真的试过了。。你没试过的话可以去试试看
    0 回复
  • @quantong 你是来搞笑的么?导出某个表格的全部数据的这个早就测过了,真不知道你是如何测的,再用脚趾想想如果这么exportfile只能到处当前页的数据还要第二个参数data做啥?脱裤子放屁吗?你传入什么data就导出什么data,传的是所有的数据自然就是导出全部数据
    0 回复
  • quantong
    2019-1-31
    @岁月小偷 我闲着没事来这里搞笑啊!你贴一下代码总可以吧,你行我就采纳,大爷可好??
    0 回复
  • @quantong 我也不知道还有啥好说的,你就将你原先的方法把第一个参数换成table的实例的id应该就好了,当然不排除以前版本的bug,但是记得这个自从有了这个功能之后就没不正常过,还有是否你那边有修改过table.js源码之类的把这个方法给改坏了。所以现在要测试直接在layui的示例页面里面测, https://www.layui.com/demo/ ,将下面的覆盖到调试预览的代码运行代码,然后点击工具条默认的工具条的 + 按钮
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>layui在线调试</title>
    <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css?t=1545041465443" media="all">
    <style>
    body{margin: 10px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
    </style>
    </head>
    <body>

    <table class="layui-hide" id="demo" lay-filter="test"></table>

    <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <blockquote class="layui-elem-quote layui-quote-nm layui-hide" id="footer">layui {{ layui.v }} 提供强力驱动</blockquote>


    <script src="//res.layui.com/layui/dist/layui.js?t=1545041465443"></script>
    <script>
    layui.config({
    version: '1545041465443' //为了更新 js 缓存,可忽略
    });

    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){
    var laydate = layui.laydate //日期
    ,laypage = layui.laypage //分页
    ,layer = layui.layer //弹层
    ,table = layui.table //表格
    ,carousel = layui.carousel //轮播
    ,upload = layui.upload //上传
    ,element = layui.element //元素操作
    ,slider = layui.slider //滑块

    //向世界问个好
    layer.msg('Hello World');

    //监听Tab切换
    element.on('tab(demo)', function(data){
    layer.tips('切换了 '+ data.index +':'+ this.innerHTML, this, {
    tips: 1
    });
    });

    //执行一个 table 实例
    table.render({
    elem: '#demo'
    ,height: 420
    ,url: '/demo/table/user/' //数据接口
    ,title: '用户表'
    ,page: true //开启分页
    ,toolbar: 'default' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
    ,totalRow: true //开启合计行
    ,cols: [[ //表头
    {type: 'checkbox', fixed: 'left'}
    ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计:'}
    ,{field: 'username', title: '用户名', width:80}
    ,{field: 'experience', title: '积分', width: 90, sort: true, totalRow: true}
    ,{field: 'sex', title: '性别', width:80, sort: true}
    ,{field: 'score', title: '评分', width: 80, sort: true, totalRow: true}
    ,{field: 'city', title: '城市', width:150}
    ,{field: 'sign', title: '签名', width: 200}
    ,{field: 'classify', title: '职业', width: 100}
    ,{field: 'wealth', title: '财富', width: 135, sort: true, totalRow: true}
    ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
    ]]
    });

    //监听头工具栏事件
    table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id)
    ,data = checkStatus.data; //获取选中的数据
    switch(obj.event){
    case 'add':
    //layer.msg('测试导出1000条模拟测试数据');
    var dataTest= [];
    for(var i = 0; i < 1000; i++) {
    dataTest.push({id: i, username: 'name_' + i})
    }
    table.exportFile(obj.config.id, dataTest, 'xls');
    break;
    case 'update':
    if(data.length === 0){
    layer.msg('请选择一行');
    } else if(data.length > 1){
    layer.msg('只能同时编辑一个');
    } else {
    layer.alert('编辑 [id]:'+ checkStatus.data[0].id);
    }
    break;
    case 'delete':
    if(data.length === 0){
    layer.msg('请选择一行');
    } else {
    layer.msg('删除');
    }
    break;
    };
    });

    //监听行工具事件
    table.on('tool(test)', function(obj){ //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据
    ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === 'detail'){
    layer.msg('查看操作');
    } else if(layEvent === 'del'){
    layer.confirm('真的删除行么', function(index){
    obj.del(); //删除对应行(tr)的DOM结构
    layer.close(index);
    //向服务端发送删除指令
    });
    } else if(layEvent === 'edit'){
    layer.msg('编辑操作');
    }
    });



    //底部信息
    var footerTpl = lay('#footer')[0].innerHTML;
    lay('#footer').html(layui.laytpl(footerTpl).render({}))
    .removeClass('layui-hide');
    });
    </script>
    </body>
    </html>
    0 回复