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

最新推荐文章于 2023-02-02 17:58:50 发布
最新推荐文章于 2023-02-02 17:58:50 发布
阅读量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
                        }
                    }
                });
            }

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

澜漾
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
layui中table表头样式修改方法
12-10
如下所示： layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' , url: '${ctx}/alarm/queryEventShowScatter' , even: true , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档 layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局 //
layui导出多表头文件
qq_41937438的博客
02-17 1357
js代码 /** 主页模块 */ layui.define([“form”, “element”, “laydate”, “table”,], function(exports) { var foo = { /** * 初始化函数 */ init: function(){ this.form = layui.form; this.element = layui...
layui自定义打印
星银色飞行船的博客
03-29 1万+
目录 自带的打印功能的实现 自定义打印内容的实现 自定义打印table的实现 一、 自带的打印功能的实现 在layui官网下载新的layui的js文件，有些旧版本的不支持 在table数据赋值时，添加如下参数 toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板 二、 自定义打印内容的实现 三、 自定义打印table的实现 ......
layui导出excel，自定义宽高
weixin_54797539的博客
02-02 943
layui导出excel，自定义宽高
Excel：快速在每个单元格后面添加相同的内容
Bule_daze的博客
08-14 5417
选择所有的单元格 ➡︎ 右键 ➡︎ 设置单元格格式 ➡︎ 自定义 - “@xxx”
layui数据表格导出Excel插件
07-20
layui数据表格导出Excel插件是一款为layui框架设计的实用工具，它允许用户方便地将layui数据表格中的数据导出到Excel文件中。layui是一款轻量级的前端UI框架，以其简洁、优雅的代码风格和丰富的组件库深受开发者喜爱...
复杂多表头excel表格的导出及布局，支持拓展
02-22
例如，对于一个销售报告，你可以将一级表头设为产品类别，二级表头设为月份，三级表头则为具体的产品名称。通过这种方式，我们可以快速地定位到某一类别的特定时间段内的销售数据。 要创建多级表头，可以先选定一级...
layui table设置某一行的字体颜色方法
10-16
示例中展示了如何在表格渲染完成后的`done`事件里调用`Layui_SetDataTableRowColor`函数来改变某一行的字体颜色。 ```javascript done: function(res, curr, count) { // 如果是异步请求数据方式，res即为你接口...
layui导出所有数据的例子
10-16
文章中提到的按钮通过JavaScript函数excl_rep()实现导出功能，该函数首先通过jQuery获取用户在界面上选择的汇总分类、一级分类、二级分类和品牌等参数。之后，这些参数会拼接成请求的URL，然后通过JavaScript的...
Excel导出、自定义表头、锁定首行、合并、字体、边框
07-21
本教程将深入探讨如何利用Excel进行高效的数据导出、自定义表头、锁定首行、单元格合并、设置字体以及添加边框，以增强数据的可读性和美观性。 首先，Excel导出是一个常用的功能，它允许我们将工作簿中的数据保存为...
layui 导出 excel 表格
阅读之后，对你有帮助，那就点个赞再走吧
09-24 3903
前言 最近这个项目中，涉及到了导出excel表格这个功能，这个后台管理使用的是layui这个框架，大体来说还是很方便，节省了很多的开发时间。 看layui的官网社区论坛，很多人都说layui自带的导出功能，只能导出当前页面的数据。而且，部分的数据都是通过数据之间关联表查询出来的，用layui自带的导出数据会显示（Object），让人很头疼。 所以要用到插件，很简单，下面的网址，把文件下载。 ...
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数据表格 导出excel 格式化导出数据 支持复杂表头导出
qq_36636312的博客
08-12 1517
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重写table的导出功能
doupengzp的博客
06-08 3202
目录 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的导出功能还有点不足之处，导出后的文件直接查看没什么.
EasyExcel导出Excel 自定义 表头颜色
xydxiong的博客
07-21 7166
EasyExcel导出Excel 自定义 设置 表头颜色、下拉框数据验证
layui 复杂表头多层表头的表格数据非后台导出excel
热门推荐
诗语待马
08-28 1万+
用过layui table的都了解，layui的表格自带导出功能，只要在属性toolbar里配置即可。 如果嫌toolbar里的导出按钮不够美观，layui也友好的提供了自行定义按钮后调用导出页面数据的方法，详见：[官方文档] `遗憾的`是该方法暂时并不支持对多层表头的导出。 而多层复杂表头在很多系统中都有体现，而若不想通过后台代码去做导出，只在前端页面上该如何做呢？
layui动态加载复杂表头，前端导出Excel格式数据。
kiritolr的博客
09-21 1670
动态生成header，此场景用于表头从数据库中读取便于后续更改表头字段。前端导出用是开源插件table2excel.js,此导出有局限性，只能导出doom元素中的本页的数据，如果是分页的数据不太适用。 返回二元数组，后台构建相应的数据格式： 前端处理返回的数据，push到一个空数组中就可以组成一个动态的多级表头。 var header= []; var header1= [ { title: "编号", type: "numbers", align: "center", width: 8
利用layui创建二级表头
weixin_44544859的博客
05-17 1万+
(作者：杨东升，撰写时间：2019.5.17) 一般情况下，使用一级表头已经够用了，但是，如果我想在一级表头的内容再进行细化的时候，一级表头显然不够用了，如图所示：出现了重复的单价、合计，但这两个单价合计放的数据是不一样的，无法知道这是具体的哪个单价合计，如果在换成xx单价xx合计的话，又会影响表格的美观，那怎么解决呢 当然是使用二级表头啦，你看使用二级表头之后，想表达的内容是不是展现的一清二楚...
layui导出excel表格方法
最新发布
11-18
以下是两种Layui导出Excel表格的方法： 1. 使用Layui官方自带的导出方法，可以导出任意数据表，但是不能自定义导出表名。示例代码如下： ```javascript table.exportFile(['名字','性别','年龄'], [ ['张三','男','20'], ['李四','女','18'], ['王五','女','19'] ], 'csv'); //默认导出 csv，也可以为：xls ``` 2. 使用Layui数据表格导出Excel插件，可以自定义导出表名。示例代码如下： ```javascript // 引入插件 layui.use(['excel'], function(){ var excel = layui.excel; // 导出Excel表格 var data = [ {name: '张三', sex: '男', age: 20}, {name: '李四', sex: '女', age: 18}, {name: '王五', sex: '女', age: 19} ]; excel.exportExcel({ sheet1: data }, '表格名.xlsx', 'xlsx'); }); ```
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值