layui导出表格二级表头 控制导出的边框字体格子大小颜色

最新推荐文章于 2023-07-26 10:41:57 发布
最新推荐文章于 2023-07-26 10:41:57 发布
阅读量2.5k 收藏 5
点赞数 2
分类专栏： Layui 多级表头
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44601948/article/details/99832131
版权

需要引入拓展插件excel 市场拓展插件找得到

layui.config({
            base: '${pageContext.request.contextPath}/admin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'form', 'laydate', 'table', 'element', 'formSelects', 'excel', 'upload'], function () {
            var $ = layui.$,
                form = layui.form,
                laydate = layui.laydate,
                table = layui.table,
                element = layui.element,
                formSelects = layui.formSelects,
                excel = layui.excel,
                upload = layui.upload;
                })


 //第一张表格对象
            tableObj = table.render({
                elem: '#data_table',
                title: '资源投入明细表',
                cols: [
                    [{field: 'branchlr',title: '编码',align: 'center',sort: true,rowspan: 3,width: 100,},
                    {field: 'name',title: '机构',align: 'center',rowspan: 3,width: 150,},
                    {title: '业务发展',align: 'center',colspan: 2,width: 100},
                    {align: 'center',title: '队伍建设',colspan: 2}, 
                    {align: 'center',title: '基础管理',colspan: 2}, 
                    {align: 'center',title: '运营费用',colspan: 2,totalRow:true},
                    {align: 'center',title: '资产费用',colspan: 2,totalRow:true},
                    {align: 'center',title: '行政办公费用',colspan: 2,totalRow:true},
                    {align: 'center',title: '其他',colspan: 2},
                    {align: 'center',title: '合计',colspan: 2}],
                    [{field: 'VAL01',title: '金额',align: 'center',sort: true,width: 100,totalRow:true},
                    {field: 'ProVAL01',title: '占比',align: 'center',sort: true,width: 100}, 
                    {field: 'VAL02',title: '金额',align: 'center',sort: true,width: 100,totalRow:true}, 
                    {field: 'ProVAL02',title: '占比',align: 'center',sort: true,width: 100},
                    {field: 'VAL03',title: '金额',align: 'center',sort: true,width: 100,totalRow:true},
                    {field: 'ProVAL03',title: '占比',align: 'center',sort: true,width: 100}, 
                    {field: 'VAL04',title: '金额',align: 'center',sort: true,width: 100,totalRow:true},
                    {field: 'ProVAL04',title: '占比',align: 'center',sort: true,width: 100},
                    {field: 'VAL05',title: '金额',align: 'center',sort: true,width: 100,totalRow:true},
                    {field: 'ProVAL05',title: '占比',align: 'center',sort: true,width: 100},
                    {field: 'VAL06',title: '金额',align: 'center',sort: true,width: 100,totalRow:true},
                    {field: 'ProVAL06',title: '占比',align: 'center',sort: true,width: 100},
                    {field: 'VAL07',title: '金额',align: 'center',sort: true,width: 100,totalRow:true},
                    {field: 'ProVAL07',title: '占比',align: 'center',sort: true,width: 100},
                    {field: 'TotalVAL',title: '金额',align: 'center',sort: true,width: 100,totalRow:true}, 
                    {field: 'ProTotalVAL',title: '占比',align: 'center',sort: true,width: 100}]
                ],
                toolbar: '#toolbar', //toolbar: '#toolbar' //指向自定义工具栏模板选择器
                cellMinWidth: 100,
                defaultToolbar: ['exports'], //自由配置头部工具栏右侧的图标
                totalRow: false, //是否开启合计行区域
                page: true, //开启分页（默认：false）
                limit: 50, //每页显示的条数（默认：10）。值务必对应 limits 参数的选项。
                limits: [50, 100, 200, 1000], //每页条数的选择项
                skin: 'row',
                data: [],
                even: true //true/false	若不开启隔行背景，不设置该参数即可
            });



            //  第一张表格对象头工具栏事件
            table.on('toolbar(data_table)', function (obj) {
                switch (obj.event) {
                    case 'searchData_evn':   // 查询数据
                        searchData_fun("0");
                        break;
                    case 'exportsData_evn':   // 导出数据
                        exportsData_fun("0");
                        break;
                };
            });

