使用js动态绘制报表
来源：互联网 发布：守望先锋吧被关 知乎 编辑：程序博客网 时间：2024/05/16 04:51
使用js动态绘制报表只要惠灵活运用JQuery的.find().each（）.attr().filter().remove().indexOf().after().append()的方法就好弄HTML<tr> <td> <table id="servertab" width="100%" border="1" cellpadding="1" cellspacing="0" style="border:solid 1px #000000; text-align:center;"> <thead> <tr> <td colspan="10" style="background: linear-gradient(#1818FC, #FFFFFF);">xxx服务器</td> </tr> <tr> <td rowspan="2" colspan="2">名称</td> <td colspan="3">CPU使用率</td> <td colspan="3">内存使用率</td> <td colspan="2">逻辑分区使用率</td> </tr> <tr> <td>最高值</td> <td>最高值时间</td> <td>平均值</td> <td>最高值</td> <td>最高值时间</td> <td>平均值</td> <td>分区名称</td> <td>分区使用率</td> </tr> </thead> <tbody> </tbody> </table> </td></tr><tr> <td colspan="5" style="line-height: 20px;text-align:left;"><h3>xxx运行指标</h3></td></tr><tr> <td> <table id="databasetab" width="100%" border="1" cellpadding="1" cellspacing="0" style="border:solid 1px #000000; text-align:center;"> <thead> <tr> <td colspan="3" style="background: linear-gradient(#1818FC, #FFFFFF);">数据库</td> <td colspan="5" style="background: linear-gradient(#1818FC, #FFFFFF);">会话数</td> </tr> <tr> <td>数据库名称</td> <td>表空间名称</td> <td>表空间使用率</td> <td>最大值</td> <td>最大值时间</td> <td>最小值</td> <td>最小值时间</td> <td>平均值</td> </tr> </thead> <tbody> </tbody> </table> </td></tr><tr> <td colspan="5" style="line-height: 20px;text-align:left;"><h3>xxx设备运行指标</h3></td></tr><tr> <td> <table id="jfdlhjtab" width="100%" border="1" cellpadding="1" cellspacing="0" style="border:solid 1px #000000; text-align:center;"> <thead> <tr> <td colspan="8" style="background: linear-gradient(#1818FC, #FFFFFF);">机房动力环境 </td> </tr> <tr> <td>名称</td> <td>参数</td> <td>设备名称</td> <td>最大值</td> <td>最大值时间</td> <td>最小值</td> <td>最小值时间</td> <td>平均值</td> </tr> <tbody> ${jfdlhjlist} </tbody> </table> </td></tr>js脚本//添加行function addrow(tab, col, nowTr) { if (col == 1) { var str = ''; if (tab.indexOf("server") >= 0) { if (serverrowindex) { } else { serverrowindex = 100; } str = servertrAdd.replace(new RegExp('@serverrowindex@', 'g'), serverrowindex + ""); addTr(tab, nowTr, str); serverrowindex = parseInt(serverrowindex) + 1; } else { if (tab.indexOf("database") >= 0) { if (databaserowindex) { } else { databaserowindex = 100; } str = databaseAdd.replace(new RegExp('@databaserowindex@', 'g'), databaserowindex + ""); addTr(tab, nowTr, str); databaserowindex = parseInt(databaserowindex) + 1; } else { if (tab.indexOf("jfdlhj") >= 0) { if (jfdlhjrowindex) { } else { jfdlhjrowindex = 100; } str = jfdlhjAdd.replace(new RegExp('@jfdlhjrowindex@', 'g'), jfdlhjrowindex + ""); addTr(tab, nowTr, str); jfdlhjrowindex = parseInt(jfdlhjrowindex) + 1; } } } } else { if (tab.indexOf("database") >= 0) { $(nowTr).parent().parent().find("input").each(function () { var field = $(this).attr('id'); if (field && field.indexOf("databasefieldName") >= 0) { aftername = $(this).attr('value'); } if (field && field.indexOf("databasefieldValue") >= 0) { afterid = $(this).attr('value'); } }) tr = '<tr><td style="width:30%;">'; tr = tr + '<input type="text" name="arys[@0@].fieldName" id="' + databaserowindex + 'databasefieldName" class="input_box" style="width:160px;" value="' + aftername + '" onclick="javascript:choosedatabase(this);"/>'; tr = tr + '<input type="hidden" name="arys[@0@].fieldValue" id="' + databaserowindex + 'databasefieldValue" value="' + afterid + '"/>'; tr = tr + '<input type="hidden" name="arys[@0@].orderNo" id="' + databaserowindex + 'databaseorderNo" value="@0@" />'; tr = tr + '<input type="button" id="adddatabase" onclick="javascript:addrow(\'databasetab\',1,this)" style="width:45px;" value="新增行"/>'; tr = tr + '<input type="button" id="deldatabase" onclick="javascript:delrow(this)" style="width:45px;" value="删除行"/>'; tr = tr + '</td><td style="width:30%;">'; tr = tr + '<input type="text" name="arys[@0@].param1" id="' + databaserowindex + 'databaseparam1" class="input_box" style="width:160px;" onclick="javascript:choosedatabase2(this);"/>'; tr = tr + '<input type="hidden" name="arys[@0@].param2" id="' + databaserowindex + 'databaseparam2" />'; tr = tr + '<input type="hidden" name="arys[@0@].viewType" id="' + databaserowindex + 'databaseviewType" value="database" />'; tr = tr + '<input type="button" id="adddatabase" onclick="javascript:addrow(\'databasetab\',2,this)" style="width:45px;" value="新增行"/>'; tr = tr + '<input type="button" id="deldatabase" onclick="javascript:delrow(this)" style="width:45px;" value="删除行"/></td>'; tr = tr + '<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>'; databaserowindex = parseInt(databaserowindex) + 1; } } addTr(tab, nowTr, tr); } else { if (col == 3) { if (tab.indexOf("jfdlhj" >= 0)) { $(nowTr).parent().parent().find("input").each(function () { var field = $(this).attr('id'); if (field && field.indexOf("jfdlhjparam1") >= 0) { aftername = $(this).attr('value'); } if (field && field.indexOf("jfdlhjparam2") >= 0) { aftername2 = $(this).attr('value'); } }) tr = '<tr><td style="width:22%;">'; tr = tr + '<input type="text" name="arys[@0@].param1" id="' + jfdlhjrowindex + 'jfdlhjparam1" value="' + aftername + '" class="input_box" style="width:80px;" />'; tr = tr + '<input type="button" id="addjfdlhj" onclick="javascript:addrow(\'jfdlhjtab\',1,this)" style="width:50px;" value="新增行"/>'; tr = tr + '<input type="button" id="deljfdlhj" onclick="javascript:delrow(this)" style="width:50px;" value="删除行"/>'; tr = tr + '</td><td style="width:22%;">'; tr = tr + '<input type="text" name="arys[@0@].param2" id="' + jfdlhjrowindex + 'jfdlhjparam2" value="' + aftername2 + '" class="input_box" style="width:80px;"/>'; tr = tr + '<input type="button" id="addjfdlhj" onclick="javascript:addrow(\'jfdlhjtab\',2,this)" style="width:50px;" value="新增行"/>'; tr = tr + '<input type="button" id="deljfdlhj" onclick="javascript:delrow(this)" style="width:50px;" value="删除行"/>'; tr = tr + '</td><td style="width:22%;">'; tr = tr + '<input type="text" name="arys[@0@].fieldName" id="' + jfdlhjrowindex + 'jfdlhjfieldName" class="input_box" style="width:70px;" onclick="javascript:choosejfdlhj(this);"/>'; tr = tr + '<input type="hidden" name="arys[@0@].fieldValue" id="' + jfdlhjrowindex + 'jfdlhjfieldValue"/>'; tr = tr + '<input type="hidden" name="arys[@0@].orderNo" id="' + jfdlhjrowindex + 'jfdlhjorderNo" value="@0@" />'; tr = tr + '<input type="hidden" name="arys[@0@].viewType" id="' + jfdlhjrowindex + 'jfdlhjviewType" value="jfdlhj" />'; tr = tr + '<input type="button" id="addjfdlhj" onclick="javascript:addrow(\'jfdlhjtab\',3,this)" style="width:50px;" value="新增行"/>'; tr = tr + '<input type="button" id="deljfdlhj" onclick="javascript:delrow(this)" style="width:50px;" value="删除行"/></td>'; tr = tr + '<td> </td><td> </td><td> </td><td> </td><td> </td></tr>'; jfdlhjrowindex = parseInt(jfdlhjrowindex) + 1; } addTr(tab, nowTr, tr); } } }}//删除行function delrow(nowTr) { if (serverrowindex <= 2) return; delTr($(nowTr).parent().parent());}//tab排序function orderTabAll() { var num = orderyTab('servertab', 0); num = orderyTab('databasetab', num); num = orderyTab('jfdlhjtab', num); }//tab排序function orderyTab(tab, beginnum) { var tabhtml = ''; var att = beginnum; $("#" + tab + " tr").each(function () { var trs = $(this).children(); if (trs) { var num = 0; trs.find("input").each(function () { var aname = $(this).attr('name'); var aid = $(this).attr('id'); var type = $(this).attr('type'); if (type == 'text' || type == 'hidden') { num = num + 1; if (aname) { aname = aname.replace(/\[.+\]/, "[" + att + "]"); $('#' + aid).attr('name', aname); } if (aname && aname.indexOf('orderNo') >= 0) { $('#' + aid).attr('value', att); } } }); if (trs.length > 0 && num > 0) att = att + 1; } }); return att;}/** * 为table指定行添加一行 * * tab 表id * row 行数，如：0->第一行 1->第二行 -2->倒数第二行 -1->最后一行 * trHtml 添加行的html代码 * */function addTr(tab, nowTr, trHtml) { //获取table最后一行 $("#tab tr:last") //获取table第一行 $("#tab tr").eq(0) //获取table倒数第二行 $("#tab tr").eq(-2) var $tr = $(nowTr).parent().parent(); $tr.after(trHtml);}function delTr(nowTr) { var $tr = $(nowTr); $tr.remove();}
/** * 合并列 * @param table_id table ID * @param table_colnum 第几列 */function mergetable_rowspan(table_id, table_colnum) { var table_firsttd = ""; var table_currenttd = ""; var table_SpanNum = 0; table_Obj = $(table_id + " tr td:nth-child(" + table_colnum + ")"); table_Obj.each(function (i) { if (i == 0) { table_firsttd = $(this); table_SpanNum = 1; } else { table_currenttd = $(this); if (table_firsttd.text() == table_currenttd.text()) { table_SpanNum++; table_currenttd.remove(); table_firsttd.attr("rowSpan", table_SpanNum); } else { table_firsttd = $(this); table_SpanNum = 1; } } });}jQuery.fn.rowspan = function (colIdx) { //封装的一个JQuery小插件 return this.each(function () { var that; $('tr', this).each(function (row) { $('td:eq(' + colIdx + ')', this).filter(':visible').each(function (col) { if (that != null && $(this).html() == $(that).html()) { rowspan = $(that).attr("rowSpan"); if (rowspan == undefined) { $(that).attr("rowSpan", 1); rowspan = $(that).attr("rowSpan"); } rowspan = Number(rowspan) + 1; $(that).attr("rowSpan", rowspan); $(this).remove();//.hide(); } else { that = this; } }); }); });}
// 服务器var servertrAdd = '<tr><td style="width:230px;">';servertrAdd = servertrAdd + '<input type="text" name="arys[@0@].param1" id="@serverrowindex@serverparam" class="input_box" style="width:100px;" />';servertrAdd = servertrAdd + '<input type="button" id="addserver" onclick="javascript:addrow(\'servertab\',1,this)" style="width:50px;" value="新增行"/>';servertrAdd = servertrAdd + '<input type="button" id="delserver" onclick="javascript:delrow(this)" style="width:50px;" value="删除行"/></td>';servertrAdd = servertrAdd + '<td><input type="text" name="arys[@0@].fieldName" id="@serverrowindex@serverfieldName" class="input_box" style="width:100px;" onclick="javascript:chooseserver(this);"/>';servertrAdd = servertrAdd + '<input type="hidden" name="arys[@0@].fieldValue" id="@serverrowindex@serverfieldValue"/>';servertrAdd = servertrAdd + '<input type="hidden" name="arys[@0@].orderNo" id="@serverrowindex@serverorderNo" value="@0@" />';servertrAdd = servertrAdd + '<input type="hidden" name="arys[@0@].viewType" id="@serverrowindex@serverviewType" value="server" />';servertrAdd = servertrAdd + '<input type="button" id="addserver" onclick="javascript:addrow(\'servertab\',2,this)" style="width:50px;" value="新增行"/>';servertrAdd = servertrAdd + '<input type="button" id="delserver" onclick="javascript:delrow(this)" style="width:50px;" value="删除行"/></td>';servertrAdd = servertrAdd + '<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>' + '<td><input type="text" name="arys[@0@].param2" id="@serverrowindex@param2" class="input_box" style="width:100px;" onclick="javascript:chooseserverdisk(this);"/>' + '<input type="hidden" name="arys[@0@].param3" id="@serverrowindex@param3"/>' + '</td><td><input type="text" name="arys[@0@].param4" id="@serverrowindex@param4" style="width:80px;"/></td></tr>';//数据库var databaseAdd = '<tr><td style="width:30%;">';databaseAdd = databaseAdd + '<input type="text" name="arys[@0@].fieldName" id="@databaserowindex@databasefieldName" class="input_box" style="width:160px;" onclick="javascript:choosedatabase(this);"/>';databaseAdd = databaseAdd + '<input type="hidden" name="arys[@0@].fieldValue" id="@databaserowindex@databasefieldValue"/>';databaseAdd = databaseAdd + '<input type="hidden" name="arys[@0@].orderNo" id="@databaserowindex@databaseorderNo" value="@0@" />';databaseAdd = databaseAdd + '<input type="button" id="adddatabase" onclick="javascript:addrow(\'databasetab\',1,this)" style="width:45px;" value="新增行"/>';databaseAdd = databaseAdd + '<input type="button" id="deldatabase" onclick="javascript:delrow(this)" style="width:45px;" value="删除行"/>';databaseAdd = databaseAdd + '</td><td style="width:30%;">';databaseAdd = databaseAdd + '<input type="text" name="arys[@0@].param1" id="@databaserowindex@databaseparam1" class="input_box" style="width:160px;" onclick="javascript:choosedatabase2(this);"/>';databaseAdd = databaseAdd + '<input type="hidden" name="arys[@0@].param2" id="@databaserowindex@databaseparam2" />';databaseAdd = databaseAdd + '<input type="hidden" name="arys[@0@].viewType" id="@databaserowindex@databaseviewType" value="database" />';databaseAdd = databaseAdd + '<input type="button" id="adddatabase" onclick="javascript:addrow(\'databasetab\',2,this)" style="width:45px;" value="新增行"/>';databaseAdd = databaseAdd + '<input type="button" id="deldatabase" onclick="javascript:delrow(this)" style="width:45px;" value="删除行"/></td>';databaseAdd = databaseAdd + '<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>';//var jfdlhjAdd = '<tr><td style="width:22%;">';jfdlhjAdd = jfdlhjAdd + '<input type="text" name="arys[@0@].param1" id="@jfdlhjrowindex@jfdlhjparam1" class="input_box" style="width:80px;" />';jfdlhjAdd = jfdlhjAdd + '<input type="button" id="addjfdlhj" onclick="javascript:addrow(\'jfdlhjtab\',1,this)" style="width:50px;" value="新增行"/>';jfdlhjAdd = jfdlhjAdd + '<input type="button" id="deljfdlhj" onclick="javascript:delrow(this)" style="width:50px;" value="删除行"/>';jfdlhjAdd = jfdlhjAdd + '</td><td style="width:22%;">';jfdlhjAdd = jfdlhjAdd + '<input type="text" name="arys[@0@].param2" id="@jfdlhjrowindex@jfdlhjparam2" class="input_box" style="width:80px;"/>';jfdlhjAdd = jfdlhjAdd + '<input type="button" id="addjfdlhj" onclick="javascript:addrow(\'jfdlhjtab\',2,this)" style="width:50px;" value="新增行"/>';jfdlhjAdd = jfdlhjAdd + '<input type="button" id="deljfdlhj" onclick="javascript:delrow(this)" style="width:50px;" value="删除行"/>';jfdlhjAdd = jfdlhjAdd + '</td><td style="width:22%;">';jfdlhjAdd = jfdlhjAdd + '<input type="text" name="arys[@0@].fieldName" id="@jfdlhjrowindex@jfdlhjfieldName" class="input_box" style="width:70px;" onclick="javascript:choosejfdlhj(this);"/>';jfdlhjAdd = jfdlhjAdd + '<input type="hidden" name="arys[@0@].fieldValue" id="@jfdlhjrowindex@jfdlhjfieldValue"/>';jfdlhjAdd = jfdlhjAdd + '<input type="hidden" name="arys[@0@].orderNo" id="@jfdlhjrowindex@jfdlhjorderNo" value="@0@" />';jfdlhjAdd = jfdlhjAdd + '<input type="hidden" name="arys[@0@].viewType" id="@jfdlhjrowindex@jfdlhjviewType" value="jfdlhj" />';jfdlhjAdd = jfdlhjAdd + '<input type="button" id="addjfdlhj" onclick="javascript:addrow(\'jfdlhjtab\',3,this)" style="width:50px;" value="新增行"/>';jfdlhjAdd = jfdlhjAdd + '<input type="button" id="deljfdlhj" onclick="javascript:delrow(this)" style="width:50px;" value="删除行"/></td>';jfdlhjAdd = jfdlhjAdd + '<td> </td><td> </td><td> </td><td> </td><td> </td></tr>';
阅读全文
0 0
- 使用js动态绘制报表
- FusionChart动态报表的绘制
- Jasper+ireport动态报表学习（二）使用数据库作为数据源进行报表绘制
- 使用Jaspersoft Studio绘制报表
- Grid++Report 报表动态使用
- 使用PowerBuilder实现动态报表
- 使用canvas绘制动态时钟
- 使用matplotlib绘制动态图
- chart.js报表的使用
- 网页，html5,canvas，js 动态绘制柱形图
- d3.js——绘制动态中国地图
- 使用joint.js 绘制图
- 【WEB前端】使用百度ECharts，绘制项目质量报表
- 在VB中使用动态分组报表
- 在VB中使用动态分组报表
- 使用ReportStringControl 动态添加报表列
- 使用RAS SDK 动态添加子报表
- asp.net中动态使用水晶报表
- 数组中出现次数超过一半的数字
- Spark源码解析SparkStreaming数据接收
- Android SD卡文件存储
- IP 协议帧格式
- 江南大学吴小俊：深度学习不能代表人工智能的全部
- 使用js动态绘制报表
- 【Angular】Angular+Ionic报错：No provider for *Service!
- ORA-12505, TNS:listener does not currently know of SID given in connect descriptor
- mt6392介绍
- linux iio_dev iio_inio 成员
- 记录bootstrap datepicker默认日期input显示并选中问题
- 手机验证码前台jsp校验
- 利用node.js写爬虫 爬取某相亲网站全部交友信息
- hdu6201 transaction transaction transaction 树形dp || 最短路
