手写表格插件
js
/* *@desc 根据传入的标准数据构建表格 *@param * columns: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] * data: {Rows: Array(2)} * height: "auto" * onSelectRow: selectFun(data) * pageSize: 50 * width: "92%" */ $.fn.initTable=function(t_obj){ var thead='<thead><tr>',tbody='<tbody>',r_arr=[],render={}; for(var i=0;i<t_obj.columns.length;i++){ var h=t_obj.columns[i]; thead+='<th>'+h.display+'</th>'; r_arr.push(h.name); if(h.render!==undefined&&typeof h.render=='function'){ render[h.name]=h.render; } } thead+='</tr></thead>'; for(var i=0;i<t_obj.data.Rows.length;i++){ var d=t_obj.data.Rows[i]; tbody+="<tr>"; for(var j=0;j<r_arr.length;j++){ if(render[r_arr[j]]!==undefined){ tbody+='<td>'+render[r_arr[j]](d)+'</td>'; }else{ var num=d[r_arr[j]]; if(num===''||num===undefined){ num='-' } tbody+='<td>'+num+'</td>'; } } tbody+="</tr>"; } tbody+='</tbody>'; var el=this.target=='table'?this:this.find('table')[0]?this.find('table:eq(0)'):''; if(el){ el.html(thead+tbody); }else{ this.html("<table class='table table-responsive table-striped table-bordered'>"+thead+tbody+"</table>"); } }
调用
$("#analysisTbl").initTable({ columns: [ {display:'模块',name:'module',width:80}, {display:'位置',name:'location',width:150}, {display:'指标名称',name:'name',width:100}, {display:'指标单位',name:'i_unit',width:150,isSort:false, render : function(item) { for ( var i = 0; i < unitList.length; i++) { if (unitList[i].id == item.i_unit){ return unitList[i].text; } } return item.i_unit; }}, {display:'实际值', name:'currentValue',width:150}, { display: '企业标准', name: 'index_company', width: 100 }, { display: '行业标准', name: 'index_advance', width: 100 }, { display: '标杆企业', name: 'index_limit', width: 100 }, { display: '国家标准', name: 'index_average', width: 100 }, { display: '世界先进', name: 'index_adv_world', width: 100 } ], data:tblDatas, width: '92%', height:'auto', pageSize: 50, onSelectRow:selectFun });
举例子:
综合能耗分析-对标分析页面
js
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var year,month; var unitList = getUnit1(); $(function(){ search(); $("#searchMode").on('click','li',function(){ $(this).attr('selected',true); if($(this).attr('name')=='month'){ $(this).next().removeAttr('selected'); $('#date1').hide(); $('#date2').show(); }else{ $(this).prev().removeAttr('selected'); $('#date1').show(); $('#date2').hide(); } search(); }); $("#setUp").on('click',function(){ window.parent.f_addTab(0706,"对标设定","shanlv/newEnergyStandarConfigure.jsp"); }); $("#largeSmall").on('click',function(){ //缩放按钮 兼容ie8 if($("#largeSmall").hasClass('fa-expand')){ //放大 parent.$('#top').css('display','none'); parent.$('#nav').css('display','none'); parent.$('.glyphicon-backward').trigger('click'); parent.$('#showLeft').css('display','none'); parent.$('div.content').css('margin-top','0').css('padding-top','0'); $("#row2").css('display','none'); $("#row1").height('100%'); $(".wrapTab").css('top','0'); $("#largeSmall").removeClass('fa-expand'); $("#largeSmall").addClass('fa-compress'); return; } if($("#largeSmall").hasClass('fa-compress')){ //缩小 恢复开始状态 parent.$('#top').css('display','block'); parent.$('#nav').css('display','block'); parent.$('#showLeft').trigger('click'); parent.$('div.content').css('margin-top','-88px').css('padding-top','88px'); $("#row2").css('display','block'); $("#row1").height('50%'); $(".wrapTab").css('top','45px'); $("#largeSmall").removeClass('fa-compress'); $("#largeSmall").addClass('fa-expand'); return; } }); }); var companyCode = user.region;// 公司编码 var type = 1; //查询 function search(){ if($("#searchMode li[selected]").attr('name')=="year"){ year = $(".Wdate1").val(); month = ''; }else{ year = $(".Wdate2").val().split("-")[0]; month = $(".Wdate2").val().split("-")[1]; } var dateTime=year+month; $.ajax({ url:"slEnergyData_findEnergyStandarAnalysisAndData.action", data:{tagCode:companyCode,dateTime:dateTime,type:type}, dataType:"json", async: false, success:function(data){ var rowData = data.returnList; var valData; //calFormula var codess=''; var str=""; var ids=""; for(var i=0;i<rowData.length;i++){ rowData[i] = eval('('+rowData[i]+')'); } var tblDatas={}; tblDatas.Rows = rowData; $("#analysisTbl").initTable({ columns: [ {display:'模块',name:'module',width:80}, {display:'位置',name:'location',width:150}, {display:'指标名称',name:'name',width:100}, {display:'指标单位',name:'i_unit',width:150,isSort:false, render : function(item) { for ( var i = 0; i < unitList.length; i++) { if (unitList[i].id == item.i_unit){ return unitList[i].text; } } return item.i_unit; }}, {display:'实际值', name:'currentValue',width:150}, { display: '企业标准', name: 'index_company', width: 100 }, { display: '行业标准', name: 'index_advance', width: 100 }, { display: '标杆企业', name: 'index_limit', width: 100 }, { display: '国家标准', name: 'index_average', width: 100 }, { display: '世界先进', name: 'index_adv_world', width: 100 } ], data:tblDatas, width: '92%', height:'auto', pageSize: 50, onSelectRow:selectFun }); selectFun(rowData[0]); $('#analysisTbl').off('click').on('click','tr',function(){ selectFun(rowData[$(this).index()]); }) } }) } $.fn.initTable=function(t_obj){ var thead='<thead><tr>',tbody='<tbody>',r_arr=[],render={}; for(var i=0;i<t_obj.columns.length;i++){ var h=t_obj.columns[i]; thead+='<th>'+h.display+'</th>'; r_arr.push(h.name); if(h.render!==undefined&&typeof h.render=='function'){ render[h.name]=h.render; } } thead+='</tr></thead>'; for(var i=0;i<t_obj.data.Rows.length;i++){ var d=t_obj.data.Rows[i]; tbody+="<tr>"; for(var j=0;j<r_arr.length;j++){ if(render[r_arr[j]]!==undefined){ tbody+='<td>'+render[r_arr[j]](d)+'</td>'; }else{ var num=d[r_arr[j]]; if(num===''||num===undefined){ num='-' } tbody+='<td>'+num+'</td>'; } } tbody+="</tr>"; } tbody+='</tbody>'; var el=this.target=='table'?this:this.find('table')[0]?this.find('table:eq(0)'):''; if(el){ el.html(thead+tbody); }else{ this.html("<table class='table table-responsive table-striped table-bordered'>"+thead+tbody+"</table>"); } } function selectFun(data){ if(data == undefined){ return; } var xAxisDatas = ['实际值','企业标准','行业标准','标杆企业','国家标准','世界先进']; var legendData = [data.name]; var txt; if(month==''){ txt = year+"年"+data.name+"指标对比分析"; }else{ //txt = month.substr(0,4)+"年"+month.substr(4,2)+"月"+data.name+"指标对比分析"; txt = year+"年"+(month<10?month.substring("1"):month)+"月"+data.name+"指标对比分析"; } var unitstr;//曲线的单位 for ( var i = 0; i < unitList.length; i++) { if (unitList[i].id == data.i_unit){ unitstr=unitList[i].text; } } var series = []; series[0]={}; series[0].name = data.name; series[0].type = "bar"; series[0].barMaxWidth = '50'; series[0].i_unit = data.i_unit; series[0].data=[data.currentValue,data.index_company,data.index_advance,data.index_limit,data.index_average,data.index_adv_world]; require.config({ paths: { echarts: '../lib/echart/build/dist' } }); require( [ 'echarts', 'echarts/chart/bar' ], function (ec) { var myChart = ec.init(document.getElementById('analysisCurve')); option = { title : { text:txt, x:'center' }, tooltip: { trigger: 'axis', show: true }, legend: { x:'center', y:'bottom', data:legendData }, noDataLoadingOption:{ effect: "bubble", text:"暂无数据", effectOption:{ effect:{ n:0 } }, textStyle:{ fontSize:32, fontWeight:'bold' } }, xAxis :{ type : 'category', data : xAxisDatas }, yAxis : [ { name:unitstr, type : 'value', axisLabel: { //margin:2,//刻度标签与轴线之间的距离 formatter: function (value, index) { if (value >= 10000 && value < 10000000) { value = value / 10000 + "万"; } else if (value >= 10000000 && value < 100000000000) { value = value / 10000000 + "千万"; }else if (value >= 100000000000) { value = value / 100000000000+ "亿"; }else{} return value } } } ], series :series }; myChart.setOption(option); $(window).resize(function(){ myChart.resize(); }) }) }