IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> layui导出excel动态拆分单元格一个单元格显示多行数据合并单元格 -> 正文阅读

[JavaScript知识库]layui导出excel动态拆分单元格一个单元格显示多行数据合并单元格

需求如图
一个订单对应多个商品
首先说明是不能拆分单元格的,因为单元格是最小单位。只能通过合并单元格来实现。

实现思路:点击导出按钮,去请求后端数据。data数据如下:

[{OrderNo: 'No637829645038060996', Name: '营养快线', Num: 1, Floor: 1}
 {OrderNo: 'No637829644168104671', Name: '营养快线', Num: 1, Floor: 1}
 {OrderNo: 'No637829644168104671', Name: '营养快线', Num: 1, Floor: 1}
 {OrderNo: 'No637829640444687386', Name: '营养快线', Num: 1, Floor: 1}
 {OrderNo: 'No637829621299943451', Name: '营养快线', Num: 1, Floor: 1}
 {OrderNo: 'No637829582358522702', Name: '营养快线', Num: 1, Floor: 1}]

将相同OrderNo的数据合并,必须是上下相连着的。
使用组件:layui-excel,先去看这个组件的文档,才能看得懂代码,此组件不仅仅是layui,可以应用于各种项目。
核心代码如下:

   $.get('/Order/GetOrderListByExportFile', { startTime, endTime, deviceCode, phoneNum, orderNo, merchantName, limit: 0, page: 0 },
                function (data) {
                    data.data.unshift({ OrderNo: '订单号', Name: '商品名称', Num: '数量', Floor: '所在层' });
                    data = data.data
                    var mergeConfigArr = [], temp = [];
                    data.forEach((item, i) => {
                        if (!data[i + 1]) {//如果到最后一个了 直接返回
                            if (temp.length == 1) {//如果已经有记录了
                                temp.push('A' + (i + 1))//因为有表头所以i+1
                                mergeConfigArr.push(temp)
                                temp = []
                            }
                            return
                        }
                        var nextOrder = data[i + 1]['OrderNo'], thisOrder = item['OrderNo'];
                        if (thisOrder== nextOrder) {//如果跟下一行一样的订单号一样
                            if (temp.length == 0) {//如果记录为空 添加进去
                                temp.push('A' + (i+1))
                            }
                        } else {//跟下一行不一样
                            if (temp.length == 1) {//如果已经有记录了
                                temp.push('A' + (i+1))
                                mergeConfigArr.push(temp)
                                temp = []
                            }
                        }
                    })
                    var mergeConf = LAY_EXCEL.makeMergeConfig(mergeConfigArr);
                    LAY_EXCEL.exportExcel(data, '订单列表.xlsx', 'xlsx', {
                        extend: {
                            sheet1: {
                                '!merges': mergeConf
                            }
                        }
                    })
                })

明天更如果有多列要合并该怎么办。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-03-31 23:55:34  更:2022-03-31 23:56:41 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 4:47:59-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码