• 使用layui框架导出table表为excel


    1.当分页导出table时,只需要添加导出按钮,并给按钮添加onclick事件触发以下函数

                  //文件导出
            function exportFile() {
            var bodys = $("div[class='layui-form layui-border-box layui-table-view'] .layui-table-box table").get(1); // 获取数据
            var btrs = Array.from(bodys.querySelectorAll("tr"))
            if(btrs==''){
                alert('数据为空,无法导出excel文件');
            }else{
            var btdslength = Array.from(btrs[0].querySelectorAll("td")).length;
            var headers = $("div[class='layui-form layui-border-box layui-table-view'] .layui-table-box table").get(0); // 获取表头
            var headerHead = $("div[class='layui-form layui-border-box layui-table-view'] .layui-table-box table thead").get(0); // 获取表头
            var htrs = Array.from(headers.querySelectorAll('tr'));
    
            var bodysArr = new Array();
            var point =new Array();  // 行,列
            for(var pi =0; pi<=htrs.length+1; pi++){
                point[pi] = new Array();
            }
            point[0][0] ="qd"; // 起点
            var mergeArr = [];
            for (var j = 0; j < htrs.length; j++) {    // 遍历tr
                var titles = [];
                var hths = Array.from(htrs[j].querySelectorAll("th"));
                var titleAll = {};
                var pointIndex = 0;
                var pindx = 0;  // 起点遍历位置
                for (var i = 1; i < hths.length-1; i++) {  // 遍历 th
                    var clazz = hths[i].getAttributeNode('class');
                    var colspan = hths[i].getAttributeNode('colspan'); // 表头占用列数
                    var rowspan = hths[i].getAttributeNode('rowspan'); //,表头占用行数
                    if(!colspan){
                        colspan = 1;
                    }else{
                        colspan = parseInt(colspan.value);
                    }
                    if(!rowspan){
                        rowspan = 1;
                    }else{
                        rowspan = parseInt(rowspan.value);
                    }
                    // 判断数据起始填写位置
                    for(;pindx < btdslength; pindx ++){
                        if(j == 0 || point[j][pindx] == "qd"){
                            titles.push(hths[i].innerText);
                            for(var temp = 0; temp < colspan-1;temp++){
                                titles.push(null);
                            }
                            mergeArr.push({s:{r:j,c:pindx},e:{r:j+rowspan-1,c:pindx+colspan-1}}); // 添加合并数据参数  r的差R表示向下扩展R个单元格,c 的差C表示想右扩展C个单元格
                            for(var qdi = 0; qdi<colspan ;qdi ++){
                                point[j+rowspan][pindx+qdi] = "qd"; // 添加完数据 ,添加起点记录
                            }
                            pindx = pindx+colspan;
                            break;
                        }else{
                            titles.push(""); // 不能为null, 为null 会影响表格样式的设置
                        }
                    }
                }
                bodysArr.push(titles);
            }
            var widthArr = []; //这里改宽
            for (var j = 0; j < btrs.length; j++) {
                var contents = [];
                var btds = Array.from(btrs[j].querySelectorAll("td"));
                for (var i = 1; i < btds.length-1; i++) {
                    contents.push(btds[i].innerText);
                    if(j == 0){  //只跑一圈
                        widthArr.push({wpx:btds[i].scrollWidth});
                    }
                }
                bodysArr.push(contents)
            } 
            //设置表格样式
            var styleStr = {
                alignment:{
                    vertical:'center',
                    horizontal:'center'
                },
                font:{
                    sz:14,
                    // bold:true
                },
                border:{
                    top:{
                        style:'thin'
                    },
                    bottom:{
                        style:'thin'
                    },
                    left:{
                        style:'thin'
                    },
                    right:{
                        style:'thin'
                    }
                }
            }
            var datas = [];
            for(var i = 0; i<bodysArr.length;i++){
                var map ={};
                var thisData = bodysArr[i];
                for(var n = 0;n<thisData.length;n++){
                    var dataName = "data_"+n;
                    var das = thisData[n];
                    var styMap = {};
                    styMap['s'] = styleStr;
                    styMap['v'] = das;
                    map[dataName] = styMap;
                }
                datas.push(map);
            }
            
            var rowConf = excel.makeRowConfig({
                1: 40,
                3: 30
            }, 20)
            excel.exportExcel({
                sheet: datas
            }, '专家表-' + new Date().toLocaleString() + '.xlsx', 'xlsx', {
                extend: {
                    sheet: {
                        '!merges': mergeArr
                        , '!cols': widthArr
                        , '!rows': rowConf
                    }
                }
            })  
            }
        } 

    2.分页的table数据,导出全部数据,需要后台将数据全部给前台

    给导出按钮,添加一个id,点击通过ajax获取全部数据,成功后添加

    dataList = eval(data.data);//data.data后台传入的数据
    table.exportFile(d.config.id, dataList, 'xls');//d=table.render

    table.exportFile(col,data , 'xls');

    col为组装自定义表头数组,

    data为重新请求的完整表格数据,

    xls为导出文件类型。

    3.不想将数据全部导出,只导出table表格的几列,可以写一个隐藏的table表格

    <div style="display:none">
         <table id="tabExport"></table>
    </div>

    给导出按钮,添加一个id,点击通过ajax获取全部数据

    $("#btnExport").click(function (){ var d = table.render({
                        elem: '#tabExport',
                        url: "/data/listall", //数据接口
                        method: 'post',
                        title: '导出表的名字',
                        where:{
                            name:name,
                        },
                        cols: [[
                            ,{field:'name', title: '', align:'center'}
                              ,{field:'major', title: '', align:'center'} 
                              ,{field:'user', title: '', align:'center'} 
                        ]],
                        done: function (data) {
                            dataList = eval(data.data);
                            table.exportFile(d.config.id, dataList, 'xls');
                        }
                    });
                })
                

    //导出时阻止页面刷新
    $(".layui-form").submit(function (e) {
    e.preventDefault();
    })

  • 相关阅读:
    Redisson 实现分布式锁原理分析
    redis如何避免释放锁时把别人的锁释放掉
    记一次org.springframework.transaction.UnexpectedRollbackException: Transaction rolled back because it has been marked as rollback-only异常
    1.编译chromium
    Win10更新后wireshark无法获取网络接口
    ASIO库使用注意事项
    使用gdb添加断点的几种方式
    select、poll、epoll的比较
    CMakeLists.txt编写常用命令
    Ubuntu下使用linuxdeployqt打包Qt程序
  • 原文地址:https://www.cnblogs.com/brillant/p/15800570.html
Copyright © 2020-2023  润新知