标签：
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <%@include file="/common/taglibs.jsp" %> 3 <html:base target="_self" /> 4 <%@page import="epm.sp.syspara.para.webapp.util.ParaUtil"%> 5 <%@ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean" %> 6 <html> 7 <head> 8 <title>Insert title here</title> 9 <%@include file="/common/header.jsp"%> 10 <link rel="stylesheet" type="text/css" href="../css/css_sdjn/proscheculing.css" /> 11 <link rel="stylesheet" type="text/css" href="../css/css_sdjn/fontype.css" /> 12 <script type="text/javascript" src="../assets/FusionCharts/FusionCharts.js"></script> 13 <script type="text/javascript" src="../flexigrid/js/jquery-1.10.2.js"></script> 14 <script type="text/javascript" src="../flexigrid/js/jquery-migrate-1.2.1.js"></script> 15 <style> 16 .tableStyle{ 17 border:1px solid #D7D7D7; 18 cellpadding:0; 19 cellspacing:0; 20 width:720px; 21 height:480px; 22 } 23 .tableStyle tr td{ 24 border:1px solid #D7D7D7; 25 cellpadding:0; 26 cellspacing:0; 27 font-size:14px; 28 text-align:center; 29 } 30 tr.tableTitle{ 31 background-color:#E4E4E4; 32 } 33 .fontSyle{ 34 color: #777777; 35 font-size:14px; 36 } 37 .tableTitle td { 38 color: #777777; 39 font-weight:bold; 40 width:90px; 41 } 42 .SD_lowerLimit { 43 position:relative; 44 left:30px; 45 width:31px; 46 height:24px; 47 background-image:url(../css/css_sdjn/images/middle/c_17.png); 48 background-repeat: no-repeat; 49 margin-top:10px; 50 } 51 .SD_upperLimit { 52 position:relative; 53 left:30px; 54 width:31px; 55 height:24px; 56 background-image:url(../css/css_sdjn/images/middle/c_14.png); 57 background-repeat: no-repeat; 58 margin-top:10px; 59 } 60 </style> 61 <%@include file="/common/header.jsp"%> 62 <% 63 String time = ParaUtil.getSysParaValue(request, "RELOAD_GRID_TIME"); 64 %> 65 </head> 66 <!-- onload="setTableBg()" --> 67 <body style="margin:0;overflow:auto;background-color:transparent;"> 68 <html:form action="/mpsm/jproscheculing/warehousing/warehousing" 69 method="post" styleId="mpsm_jproscheculing_wareHousingForm" 70 onsubmit="return validateForm(this)"> 71 72 <html:hidden property="trSize"/> 73 <!-- 左上 左边 --> 74 <div style="position:absolute;top:0px;left:0px;width:730px;height:280px;"> 75 <span class="box_h535_left"></span> 76 <span class="box_h535_middle" style="width:700px;"> 77 <div class="fontType" id = "location">库存情况</div> 78 </span> 79 <span class="box_h535_right" style="left:715px"></span> 80 </div> 81 <div align="center" style="position:absolute;top:40px;left:1px;"> 82 <!-- 进度条--> 83 <div style="position:absolute;left:0px;top:20px;width:300px;height:500px;margin:0; "> 84 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="70%" height="90%" 85 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" 86 id="wareRate"> 87 <param name="movie" name="usedTime" value="<%=request.getContextPath()%>/mpsm/jproscheculing/assets/flash/wareHousingRate.swf" /> 88 <param name="quality" value="high" /> 89 <param name="wmode" value="transparent" /> 90 <param name="allowScriptAccess" value="sameDomain" /> 91 <param name="allowFullScreen" value="true" /> 92 <embed src="<%=request.getContextPath()%>/mpsm/jproscheculing/assets/flash/wareHousingRate.swf" quality="high" width="100%" height="100%" 93 name="wareRate" align="middle" play="true" loop="false" quality="high" 94 allowScriptAccess="sameDomain" womode="transparent" 95 type="application/x-shockwave-flash" 96 pluginspage="http://www.adobe.com/go/getflashplayer"> 97 </embed> 98 </object> 99 </div> 100 <!-- 饼状图 --> 101 <div style="position:absolute;left:320px;top:20px;width:300px;height:500px;margin:0; "> 102 <div class="fontType2"><span id ="changePosition">省级计量中心</span>库存设备构成情况</div> 103 <div id="wareEquipCategChartDiv"></div> 104 </div> 105 </div> 106 <!-- 左上 右边 --> 107 <div style="position:absolute;top:0px;left:2050px;width:730px;height:280px;"> 108 <span class="box_h535_left"></span> 109 <span class="box_h535_middle" style="width:700px;"> 110 <div id = "twoLevelWareHouseInfo" class="fontType" style="cursor:pointer" >二级库存信息</div> 111 </span> 112 <span class="box_h535_right" style="left:715px"></span> 113 </div> 114 <div style="position:absolute;top:42px;left:2054px;"> 115 <table id ="twoLevelWareHouseContext" class="tableStyle" border="1px" bordercolor="#D7D7D7" cellpadding="0" cellspacing="0" width="720px" height="250px"> 116 <tr class="tableTitle"> 117 <td>单位</td> 118 <td>单相</td> 119 <td>三相</td> 120 <td>电流互感器</td> 121 <td>电压互感器</td> 122 <td>采集器</td> 123 <td>集中器</td> 124 <td>专变终端</td> 125 </tr> 126 </table> 127 </div> 128 </html:form> 129 </body> 130 131 <script type="text/javascript"> 132 var form = document.forms[0]; 133 window.onload=function(){ 134 //设置进度条flash的进度 135 var rate = <%=request.getAttribute("wareRate")%>; 136 document.getElementById("wareRate").setOption(rate); 137 138 //初始化饼状图 139 var wareEquipCategChartXML1 = "<%=request.getAttribute("wareEquipCateg")%>"; 140 setEquipCategInfoChartXML(wareEquipCategChartXML1); 141 142 //设置表格 143 var tableDataList = <%=request.getAttribute("tableDataList")%>; 144 initTableDate(eval(tableDataList)); 145 } 146 var twoLevelWareHouseContext = document.getElementById("twoLevelWareHouseContext"); 147 function initTableDate(tableData,isAjax){ 148 //清空数据 149 if(isAjax=="isAjax"){ 150 clearTwoLevelWareHouseContext(); 151 } 152 //构建table并往里面填写数据 153 for(var i=1 ;i< tableData.numData.length+1; i++){ 154 //动态的生成tr 155 twoLevelWareHouseContext.insertRow(i); 156 //动态的生成td 157 for(var j=0; j<8 ;j++){ 158 twoLevelWareHouseContext.rows[i].insertCell(); 159 } 160 //填充数据 161 var trData = tableData.numData[i-1]; 162 var styleConent = " "+trData.dxf+trData.sxf+trData.dlhgqf+trData.dyhgqf+trData.zbzdf+trData.jzqf+trData.cjqf; 163 twoLevelWareHouseContext.rows[i].cells[0].innerHTML = "<span id=orgName"+i+" class=‘fontSyle‘>"+trData.orgName+"</span>"; 164 twoLevelWareHouseContext.rows[i].cells[1].innerHTML = "<div class = ‘"+trData.dxf+"‘><span class=‘fontSyle‘>"+trData.dx+"</span></div>"; 165 twoLevelWareHouseContext.rows[i].cells[2].innerHTML = "<div class = ‘"+trData.sxf+"‘><span class=‘fontSyle‘>"+trData.sx+"</span></div>"; 166 twoLevelWareHouseContext.rows[i].cells[3].innerHTML = "<div class = ‘"+trData.dlhgqf+"‘><span class=‘fontSyle‘>"+trData.dlhgq+"</span></div>"; 167 twoLevelWareHouseContext.rows[i].cells[4].innerHTML = "<div class = ‘"+trData.dyhgqf+"‘><span class=‘fontSyle‘>"+trData.dyhgq+"</span></div>"; 168 twoLevelWareHouseContext.rows[i].cells[5].innerHTML = "<div class = ‘"+trData.zbzdf+"‘><span class=‘fontSyle‘>"+trData.zbzd+"</span></div>"; 169 twoLevelWareHouseContext.rows[i].cells[6].innerHTML = "<div class = ‘"+trData.jzqf+"‘><span class=‘fontSyle‘>"+trData.jzq+"</span></div>"; 170 twoLevelWareHouseContext.rows[i].cells[7].innerHTML = "<div class = ‘"+trData.cjqf+"‘><span class=‘fontSyle‘>"+trData.cjq+"</span></div>";// "SD_lowerLimit" 171 if(styleConent.indexOf("SD_lowerLimit")>0){ 172 document.getElementById("orgName"+i).style.color=‘#00FA00‘; 173 } 174 if(styleConent.indexOf("SD_upperLimit")>0){ 175 document.getElementById("orgName"+i).style.color=‘#F296F‘; 176 } 177 if(styleConent.indexOf("SD_lowerLimit")>0&&styleConent.indexOf("SD_upperLimit")>0){ 178 document.getElementById("orgName"+i).style.color=‘red‘; 179 } 180 } 181 form.trSize.value=tableData.numData.length; 182 } 183 184 function clearTwoLevelWareHouseContext(){ 185 for(var i=0;i<form.trSize.value; i++){ 186 twoLevelWareHouseContext.deleteRow(1); 187 } 188 } 189 190 function setEquipCategInfoChartXML(wareEquipCategChartXML){ 191 var chart1 = new FusionCharts("../assets/FusionCharts/Pie3D.swf","myChartId1", "360", "400"); 192 //初始化的chart1不能放在setEquipCategInfoChartXML方法的外面，或出现组件中文乱码 193 chart1.setTransparent(true); 194 chart1.setDataXML(wareEquipCategChartXML); 195 chart1.render("wareEquipCategChartDiv"); 196 } 197 //根据点击的地图上不同的地市 查询出该地市的单位库存占比 198 function loadXMLDoc(org_no,orgName,levelInfo){ 199 var url = "<%=request.getContextPath()%>/mpsm/jproscheculing/warehousing/twolevelwarehousing.do?action=initLeftTop&isAjax=Y&org_no="+org_no; 200 jQuery.post(url,function(data){ 201 //alert("org_no:"+org_no+"orgName:"+orgName+"levelInfo:"+levelInfo); 202 //库存占比 进度条 203 document.getElementById("changePosition").innerHTML=orgName; 204 document.getElementById("twoLevelWareHouseInfo").innerHTML=levelInfo; 205 document.getElementById("wareRate").refresh(data.wareRate); 206 //初始化饼状图 207 var chartObj = getChartFromId("myChartId1"); 208 chartObj.setDataXML(data.wareEquipCategChartXML); 209 //setEquipCategInfoChartXML(data.wareEquipCategChartXML); 210 //设置表格 211 initTableDate(data.tableDataList,"isAjax"); 212 },"json"); 213 } 214 215 </script> 216 217 </html>
主要使用了insertCell、insertRow和deleteRow方法
标签：
原文地址：http://www.cnblogs.com/kissandlove/p/4720658.html
