企业网站域名注册查询,品牌视觉设计,wordpress 留言 插件,网页设计师培训机构有吗本段是菜狗子的碎碎念#xff0c;解决办法请直接从第二段开始看。layui多级表头的导出#xff0c;弄了两天才搞定#xff0c;中途一度想放弃#xff0c;还好坚持下来了。一开始用的是layui的toolbar里自带的那个导出#xff0c;但是多级表头没有正常导出#xff0c;单元格…本段是菜狗子的碎碎念解决办法请直接从第二段开始看。layui多级表头的导出弄了两天才搞定中途一度想放弃还好坚持下来了。一开始用的是layui的toolbar里自带的那个导出但是多级表头没有正常导出单元格背景颜色也没有。后来分别用了sheetjs和table2excel导出的文件有大小但是用wps打不开或者打开空白或者报错Uncaught TypeError: Cannot read property length of undefined。最后用了excel.js或者叫layui-excel成功。导出样式如下 excel.js下载地址https://gitcode.com/gh_mirrors/la/layui-excel/overview?utm_sourcecsdn_github_acceleratorisLogin1
1. 添加引用
excel.js在layui-excel-master\layui_exts\中可以将文件夹layui_exts复制到工程代码的js\lay-module\中然后在js\lay-config.js中添加layui自定义扩展excel最后在html文件中引用。 window.rootPath (function(src) {src document.scripts[document.scripts.length - 1].src;return src.substring(0, src.lastIndexOf(/) 1);
})();layui.config({base: rootPath lay-module/,version: true
}).extend({excel: layui_exts/excel, // 后端接口封装
}); script src../../js/lay-config.js?v2.0.0 charsetutf-8/script 2. 做表 layui.use([form, table, myHttp,util, excel], function () {var $ layui.jquery,form layui.form,table layui.table,myHttp layui.myHttp,util layui.util,excel layui.excel;cxUrl myHttp.getDataList //此处获取表格展示的具体数据要替换成你自己的数据接口table.render({elem: #cxTable,url: cxUrl,toolbar: #cxDTableToolbar,defaultToolbar: [filter, exports, print],cols: [[{field: id,title: 设备编号,width: 100,fixed: left,rowspan: 2,sort: true},{field: address,title: 设备地址,width: 240,rowspan: 2,sort: true},{width: 120,title: 1号传感器,align: center,colspan: 2},{width: 120,title: 2号传感器,align: center,colspan: 2}],[{field: device1value,width: 90,title: 数值},{field: device1sts,width: 90,title: 状态,templet: function (d) {//根据传感器的状态设置背景颜色if (d.device1sts ! null d.device1sts ! 正常) {return div stylebackground-color: yellow; d.device1sts /div;} else {if (d.device1sts null) {d.device1sts ;}return d.device1sts;}}},{field: device2value,width: 90,title: 数值},{field: device2sts,width: 90,title: 状态,templet: function (d) {if (d.device2sts ! null d.device2sts ! 正常) {return div stylebackground-color: yellow; d.device2sts /div;} else {if (d.device2sts null) {d.device2sts ;}return d.device2sts;}}}]],limits: [10, 25, 50, 100],limit: 10,page: true,skin: line});});3.导出
参考了https://blog.csdn.net/qq_42455262/article/details/128049644中的function exportFile()部分我根据自己的情况在其中增加引用了excel.setExportCellStyle()作用是用黄色背景突出显示状态异常的器件如果不需要可以删掉。 !-- 添加导出按钮 --
button idexportButton导出表格/button // 点击导出按钮导出表格数据
$(#exportButton).click(function () {exportFile();});function exportFile() {var bodys $(div[classlayui-form layui-border-box layui-table-view] .layui-table-box table).get(1); // 获取数据var btrs Array.from(bodys.querySelectorAll(tr))var btdslength Array.from(btrs[0].querySelectorAll(td)).length;var headers $(div[classlayui-form layui-border-box layui-table-view] .layui-table-box table).get(0); // 获取表头var headerHead $(div[classlayui-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) { // 遍历trvar titles [];var hths Array.from(htrs[j].querySelectorAll(th));var titleAll {};var pointIndex 0;var pindx 0; // 起点遍历位置for (var i 0; i hths.length; i) { // 遍历 thvar 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 0; i btds.length; 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 excel layui.excel;// 开始填充单元格背景颜色// console.log(datas);excel.setExportCellStyle(datas, D1:Q300,{s: {fill: { bgColor: { indexed: 64 }, fgColor: { rgb: FFFF00 } },alignment: {horizontal: center,vertical: center}}}, function (cell, newCell, row, config, currentRow, currentCol, fieldKey) {// 回调参数cell:原有数据newCell:根据批量设置规则自动生成的样式row:所在行数据config:传入的配置,currentRow:当前行索引,currentCol:当前列索引fieldKey:当前字段索引// return ((currentRow currentCol) % 2 0) ? newCell : cell;// 隔行隔列上色// console.log(cell[v]);if(cell[v] 疑似故障 || cell[v] 超上限值){return newCell;}else{return cell;}})// console.log(data);// 结束填充单元格背景颜色var filename deviceSts.xlsx;// 第一行行高40其余行默认20var rowConf excel.makeRowConfig({1: 40}, 20)excel.exportExcel({sheet: datas}, filename, xlsx, {extend: {sheet: {!merges: mergeArr, !cols: widthArr, !rows: rowConf}}})} 点击导出按钮即可下载表格。到这里layui复杂表头的导出已经实现关于excel.js的详细使用可以参考https://excel.wj2015.com/_book/里面提供了功能演示和导出函数的使用介绍。
4.把导出函数添加到toolbar
这一步是为了美观把导出函数添加到表格的toolbar可以不做。下方代码片段中的exports对应的是默认导出菜单{title: 下载,layEvent: LAYTABLE_EXPORT2,icon: layui-icon-export}是新增的自定义导出菜单。
defaultToolbar: [filter, exports, print, // 此处的exports对应的是默认的导出方式{title: 下载,layEvent: LAYTABLE_EXPORT2,icon: layui-icon-export}, // 自定义导出函数接入{title: 提示,layEvent: LAYTABLE_TIPS,icon: layui-icon-tips}],
// 监听添加操作自定义导出cxTable需要替换成你自己的table id
table.on(toolbar(cxTable), function(obj) {if (obj.event LAYTABLE_EXPORT2) { // console.log(导出);exportFile();};});
此时表格的右上角变成了5个菜单。如下图所示第2个是默认导出第4个是自定义导出可以分别导出对比一下导出效果。没什么问题的话可以删除第2个菜单即export只保留自定义导出菜单即可。 关于layui的更多教程可以参考 layui开始使用_layui开始使用文档_layer在线开始使用文档_layui教程官网
