zhaobao
/
scyf


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
							<!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">

            <button class="layui-btn" id="export"><i class="layui-icon layui-icon-download-circle"></i>导出</button>
            <table id="myTable"></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', 'tableX'], function () {
        var table = layui.table,
            soulTable = layui.soulTable;

        var myTable = table.render({
            elem: '#myTable'
            ,
            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: [[
                {type: 'numbers', title: '序号', rowspan: 3, fixed: 'left'},
                {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},
                {field: 'author', title: '作者', rowspan: 2, width: 165},
                {title: '2-2', colspan: 2}
            ], [
                {field: 'title', title: '诗词', width: 200, sort: true},
                {field: 'dynasty', title: '朝代', width: 100, sort: true},
                {field: 'content', title: '内容', width: 123},
                {field: 'type', title: '类型', width: 112}
            ]]
            ,
            excel: {filename: '复杂表头导出.xlsx'}
            ,
            done: function () {
                soulTable.render(this)
                // tableX.merges('datatable', [0]);  // 在done回调里面调用
            }
        });

        layui.$('#export').on('click', function () {
            soulTable.export(myTable)
        })
    });

</script>

</body>
</html>