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

先看效果

初始化：

JSON格式化：

生成表格-方式1 ：

生成表格-方式2 ：

Excel导出

需要行求和、列求和功能的查看 JSON格式化动态生成表格表格转置行列转换 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="初始化" onclick="Init()" /><input type="button" value="JSON格式化" onclick="Jsonformat()" /><input type="button" value="生成表-方式1" onclick="Create1()" /><input type="button" value="生成表-方式2" onclick="Create2()" /><input type="button" value="导出Excel" onclick="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>

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

vue 渲染JSON数据动态生成表格组件
vue 通过渲染JSON数据动态生成表头及对应表格内容组件 <template><div id="viewDialog"><el-button typ ...
jquery动态生成SKU表格
sku的概念 SKU=Stock Keeping Unit(库存量单位).即库存进出计量的基本单元,可以是以件,盒,托盘等为单位.SKU这是对于大型连锁超市DC(配送中心)物流管理的一个必要的方法.现 ...
通过JS代码动态生成HTML表格(Table),Input框,Button按钮.并且通过Input框的值进行查询动态生成数据填写在指定的表格里
本人公众号上线啦!!! 公众号与博客名一样:没有腹肌的程序猿公众号文章类型:工作上所遇到的需求实现方案分享. 此外也会提供一些数据集供大家使用.(这个还在规划中,毕竟打工人时间挺紧的,哈哈哈哈) 到 ...
.net core将URL请求格式化为XML或JSON(网站动态生成sitemap.xml)
.net core将URL请求格式化为XML或JSON(网站动态生成sitemap.xml) 首先设置 Startup.cs 文件配置 ConfigureServices services.AddM ...
highcharts ajax 数据格式,Highcharts ajax获取json对象动态生成报表生成 .
最近做个项目,项目经理想做一个统计报表,在网上查看些资料就选用Highchars 这里和大家分享下使用心得. 重点说明此代码是针对一个报表显示多个项对比显示. 直接贴代码:web端 $(documen ...
Java-BufferedImage动态生成一个表格图片
需求:一个word模板,里边有一个表格,需要根据需求动态填充数据,需要转成pdf,但是我发现转成pdf的方式并不方便,想着还不如将动态的部分生成图片,然后由前端整合其他部分用于展示,也满足了需求. w ...
js动态生成html表格
刚在论坛上面逛的时候看到有人问html表格怎么动态生成,我回了一下发现有好多小伙伴追问- - 看来还是有很多人不会的啊,于是决定写个博来解救万千小伙伴于水火之中(mdzz) 首先我们要在html里面有 ...
POI利用word模板动态生成word报表以及动态生成word表格
目录核心依赖动态表格测试类工具类动态数据测试类工具类核心依赖 <dependency><groupId>org.apache.poi</groupId&g ...
jsp页面根据json数据动态生成table
根据需求由于不同的表要在同一个jsp展示,点击某个表名便显示某张表内容,对于java后台传给jsp页面的json形式的数据是怎么动态生成table的呢? 找了好久,终于找到某位前辈的答案,在此表示衷心 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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