// 导出表格函数 第一张表 
            function exportsData_fun() {
                var tableDate=table.cache['data_table']
                if (tableDate==null || tableDate.length==0){
                    layer.msg("当前无数据，不允许导出");
                    return;
                }
                // 报表名称
                var fileName = '测试表'
                // 模板 
                var public_template={
                    'branchlr': '',
                    'name': '',
                    'v01': '','v02': '','v03': '','v04': '','v05': '','v06': '', 'v07': '','v08': '','v09': '','v10': '',
                    'v11': '','v12': '','v13': '','v14': '','v15': '','v16': ''
                }
                //Excel内容   多级表头第一表头
                var firstLine=deepCopy(public_template)
                firstLine["branchlr"]="编码"
                firstLine["name"]="机构"
                firstLine["v01"]="业务发展"
                firstLine["v02"]="占比"
                firstLine["v03"]="队伍建设"
                firstLine["v04"]="占比"
                firstLine["v05"]="基础管理"
                firstLine["v06"]="占比"
                firstLine["v07"]="运营费用"
                firstLine["v08"]="占比"
                firstLine["v09"]="资产费用"
                firstLine["v10"]="占比"
                firstLine["v11"]="行政办公费用"
                firstLine["v12"]="占比"
                firstLine["v13"]="其他"
                firstLine["v14"]="占比"
                firstLine["v15"]="合计"
                firstLine["v16"]="占比"
                 //Excel内容   多级表头第二表头
                var secondLine=deepCopy(public_template)
                secondLine["branchlr"]="编码"
                secondLine["name"]="机构"
                secondLine["v01"]="金额"
                secondLine["v02"]="占比"
                secondLine["v03"]="金额"
                secondLine["v04"]="占比"
                secondLine["v05"]="金额"
                secondLine["v06"]="占比"
                secondLine["v07"]="金额"
                secondLine["v08"]="占比"
                secondLine["v09"]="金额"
                secondLine["v10"]="占比"
                secondLine["v11"]="金额"
                secondLine["v12"]="占比"
                secondLine["v13"]="金额"
                secondLine["v14"]="占比"
                secondLine["v15"]="金额"
                secondLine["v16"]="占比"
                var exportData = []  // 导出的数据
                for (var i = 0; i < tableDate.length; i++) {
                    var list = {
                    	'branchlr': tableDate[i].branchlr,
                    	'name': tableDate[i].name,
                    	'v01': tableDate[i].VAL01,
                    	'v02': tableDate[i].ProVAL01,
                    	'v03': tableDate[i].VAL02,
                    	'v04': tableDate[i].ProVAL02,
                    	'v05': tableDate[i].VAL03,
                        'v06': tableDate[i].ProVAL03,
                    	'v07': tableDate[i].VAL04,
                    	'v08': tableDate[i].ProVAL04,
                    	'v09': tableDate[i].VAL05,
                    	'v10': tableDate[i].ProVAL05,
                        'v11': tableDate[i].VAL06,
                    	'v12': tableDate[i].ProVAL06,
                        'v13': tableDate[i].VAL07,
                    	'v14': tableDate[i].ProVAL07,
                    	'v15': tableDate[i].TotalVAL,
                    	'v16': tableDate[i].ProTotalVAL,
                    };
                    exportData.push(list);
                }
                exportData.unshift(firstLine,secondLine);
                 // 加边框范围
                 var round="A1:R" + exportData.length  

                // 边框加粗
                excel.setExportCellStyle(exportData,round,{
                    s:{
                        fill: { patternType:"solid", bgColor: { indexed: 64 }, fgColor: { rgb: "FFFFFF" } },
                        border:{
                            top:{ style: "thin" },
                            bottom:{ style: "thin"},
                            left:{ style: "thin"},
                            right:{ style: "thin"}
                        }
                    }
                })

                // Excel内容  表头样式
                excel.setExportCellStyle(exportData,'A1:R2',{
                    s:{
                        alignment: {
                            horizontal: 'center',
                            vertical: 'center'
                        }
                    }
                })
                //  合并多级表头
                var mergeConf = excel.makeMergeConfig([
                    ['A1', 'A2'],
                    ['B1', 'B2'],
                    ['C1', 'D1'],
                    ['E1', 'F1'],
                    ['G1', 'H1'],
                    ['I1', 'J1'],
                    ['K1', 'L1'],
                    ['M1', 'N1'],
                    ['O1', 'P1'],
                    ['Q1', 'R1']
                ]);

                // 列单元格撑大
                var colConf = excel.makeColConfig({
                    'B':100
                }, 80);

                excel.exportExcel({
                    sheet1: exportData
                }, fileName + '.xlsx', 'xlsx', {
                    extend: {
                        sheet1: {
                            '!merges': mergeConf,
                            '!cols': colConf
                        }
                    }
                });
            }

