zhaobao
/
scyf


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>可视化编辑</title>
    <link rel="stylesheet" href="../../../../assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="../css/soulTable.css"/>
</head>
<body>

<!-- 页面加载loading -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">

            <table id="myTable" lay-filter="test"></table>

        </div>
    </div>
</div>
<!-- js部分 -->
<script type="text/javascript" src="../../../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../../../assets/js/common.js?v=312"></script>

<script type="text/javascript" src="../../../../assets/libs/jquery/jquery-3.2.1.min.js"></script>


<script>
    layui.use(['form', 'table', 'soulTable'], function () {
        var table = layui.table,
            soulTable = layui.soulTable;
        var excel = layui.excel;

        var insTb = table.render({
            elem: '#myTable'
            ,toolbar: true
            ,defaultToolbar: ['filter', 'print',{ //自定义导出
                title: '导出'
                ,layEvent: 'LAYTABLE_EXPORT_EXCEL'
                ,icon: 'layui-icon-export'
            }]
            ,url: 'http://localhost:63342/aqpt/aqpt-old/src/main/resources/static/back/assets/module/layui-soul-table/demo/data-1.json'
            ,height: 500
            ,page: false
            ,cols: [[
                {title: '1-1', colspan: 3, align: 'center'},
                {title: '1-2', colspan: 2},
                {field: 'heat', title: '点赞数', width: 112, rowspan: 3, sort: true},
                {field: 'createTime', title: '录入时间', rowspan: 3, width: 165, fixed: 'right'}
            ], [
                {title: '2-1', colspan: 2},
                {merge:true,field: 'author', title: '作者', rowspan: 2, width: 165},
                {title: '2-2', colspan: 2}
            ], [
                {merge:true,field: 'title', title: '诗词', width: 200, sort: true},
                {merge:true,field: 'dynasty', title: '朝代', width: 100, sort: true},
                {merge:true,field: 'content', title: '内容', width: 123},
                {merge:true,field: 'type', title: '类型', width: 112}
            ]]
            // ,
            // excel: {
            //     filename: '复杂表头导出.xlsx', add: {
            //         top: {
            //             // data: [
            //             //     ['表头1-1'], //头部第一行数据，由于我设置了后面的数据merge了，就只写一个
            //             //     ['表头2-1', '', '', '表头2-2'] // 头部第二行数据, 中间的空数据是为了 merge 使用
            //             // ],
            //             // heights: [100, 50],
            //             merge: [['1,1', '1,5'], ['2,1', '2,5'], ['2,4', '2,8']]
            //         },
            //         bottom: {
            //             // data: [
            //             //     ['表尾1-1', '', '', '表尾1-2'], // 尾部第一行数据, 中间的空数据是为了 merge 使用
            //             //     ['表尾2-1'] //尾部第二行数据，由于我设置了后面的数据merge了，就只写一个
            //             // ],
            //             // heights: [50, 100],
            //             merge: [['1,1', '1,5'], ['2,1', '2,5'], ['2,4', '2,8']]
            //         }
            //     }
            // }
            ,
            done: function () {
                soulTable.render(this)
            }
        });


        //监听头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                //自定义头工具栏右侧图标 - 导出
                case 'LAYTABLE_EXPORT_EXCEL':
                    soulTable.export(insTb, {filename: '复杂表头导出.xlsx'},
                        {
                            mergeData: true,
                            dependKey:'title',
                            lineStyleConfig:[
                                {
                                    field: 'title',  // 字段名称
                                    type: '1',  // 字段设置类型 1=>直接设置样式属性, 2=> 根据数值类型设置属性
                                    style: {    // 样式属性
                                        bgColor: 'ffffff',
                                        color: '666666'
                                    }
                                },
                                {
                                    field: 'heat',  // 字段名称
                                    type: '2',  // 字段设置类型 1=>直接设置样式属性, 2=> 根据数值类型设置属性
                                    numericType: [
                                        {
                                            typeNumber: 0,
                                            style: {    // 样式属性
                                                bgColor: 'F3565D',
                                                color: '666666'
                                            }
                                        },
                                        {
                                            typeNumber: 3803,
                                            style: {    // 样式属性
                                                bgColor: 'FFA500',
                                                color: '666666'
                                            }
                                        },
                                        {
                                            typeNumber: 15,
                                            style: {    // 样式属性
                                                bgColor: 'dfba49',
                                                color: '666666'
                                            }
                                        }
                                    ],
                                }
                            ]
                        }
                    );
                    break;
            };
        });
        /**
         * by yutons
         * Array.from() 非常方便的将一个类数组的集合 ==》 数组，直接使用数组身上的方法。例如：常用的map，foreach…
         * 但是，问题来了，IE不识别Array.from这个方法。所以写了它兼容IE的写法。
         */
        if (!Array.from) {
            Array.from = function(el) {
                return Array.apply(this, el);
            }
        }
        //表格导出
        function exportFile(id) {
            //根据传入tableID获取表头
            var headers = $("div[lay-id=" + id + "] .layui-table-box table").get(0);
            var htrs = Array.from(headers.querySelectorAll('tr'));
            var titles = {};
            for (var j = 0; j < htrs.length; j++) {
                var hths = Array.from(htrs[j].querySelectorAll("th"));
                for (var i = 0; i < hths.length; i++) {
                    var clazz = hths[i].getAttributeNode('class').value;
                    // if (clazz != ' layui-table-col-special' && clazz != 'layui-hide') {
                        //排除居左、具有、隐藏字段
                        //修改:默认字段data-field+i,兼容部分数据表格中不存在data-field值的问题
                        titles['data-field' + i] = hths[i].innerText;
                    // }
                }
            }
            //根据传入tableID获取table内容
            var bodys = $("div[lay-id=" + id + "] .layui-table-box table").get(1);
            var btrs = Array.from(bodys.querySelectorAll("tr"))
            var bodysArr = new Array();
            for (var j = 0; j < btrs.length; j++) {
                var contents = {};
                var btds = Array.from(btrs[j].querySelectorAll("td"));
                for (var i = 0; i < btds.length; i++) {
                    for (var key in titles) {
                        //修改:默认字段data-field+i,兼容部分数据表格中不存在data-field值的问题
                        var field = 'data-field' + i;
                        if (field === key) {
                            //根据表头字段获取table内容字段
                            contents[field] = btds[i].innerText;
                        }
                    }
                }
                bodysArr.push(contents)
            }
            //将标题行置顶添加到数组
            bodysArr.unshift(titles);
            //导出excel
            console.log(excel)
            var mergeConf = excel.makeMergeConfig([
                ['A2', 'A10'],
                ['B3', 'B4'],
                ['C3', 'C4'],
                ['D5', 'D6'],
            ]);
            console.log(bodysArr)
            return false;
            excel.exportExcel({
                sheet1: bodysArr
            }, '用户表' + new Date().toLocaleString() + '.xlsx', 'xlsx', {
                extend: {
                    // 复杂表头合并[A1,E1][A2, D4]
                    '!merges': mergeConf
                }
            });
        }

        // var mergeConf = excel.makeMergeConfig([
        //     ['A1', 'E1'],
        //     ['A2', 'D4']
        // ]);
        // layui.$('#export').on('click', function() {
        //     soulTable.export(myTable, '测试导出复杂表头.xlsx');
        // })
    })
</script>

</body>
</html>