使用excel.js(layui-excel)进行layui多级表头导出,根据单元格内容设置背景颜色,并将导出函数添加到toolbar
本段是菜狗子的碎碎念,解决办法请直接从第二段开始看。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_source=csdn_github_accelerator&isLogin=1
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?v=2.0.0" charset="utf-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 style="background-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 style="background-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 id="exportButton">导出表格</button>
// 点击导出按钮,导出表格数据
$('#exportButton').click(function () {exportFile();});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"))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++) { // 遍历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教程官网
相关文章:
使用excel.js(layui-excel)进行layui多级表头导出,根据单元格内容设置背景颜色,并将导出函数添加到toolbar
本段是菜狗子的碎碎念,解决办法请直接从第二段开始看。layui多级表头的导出,弄了两天才搞定,中途一度想放弃,还好坚持下来了。一开始用的是layui的toolbar里自带的那个导出,但是多级表头没有正常导出,单元格…...
Mysql 5.7 安装与卸载(非常详细)
一、环境介绍 操作系统:CentOS 7 MySQL:5.7 二、MySQL卸载 # 查看软件 rpm -qa|grep mysql # 卸载MySQL yum remove -y mysql mysql-libs mysql-common rm -rf /var/lib/mysql rm /etc/my.cnf 继续查看是否还有 MySQL 软件,有的话继续删…...
030 elasticsearch查询、聚合
文章目录 查询聚合查询RestHighLevelClientElasticsearchRestTemplat SpringData对ES客户端的封装:ElasticsearchRestTemplate SpringData对CRUD的封装:ElasticsearchRepository 原生ES客户端:RestHighLevelClient 查询 package com.xd.cube…...
前端工程启动工具
一些思考 在公司项目中,需要启一个新的前端工程(一个基于Webpack的React工程)。因为同一个项目中有其他的前端工程,我们最开始想的是参考另外一个工程的配置重启一个新的工程,但是又因为原来的工程用的库版本都比较老…...
游戏逆向基础-跳出游戏线程发包
附加游戏后下断点 bp ws2_32.send send函数断下后,可以看到数据地址每次都一样 可以说明这个游戏是线程发包,所以直接在数据窗口中转到这个地址,然后对这个地址下硬件写入断点。 下了硬件写入断点后可以一层一层往上面跟,确定写…...
做海外网站需要准备什么
一,购买域名 在租用国外服务器之前,您需要购买域名。域名是访问网站的标志,也是网站品牌的一部分。因此,在购买域名时,需要考虑域名的可记忆性、简短性和搜索性,使网站更容易被用户记住。 二,租…...
通过OpenCV实现 Lucas-Kanade 算法
目录 简介 Lucas-Kanade 光流算法 实现步骤 1. 导入所需库 2. 视频捕捉与初始化 3. 设置特征点参数 4. 创建掩模 5. 光流估计循环 6. 释放资源 结论 简介 在计算机视觉领域,光流估计是一种追踪物体运动的技术。它通过比较连续帧之间的像素强度变化来估计图…...
7、Vue2(二) vueRouter3+axios+Vuex3
14.vue-router 3.x 路由安装的时候不是必须的,可以等到使用的时候再装,如果之前没有安装的话,可以再单独安装。之前的终端命令行不要关闭,再重新开一个,还需要再package.json文件的依赖中添加。 如果忘记之前是否有安…...
最新PHP礼品卡回收商城 点卡回收系统源码_附教程
最新PHP礼品卡回收商城 点卡回收系统源码_附教程 各大电商平台优惠券秒杀拼团限时折扣回收商城带余额宝 1、余额宝理财 2、回收、提现、充值、新订单语音消息提醒功能 3、带在线客服 4、优惠券回收功能 源码下载:https://download.csdn.net/download/m0_66047…...
MySQL数据库和表的基本操作
文章目录 一、数据库的基础知识 背景知识数据库的基本操作二、数据类型 字符串类型数值类型日期类型三、表的基本操作 创建表查看表结构查看所有表删除表 一、数据库的基础知识 背景知识 MySQL是一个客户端服务器结构的程序 主动发送数据的这一方,客户端(client…...
SAM应用:医学图像和视频中的任何内容分割中的基准测试与部署
医学图像和视频中的任何内容分割:基准测试与部署 目录 摘要:一、引言1.1 SAM2 在医学图像和视频中的应用 二.结果2.1 数据集和评估协议2.2 二维图像分割的评估结果 三 讨论四 局限性和未来的工作五、方法5.1数据来源和预处理5.2 微调协议5.3 评估指标 总…...
Qt消息对话框
问题对话框 对应API [static] QMessageBox::StandardButton QMessageBox::question( QWidget *parent, const QString &title, const QString &text, QMessageBox::StandardButtons buttons StandardButtons(Yes | No), QMessageBox::StandardButton defaultButt…...
FreeRTOS的队列管理
“队列”提供了一种任务到任务、任务到中断和中断到任务的通信机制。 队列特性 数据存储 队列可以容纳有限数量的固定大小的数据项。队列可以容纳的最大项目数称为其“长度”。每个数据项的长度和大小都是在创建队列时设置的。 队列通常用作先进先出(FIFO…...
买卖股票的最佳时机(动态规划方法总结)
总结一下,买卖股票系列的动态规划思想,贪心解法或者其他解法不做描述。 总结 121. 买卖股票的最佳时机 只有一次交易机会,每天有两种状态:持有股票和不持有股票; 122. 买卖股票的最佳时机 II 有多次交易机会&#x…...
KubeSphere安装mysql8.4.0
背景 KubeSphere 是在 Kubernetes 之上构建的以应用为中心的多租户容器平台,完全开源,提供全栈的 IT 自动化运维的能力,简化企业的 DevOps 工作流。KubeSphere 提供了运维友好的向导式操作界面,帮助企业快速构建一个强大和功能丰富的容器云平台。 安装组件前提&am…...
SpringBoot项目热部署-devtools
DevTools 会使用两个类加载器(一个用于加载不变的类,一个用于加载可能会变化的类),每次重启只重新加载管理变化的类的加载器,因此会快很多 1.导入依赖 <dependency> <groupId>org.springframework.boot&l…...
从MySQL到OceanBase离线数据迁移的实践
本文作者:玉璁,OceanBase 生态产品技术专家。工作十余年,一直在基础架构与中间件领域从事研发工作。现负责OceanBase离线导数产品工具的研发工作,致力于为 OceanBase 建设一套完善的生态工具体系。 背景介绍 在互联网与云数据库技…...
ifconfig 和 ip addr
1. 工具所属套件 ifconfig:属于较老的 net-tools 套件。曾是 Unix 和 Linux 系统上广泛使用的工具。ip addr:属于较新的 iproute2 套件。它取代了 ifconfig,并逐渐成为现代 Linux 系统上更常用的工具。 2. 功能覆盖范围 ifconfigÿ…...
NCCL报错
1、报错信息: raise RuntimeError("Distributed package doesnt have NCCL " "built in") RuntimeError: Distributed package doesnt have NCCL built in 2、报错原因: windows系统不支持nccl,采用gloo; …...
域7:安全运营 第16章 安全运营管理
第七域包括 16、17、18、19 章。 第七域所涵盖的广泛知识点,与我们的安全运营工作之间存在着高度的契合性。这些知识点不仅为我们的安全运营提供了有力的理论支撑,还使得SOC(安全运营中心)在日常运作中能够更加高效地发挥作用。通…...
线程同步:确保多线程程序的安全与高效!
全文目录: 开篇语前序前言第一部分:线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分:synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...
DAY 47
三、通道注意力 3.1 通道注意力的定义 # 新增:通道注意力模块(SE模块) class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...
【算法训练营Day07】字符串part1
文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接:344. 反转字符串 双指针法,两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...
WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)
一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解,适合用作学习或写简历项目背景说明。 🧠 一、概念简介:Solidity 合约开发 Solidity 是一种专门为 以太坊(Ethereum)平台编写智能合约的高级编…...
CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...
3403. 从盒子中找出字典序最大的字符串 I
3403. 从盒子中找出字典序最大的字符串 I 题目链接:3403. 从盒子中找出字典序最大的字符串 I 代码如下: class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...
全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec? IPsec VPN 5.1 IPsec传输模式(Transport Mode) 5.2 IPsec隧道模式(Tunne…...
均衡后的SNRSINR
本文主要摘自参考文献中的前两篇,相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程,其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt 根发送天线, n r n_r nr 根接收天线的 MIMO 系…...
免费数学几何作图web平台
光锐软件免费数学工具,maths,数学制图,数学作图,几何作图,几何,AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...
TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?
在工业自动化持续演进的今天,通信网络的角色正变得愈发关键。 2025年6月6日,为期三天的华南国际工业博览会在深圳国际会展中心(宝安)圆满落幕。作为国内工业通信领域的技术型企业,光路科技(Fiberroad&…...
