使用layui-exts插件实现layui数据表格导出自定义宽高

1.虽然layui下架了,去镜像网站下载他的插件Layui - 经典开源模块化前端 UI 框架layui 是一套开源的 Web UI 解决方案,其内部采用的是自身经典的模块化规范,并遵循原生 HTML/CSS/JS 的开发方式,极易上手,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到使用方法的每一处细节都经过精心雕琢,非常适合网页界面的快速开发。icon-default.png?t=LA92https://layui.11dz.cn/

 找到

然后你在他码云仓库里下载layui-exts放在项目里

ok,步入正题

2.引入插件,如果使用layui框架的话:

  layui.config({
        base: '../layui/layui_exts/', // 配置一个可访问地址,我的我放在layui文件夹下
    }).extend({
        excel: 'excel',
    });
 layui.use(['table', 'jquery','excel'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var $ = window.$ = layui.jquery;
        var $=layui.$=window.$;
         var excel = layui.excel;//这个是一定要写的


         //重写layui导出默认事件
  tb = table.render({
            elem: '#test'
            // , url: ur
            , data: shu
            ,toolbar:true
            , height: 'full-20'  /*高度自适应*/
            , cellMinWidth: 80    /*宽度自适应*/
            ,defaultToolbar:['filter',{ //看这就是重写了
                title:'导出',
                layEvent:'exportSelf',
                icon:'layui-icon-export'
            },'print']
            , title: '用户数据表'
            , page: true
            , limit: Number.MAX_VALUE
            , done: function (res, curr, count) {// 表格渲染完成之后的回调
                tableDate=res.data;//定义一个全局变量接收当前表格数据,后面会用到
                });
            }
            , id: 'demo'
        });
table.on('toolbar(test)', function (obj) {
            switch (obj.event) {
                case 'exportSelf':
                function gen(){//生成大写之母
                    var str = [];
                    for(var i=65;i<93;i++){
                        str.push(String.fromCharCode(i));
                    }
                    return str;
                }
                    var closO={
                        first_level: "一级",
                        second_level: "二级"
                    }
                    var excels = new Map()//行
                    var excels2 = new Map()//列
                    var str=gen()//
             
                    var clos= [
                        'first_level', 'second_level'
                    ] //定义你要导出的列头

                    for (let i=0;i<=closO.length;i++){//为了动态给每个单元格宽赋值 ,高的话也是一样的
                        if (isNaN(parseInt($('[data-field="'+clos[i]+'"]').css("width")))){
                            break;
                        }else {
                            excels2.set(str[i]+'',parseInt($('[data-                            field="'+clos[i]+'"]').css("width")))
                        }
                    }
                    var obj2= Object.create(null);//列宽,将map集合转化为对象
                    for (let[k,v] of excels2) {
                    obj2[k] = v;
                }

                    tableDate.unshift(closO)
                    //得到所有学院情况
                    console.log(closO)
                    var colConfig=  excel.makeColConfig({...obj2}, 90);//直接写对象会错我也不知道为啥
                   // var rowConfig = excel.makeRowConfig({...obj}, 80);
                   let dat = excel.filterExportData(tableDate, clos);//筛选你要的列,tableDate为layui数据表格里面所有值
                    layui.excel.setExportCellStyle(dat,'',{//设置样式 1.数据 2.range 默认到最后 3.样式配置
                        s: {
                            alignment: {
                                horizontal: 'center',//文字垂直方向
                                vertical: 'center',//水平方向
                                wrapText:true //单元格文本换行
                            }
                        }
                    });
                    layui.excel.exportExcel(dat, '考核表.xlsx', 'xlsx',{//都懂吧
                        extend: {
                            '!cols': colConfig//载入配置
                           // '!rows': rowConfig
                        }
                    })

                    break
            }
        })

//我用对象呢只是再凑他的格式
//官方格式是: var colConfig=  excel.makeColConfig({'A':80}, 90);就是A这列宽为80,其他的为//90
//var rowConfig = excel.makeRowConfig({1:60,2:50}, 80);为行设置高度第一1行60,第二行:50其他行80
点击layui小图标就完成了

});

 

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
layui中,可以使用 `upload` 组件来实现文件上传功能。以下是一个简单的示例: HTML代码: ```html <div class="layui-upload"> <button type="button" class="layui-btn" id="test-upload-normal">选择文件</button> <div class="layui-upload-list"> <table class="layui-table"> <thead> <tr><th>文件名</th><th>大小</th><th>状态</th><th>操作</th></tr> </thead> <tbody id="demo-list"></tbody> </table> </div> </div> ``` JavaScript代码: ```javascript //普通图片上传 var uploadInst = layui.upload.render({ elem: '#test-upload-normal', url: '/upload/', accept: 'file', //允许上传的文件类型 exts: 'pdf|doc|docx|xls|xlsx', //允许上传的文件后缀 size: 2048, //文件大小限制,单位 KB multiple: true, //是否允许多文件上传 done: function(res){ //上传完毕回调 console.log(res); //上传成功后,将文件信息添加到表格中 var tr = '<tr><td>'+ res.filename +'</td><td>'+ res.filesize +'</td><td>上传成功</td><td><button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button></td></tr>'; $('#demo-list').append(tr); }, error: function(){ //请求异常回调 console.log('上传失败'); } }); //删除已上传的文件 $(document).on('click', '.demo-delete', function(){ $(this).parents('tr').remove(); }); ``` 在上面的示例代码中,我们使用了 `upload` 组件来实现文件上传功能,并且设置了一些上传参数,如 `accept`、`exts`、`size`等。上传成功后,会调用 `done` 回调函数,在回调函数中将文件信息添加到表格中。同时,我们还实现了删除已上传文件的功能。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值