其他分享
首页 > 其他分享> > JSON格式化 动态生成表格 表格转置 行列转换 Excel导出

JSON格式化 动态生成表格 表格转置 行列转换 Excel导出

作者:互联网

先看效果

初始化:

 

JSON格式化 :

生成表格-方式1 :

生成表格-方式2 :

Excel导出

代码如下: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style type="text/css">
        body
        {
            text-align: center;
        }
        
        div
        {
            margin: 0 auto;
            width: 600px;
        }
        
        table
        {
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
        }
        
        table td, table th
        {
            border: 1px solid #cad9ea;
            color: #666;
            height: 30px;
        }
        
        table thead th
        {
            background-color: #CCE8EB;
            width: 100px;
        }
        
        table tr:nth-child(odd)
        {
            background: #fff;
        }
        
        table tr:nth-child(even)
        {
            background: #F5FAFA;
        }
    </style>
</head>
<body>
    <div>
        <input type="button" value="初始化" οnclick="Init()" />
        <input type="button" value="JSON格式化" οnclick="Jsonformat()" />
        <input type="button" value="生成表-方式1" οnclick="Create1()" />
        <input type="button" value="生成表-方式2" οnclick="Create2()" />
        <input type="button" value="导出Excel" οnclick="Export()" />
        <br />
        <textarea id="jsonStr" style="width: 600px; height: 500px;">[{"指标":"指标","组织1":"组织1","组织2":"组织2","组织3":"组织3"},{"指标":"指标1","组织1":"1","组织2":"21","组织3":"31"},{"指标":"指标2","组织1":"2","组织2":"22","组织3":"32"},{"指标":"指标3","组织1":"3","组织2":"23","组织3":"33"},{"指标":"指标4","组织1":"4","组织2":"24","组织3":"34"}]</textarea>
    </div>
    <br />
    <table id="tbinfo">
        <thead>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script type="text/javascript">
        var tbinfo = [];
        var tbinfo2 = [];
        function Init() {
            $("#jsonStr").val('[{"指标":"指标","组织1":"组织1","组织2":"组织2","组织3":"组织3"},{"指标":"指标1","组织1":"1","组织2":"21","组织3":"31"},{"指标":"指标2","组织1":"2","组织2":"22","组织3":"32"},{"指标":"指标3","组织1":"3","组织2":"23","组织3":"33"},{"指标":"指标4","组织1":"4","组织2":"24","组织3":"34"}]');
            $("#tbinfo thead").html("");
            $("#tbinfo tbody").html("");
        }

        function Jsonformat() {
            try {
                str = $("#jsonStr").val();
                tbinfo = JSON.parse(str);
                $("#jsonStr").val(JSON.stringify(tbinfo, null, '\t'));

            } catch (e) {
                alert("json格式不正确");
                return false;
            }
        }

        function Create1() {

            try {
                str = $("#jsonStr").val();
                tbinfo = JSON.parse(str);
            } catch (e) {
                alert("json格式不正确");
                return false;
            }

            var thead = "";
            var cols = [];
            var tbody = "";
            $.each(tbinfo, function (i, n) {
                if (i == 0) {
                    cols = Object.keys(n);
                    thead = thead + "<tr>";
                    for (var i = 0; i < cols.length; i++) {
                        thead = thead + "<th>" + n[cols[i]] + "</th>";
                    }
                    thead = thead + "</tr>";
                    $("#tbinfo thead").html(thead);
                } else {
                    tbody = tbody + "<tr>";
                    for (var i = 0; i < cols.length; i++) {
                        tbody = tbody + "<td>" + n[cols[i]] + "</td>";
                    }
                    tbody = tbody + "</tr>";
                }
            });
            $("#tbinfo tbody").html(tbody);
        }


        function Create2() {

            try {
                str = $("#jsonStr").val();
                tbinfo = JSON.parse(str);
            } catch (e) {
                alert("json格式不正确");
                return false;
            }

            tbinfo2 = [];
            var cols = Object.keys(tbinfo[0]);
            for (var i = 0; i < cols.length; i++) {
                var tr = {};
                $.each(tbinfo, function (index, n) {
                    tr[index] = n[cols[i]];
                });
                tbinfo2.push(tr);
            }

            var thead = "";
            var cols = [];
            var tbody = "";
            $.each(tbinfo2, function (i, n) {
                if (i == 0) {
                    cols = Object.keys(n);
                    thead = thead + "<tr>";
                    for (var i = 0; i < cols.length; i++) {
                        thead = thead + "<th>" + n[cols[i]] + "</th>";
                    }
                    thead = thead + "</tr>";
                    $("#tbinfo thead").html(thead);
                } else {
                    tbody = tbody + "<tr>";
                    for (var i = 0; i < cols.length; i++) {
                        tbody = tbody + "<td>" + n[cols[i]] + "</td>";
                    }
                    tbody = tbody + "</tr>";
                }
            });
            $("#tbinfo tbody").html(tbody);

        }

        function Export() {
            if ($("#tbinfo tbody tr").size() == 0) {
                alert("无数据");
            } else {
                tableToExcel("tbinfo", "测试");
            }
        }

        function base64(content) {
            return window.btoa(unescape(encodeURIComponent(content)));
        }

        function tableToExcel(tableID, fileName) {
            var excelContent = $("#" + tableID).html();
            var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";
            excelFile += "<head><meta charset='utf-8'><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>sheet1</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head>";
            excelFile += "<body><table width='10%'  border='1'>";
            excelFile += excelContent;
            excelFile += "</table></body>";
            excelFile += "</html>";
            var link = "data:application/vnd.ms-excel;base64," + base64(excelFile);
            var a = document.createElement("a");
            a.download = fileName + ".xls";
            a.href = link;
            a.click();
        }
    </script>
</body>
</html>

 

 

标签:tbinfo,表格,转置,组织,Excel,tbody,cols,var,thead
来源: https://blog.csdn.net/lw112190/article/details/106636515