layui table 重写导出Excel 复杂表头

 效果如上,代码如下

layui.extend({
        excel:basePath+'/js/layui_exts/excel'
    });

layui.use(['excel'],function(){
    var excel = layui.excel;
});

var data = [

                    {id: 'ID', username: 'wang0', age: '', sex: '', score: '100', classify: ''},
                    {id: 'id', username: 'wang1', age: '1', sex: '2', score: '绉垎', classify: '一年级'},
                    {id: 1, username: 'wang2', age: 10, sex: '2', score: 100, classify: '二年级'},
                    {id: 1, username: 'wang3', age: 10, sex: '3', score: 100, classify: '三年级'},
                    {id: 1, username: 'wang4', age: 10, sex: '4', score: 100, classify: '四年级'},
                    {id: 1, username: 'wang5', age: 10, sex: '5', score: 100, classify: '五年级'},
                    {id: 1, username: 'wang6', age: 10, sex: '6', score: 100, classify: '六年级'},
                    {id: 1, username: 'wang7', age: 10, sex: '7', score: 100, classify: '七年级'},
                    {id: 1, username: 'wang8', age: 10, sex: '8', score: 100, classify: '八年级'},
                ]
                // 1. 合并 列
                var mergeConf = excel.makeMergeConfig([
                    ['B1', 'F1'],['A1','A2'],
                    ['B2', 'D2'],
                    ['E2', 'F2'],
                ])
                // 2. 列宽
                var colConf = excel.makeColConfig({
                    'B': 150,
                    'F': 200
                }, 80)
                // 3.
                var rowConf = excel.makeRowConfig({
                    1: 40,
                    3: 30
                }, 20)
                excel.exportExcel({
                    sheet1: data,
                    sheet2: data
                }, '测试.xlsx', 'xlsx', {
                    extend: {
                        sheet1: {
                            '!merges': mergeConf
                            , '!cols': colConf
                            , '!rows': rowConf
                        }
                    }
                })

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
layui table 中,可以通过使用 table.exportFile() 方法来实现导出表格数据。如果需要自定义导出内容,可以通过以下步骤实现: 1. 定义一个导出按钮,可以使用 layui 中的 button 组件。 ```html <button class="layui-btn layui-btn-sm" id="exportBtn">导出</button> ``` 2. 给按钮绑定点击事件,在点击事件中获取需要导出的数据,并进行处理。 ```javascript // 获取需要导出的数据 var data = table.cache.tableId; // 处理导出数据 var exportData = []; layui.each(data, function(index, item){ // 自定义处理逻辑 exportData.push({ id: item.id, name: item.name, age: item.age }); }); // 导出数据 table.exportFile(['ID', '姓名', '年龄'], exportData, 'xls'); ``` 在这里,我们可以通过对原始数据进行处理,生成需要导出的数据。这里的处理逻辑可以根据具体需求进行自定义。 3. 将处理后的数据导出Excel 文件,可以使用 table.exportFile() 方法。 ```javascript table.exportFile(['ID', '姓名', '年龄'], exportData, 'xls'); ``` 在这里,我们可以指定导出的字段名和文件类型。上述代码中,我们导出了一个名为“tableId”的表格数据,并且导出的文件类型为“xls”。 完整代码示例: ```html <button class="layui-btn layui-btn-sm" id="exportBtn">导出</button> <script> layui.use('table', function(){ var table = layui.table; // 绑定导出按钮点击事件 $('#exportBtn').on('click', function(){ // 获取需要导出的数据 var data = table.cache.tableId; // 处理导出数据 var exportData = []; layui.each(data, function(index, item){ // 自定义处理逻辑 exportData.push({ id: item.id, name: item.name, age: item.age }); }); // 导出数据 table.exportFile(['ID', '姓名', '年龄'], exportData, 'xls'); }); }); </script> ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值