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
                            }
                        }
                    })
                })

如果有多个列要合并,讲讲思路

这个时候一个temp数组就不够用了,需要多个数组,把这些数组放到一个对象里面,通过循环依次添加。代码基本还跟上面一样。

var letterMerge = { A: [], B: [], C: [], D: [], E: [] };//要合并的列

然后再创建个function循环添加,把上面代码中的temp.push('A' + (i+1)) 替换成 pushArr(i + 1)

  					 //通过循环依次添加进去
  					 //i:下标
                    function pushArr(i) {
                        for (var key in letterMerge) {
                            letterMerge[key].push(`${key}${i}`)
                            if (letterMerge[key].length == 2) {
                                mergeConfigArr.push(letterMerge[key])
                                letterMerge[key]=[]
                            }
                        }
                    }

如果想要对某一列的数据求和。附完整代码

合并单元格应该只保留一行数据,但是事实上被合并的单元格数据仍然存在,只是被隐藏了。用sum公式算出来的数据不对,比预计的多。所以想要准确的求和,需要只保留合并行的第一行,其他数据设置为0。以下是完整的代码

  $.get('/Order/GetOrderListByExportFile', { startTime, endTime, deviceCode, phoneNum, orderNo, merchantName, limit: 0, page: 0 },
                function (data) {
                    var head = { OrderNo: '订单号', Amount: '金额', PhoneNum:'手机号码',DeviceCode: '设备码', PayType: '支付方式', CreateTime: '创建时间', Name: '商品名称', Num: '数量', Floor: '所在层', Money: '售价' }
                    data.data.unshift(head);
                    data = data.data
                    //通过循环依次添加进去
                    function pushArr(i) {
                        for (var key in letterMerge) {
                            letterMerge[key].push(`${key}${i}`)
                            if (letterMerge[key].length == 2) {
                                mergeConfigArr.push(letterMerge[key])
                                letterMerge[key]=[]
                            }
                        }
                    }
                    var mergeConfigArr = [], letterMerge = { A: [], B: [], C: [], D: [], E: [] };//要添加的列
                    data.forEach((item, i) => {
                        if (!data[i + 1]) {//如果到最后一个了 直接返回
                            if (letterMerge.A.length == 1) {//如果已经有记录了
                                pushArr(i + 1);
                                item.Amount = 0
                            }
                            return
                        }
                        var previousOrder;
                        if (i !== 0) {
                            previousOrder = data[i - 1].OrderNo
                        }
                        var nextOrder = data[i + 1]['OrderNo'], thisOrder = item['OrderNo'];
                        if (thisOrder == previousOrder) {
                            item.Amount=0
                        }
                        if (thisOrder == nextOrder) {//如果跟下一行一样的订单号

                            if (letterMerge.A.length == 0) {//为空添加进去,否则什么也不干
                                pushArr(i + 1)
                            }
                        } else {//跟下一行不一样
                            if (letterMerge.A.length == 1) {//如果已经有记录了
                                pushArr(i + 1)
                            }
                        }
                    })
					//把需要求和的列的属性设置为数值
                    data = LAY_EXCEL.filterExportData(data, {
                        OrderNo: 'OrderNo',
                        Amount: function (value, line, data) {
                            return {
                                v: value,
                                t: 'n'
                            }
                        },
                        PhoneNum: 'PhoneNum',
                        DeviceCode: 'DeviceCode',
                        PayType: 'PayType',
                        CreateTime: 'CreateTime',
                        Name: 'Name',
                        Num: 'Num',
                        Floor: 'Floor',
                        Money:'Money'
                    })
                    data.push({
                        OrderNo: '合计',
                        Amount: { t: 'n', f: `SUM(B2:B${data.length})` },
                    });
                    var mergeConf = LAY_EXCEL.makeMergeConfig(mergeConfigArr);
                    var colConf = LAY_EXCEL.makeColConfig({
                        'A': 180,
                        'E': 120,
                        'G':120
                    }, 80);
                    //列宽
                     LAY_EXCEL.setExportCellStyle(data, 'A1:I'+data.length, {
                        s: {
                            alignment: {
                                horizontal: 'center',
                                vertical: 'center'
                            }
                        }
                    })
                    //居中
                    LAY_EXCEL.exportExcel(data, '订单列表.xlsx', 'xlsx', {
                        extend: {
                            // extend 中可以指定某个 sheet 的属性,如果不指定 sheet 则所有 sheet 套用同一套属性
                            sheet1: {
                                // 以下配置仅 sheet1 有效
                                '!merges': mergeConf,
                                '!cols': colConf,
                            }
                        }
                    })
                })
  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值