JSON格式化 动态生成表格 表格转置 行列转换 Excel导出 |
您所在的位置：网站首页 › 前端动态表格 › JSON格式化 动态生成表格 表格转置 行列转换 Excel导出 |
JSON格式化 动态生成表格 表格转置 行列转换 Excel导出
|
先看效果 初始化：
JSON格式化 ： 生成表格-方式1 ： 生成表格-方式2 ： Excel导出 需要行求和、列求和功能的查看 JSON格式化 动态生成表格 表格转置 行列转换 Excel导出 行求和 列求和 代码如下： 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; } [{"指标":"指标","组织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"}] 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 + ""; for (var i = 0; i < cols.length; i++) { thead = thead + "" + n[cols[i]] + ""; } thead = thead + ""; $("#tbinfo thead").html(thead); } else { tbody = tbody + ""; for (var i = 0; i < cols.length; i++) { tbody = tbody + "" + n[cols[i]] + ""; } tbody = tbody + ""; } }); $("#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 + ""; for (var i = 0; i < cols.length; i++) { thead = thead + "" + n[cols[i]] + ""; } thead = thead + ""; $("#tbinfo thead").html(thead); } else { tbody = tbody + ""; for (var i = 0; i < cols.length; i++) { tbody = tbody + "" + n[cols[i]] + ""; } tbody = tbody + ""; } }); $("#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 = ""; excelFile += ""; excelFile += ""; excelFile += excelContent; excelFile += ""; excelFile += ""; var link = "data:application/vnd.ms-excel;base64," + base64(excelFile); var a = document.createElement("a"); a.download = fileName + ".xls"; a.href = link; a.click(); }
|
【本文地址】
今日新闻 |
推荐新闻 |