效果如下
在这里插入图片描述
在这里插入图片描述

使用xlsx、xlsx-style导出表格添加背景色；合并单元格部分样式缺失问题解决
m0_51431448的博客
01-30 2276
我这个是直接通过传入dom生产的sheet页，也可以通过数据生成sheet页，xlsx都有对应的方法，其实不影响我们修改样式。主要关注addRangeBorder(给合并行列赋值样式)、setExcelStyle(设置导出Excel样式)这两个方法。由于上次写的修改样式只关注了单元格的宽度，并没有设置颜色以及没关注到合并的单元格部分样式没设置上等问题，所以这篇来说下。我们通过xlsx可以通过dom元素、或者数据来生产sheet页，然后我们修改样式就操作对应的sheet页就可以了。
C# 生成带二维表头的Excel表
qq_42391680的博客
07-19 732
这里用到第三方库Microsoft.Office.Interop.Excel，添加该引用后，鼠标右键该引用查看属性，将嵌入互操作类型true改为fase，电脑上需要下载office2013或者更高版本 private void btnliving_Click(object sender, EventArgs e) { DataTabletoExcel1(dt, DateTime.Now.Ticks + ".xlsx");
layui中table表头样式修改方法
10-18
今天小编就为大家分享一篇layui中table表头样式修改方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui导出多表头文件
qq_41937438的博客
02-17 1403
js代码 /** 主页模块 */ layui.define([“form”, “element”, “laydate”, “table”,], function(exports) { var foo = { /** * 初始化函数 */ init: function(){ this.form = layui.form; this.element = layui...
layui table组件宽度设置
热门推荐
qq_24258617的博客
12-03 1万+
开源框架Pear Admin，LayUI版本2.7.0.rc-5。 layui的table组件-基础参数-cellMinWidth可以设置最小宽度，表头参数可以设置width，以上可以适用大部分表格展示。 如今遇到一个需求，需要表格内容自适应，由单元格撑开宽度，找了api没有发现实现参数。 度娘未果，以下代码是自己实现的，如有问题请指正。 逻辑简单粗暴，关键参数（不是layui指定的参数，但是可以识别，layui指定设置数字和百分比） cellMinWidth: 'auto' 然后根据表格内.
layui自定义打印
星银色飞行船的博客
03-29 1万+
目录 自带的打印功能的实现 自定义打印内容的实现 自定义打印table的实现 一、 自带的打印功能的实现 在layui官网下载新的layui的js文件，有些旧版本的不支持 在table数据赋值时，添加如下参数 toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板 二、 自定义打印内容的实现 三、 自定义打印table的实现 ......
layui导出excel，自定义宽高
weixin_54797539的博客
02-02 1027
layui导出excel，自定义宽高
xlsx-js-style导出Excel，带样式合并单元格边框显示不全和动态插入表头 解决
最新发布
09-27
纯JS导出Excel 处理导出Excel如果是合并单元格了无法显示边框问题 处理插入表头问题 导出Excel样式可自定义
C#导出word word导出带样式生成word(二)
我笔记
09-22 2567
本文中用C#来操作Word，包括： 创建Word； 插入文字，选择文字，编辑文字的字号、粗细、颜色、下划线等； 设置段落的首行缩进、行距； 设置页面页边距和纸张大小； 设置页眉、页码； 插入图片，设置图片宽高以及给图片添加标题； 插入表格，格式化表格，往表格中插入数据； 保存Word，打印Word； 重新打开Word等。 Visual studio版本：Visual Studio 2012（2010应该也可以） 准备工作： /* 1. 添加引用COM里面的 Microso
Markdown (CSDN) MD编辑器（四）- 漂亮表格(表格背景色、跨行、跨列)
m0_67402731的博客
08-02 1976
Markdown是一种轻量级标记语言，排版语法简洁，让人们更多地关注内容本身而非排版。它使用易读易写的纯文本格式编写文档，可与HTML混编，可导出HTML、PDF以及本身的.md格式的文件。因简洁、高效、易读、易写，Markdown被大量使用，如Github、Wikipedia、简书等。...
Excel：快速在每个单元格后面添加相同的内容
Bule_daze的博客
08-14 6040
选择所有的单元格 ➡︎ 右键 ➡︎ 设置单元格格式 ➡︎ 自定义 - “@xxx”
layui 导出 excel 表格
阅读之后，对你有帮助，那就点个赞再走吧
09-24 3959
前言 最近这个项目中，涉及到了导出excel表格这个功能，这个后台管理使用的是layui这个框架，大体来说还是很方便，节省了很多的开发时间。 看layui的官网社区论坛，很多人都说layui自带的导出功能，只能导出当前页面的数据。而且，部分的数据都是通过数据之间关联表查询出来的，用layui自带的导出数据会显示（Object），让人很头疼。 所以要用到插件，很简单，下面的网址，把文件下载。 ...
layui table数据表格 导出excel 格式化导出数据 支持复杂表头导出
qq_36636312的博客
08-12 1589
1，效果图 界面图 excel文件 2，代码 //工具类的插件引入 <script type="text/javascript" src="${ctx}/static/layui-v2.5.6/layui.js"></script> //触发按钮 <button type="button" onclick="toExcel()">导出结果</button> //表格样式 <div> <table id="fapztable"
layui动态表格导出复杂表头
努力的小玲子
01-19 2353
2021年1月19日 第一次导出动态表格复杂表头有点懵逼，一直百度都不符合要求，知道找到一篇文章终于解决我的问题。这边有个简单的文档可以看下：http://excel.wj2015.com/ 以下是我自己总结的解决办法(需下载excel.js文件)： 链接：https://pan.baidu.com/s/1VxjLtuphLTiAxUlNwYKnKA 提取码：gxqz 此为引用 创建者： songyinan 第一（动态表格）： 自定义表格（复杂表头） function initHeader(){
【Layui】导出表格，设置列宽
weixin_46580991的博客
07-26 1023
注意：导出xlsx表格设置列宽才能成功，xls设置无效的！
LayuiTable导出所有数据excel，无需修改后端代码,仅前端处理。
qq_32307773的博客
06-04 2276
layui table自带的导出功能仅导出单页的数据，搜索一番之后发现大部分都是通过另外发送ajax请求，让后端进行处理，或是生成excel下载链接，或是后端返回所有数据然后用table.exportFile导出。其实可以利用render，设置limit为总数量实现数据重新加载并导出。方法可行，并不推荐。
layui表格使用总结（表头表内容主体不对齐、多级表头等）
chenlim87的博客
08-23 1万+
近期项目使用的jQuery+JSP，前端组件使用了layui。涉及到了排序、合计、多级表头等问题。 layui表格有三种渲染方式，此文使用的是方法渲染。以下功能均是基于方法渲染。 一、排序 为某列排序，在table渲染时，首先要开启排序，然后添加initSort参数，并添加要排序的字段名： <table id="layTable" lay-filter="layTable"></table> table.render({ elem: '#layTable', d...
layui重写table的导出功能
doupengzp的博客
06-08 3317
目录 1.下载layui的源码 2.重写table.exportFile方法 2.1 下载excel插件 2.2layui.js中引入excel插件 2.3修改layui\src\lay\modules下的table.js文件 3.重新打包编译 3.1安装依赖 3.2全局安装gulp 以前的项目中前端用的layui，那会选layui就是那会觉得样式还挺好看的，而且基本上需要的组件都有，尤其是自带table的导出和打印功能，不过table的导出功能还有点不足之处，导出后的文件直接查看没什么.
Layui数据表格导出为Excel功能详解
资源摘要信息: "layui数据表格导出Excel插件是一个专门用于在使用layui前端框架开发的网页中实现数据表格导出为Excel文件的功能的JavaScript库。该插件可以将网页中的数据表格，无论其数据源来自于哪里，都可以通过...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值