table的定时刷新

  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
 16 <style>
 17 .tableStyle{
 18     border:1px solid #D7D7D7;
 19     cellpadding:0;
 20     cellspacing:0;
 21     width:720px;
 22     height:480px;
 23 }
 24 .tableStyle tr td{
 25     height:21px;
 26     border:1px solid #D7D7D7;
 27     cellpadding:0;
 28     cellspacing:0;
 29     font-size:18px;
 30     text-align:center;
 31 }
 32 tr.tableTitle{
 33     background-color:#E4E4E4;
 34 }
 35 .fontSyle{
 36     font-family: 微软雅黑;
 37     color: #777777;
 38     font-size:18px;
 39 }
 40 .tableTitle td {
 41     color: #777777;
 42     font-weight:bold;
 43     width:90px;
 44 }
 45 .SD_lowerLimit {
 46     position:relative;
 47     left:30px;
 48     width:31px;
 49     height:24px;
 50     background-image:url(../css/css_sdjn/images/middle/c_17.png);
 51     background-repeat: no-repeat;
 52     margin-top:10px;
 53 }
 54 .SD_upperLimit {
 55     position:relative;
 56     left:30px;
 57     width:31px;
 58     height:24px;
 59     background-image:url(../css/css_sdjn/images/middle/c_14.png);
 60     background-repeat: no-repeat;
 61     margin-top:10px;
 62 }
 63 </style>
 64 <%@include file="/common/header.jsp"%>
 65 <%
 66     String time = ParaUtil.getSysParaValue(request, "RELOAD_GRID_TIME");
 67 %>
 68 </head>
 69 <!--  -->
 70 <body style="margin:0;overflow:auto;background-color:transparent;">
 71     <html:form action="/mpsm/jproscheculing/warehousing/warehousing"
 72             method="post" styleId="mpsm_jproscheculing_wareHousingForm"
 73             onsubmit="return validateForm(this)">
 74
 75         <!-- 左上 左边 -->
 76         <div style="position:absolute;top:0px;left:0px;width:730px;height:280px;">
 77             <span class="box_h535_left"></span>
 78             <span class="box_h535_middle" style="width:700px;">
 79                 <div class="fontType" id = "location">库存情况</div>
 80             </span>
 81             <span class="box_h535_right" style="left:715px"></span>
 82         </div>
 83         <div align="center" style="position:absolute;top:40px;left:1px;">
 84             <!-- 进度条-->
 85             <div style="position:absolute;left:0px;top:20px;width:300px;height:500px;margin:0; ">
 86                 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="70%" height="90%"
 87                    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
 88                    id="wareRate">
 89                    <param name="movie" name="usedTime" value="<%=request.getContextPath()%>/mpsm/jproscheculing/assets/flash/wareHousingRate.swf" />
 90                    <param name="quality" value="high" />
 91                    <param name="wmode" value="transparent" />
 92                    <param name="allowScriptAccess" value="sameDomain" />
 93                    <param name="allowFullScreen" value="true" />
 94                    <embed src="<%=request.getContextPath()%>/mpsm/jproscheculing/assets/flash/wareHousingRate.swf" quality="high" width="100%" height="100%"
 95                         name="wareRate" align="middle" play="true" loop="false" quality="high"
 96                         allowScriptAccess="sameDomain" womode="transparent"
 97                         type="application/x-shockwave-flash"
 98                         pluginspage="http://www.adobe.com/go/getflashplayer">
 99                     </embed>
100                  </object>
101             </div>
102             <!-- 饼状图 -->
103             <div style="position:absolute;left:320px;top:20px;width:300px;height:500px;margin:0; ">
104                 <div class="fontType2"><span id ="changePosition">二三级库房</span>库存设备构成情况</div>
105                 <div id="wareEquipCategChartDiv"></div>
106             </div>
107         </div>
108         <!-- 左上 右边 -->
109         <div style="position:absolute;top:0px;left:2050px;width:730px;height:280px;">
110             <span class="box_h535_left"></span>
111             <span class="box_h535_middle" style="width:700px;">
112                 <div id = "twoLevelWareHouseInfo" class="fontType" style="cursor:pointer" >二级库存信息</div>
113             </span>
114             <span class="box_h535_right" style="left:715px"></span>
115         </div>
116         <div style="position:absolute;top:42px;left:2054px;">
117
118             <table id ="twoLevelWareHouseContext" class="tableStyle" border="1px"  bordercolor="#D7D7D7" cellpadding="0" cellspacing="0" width="720px" height="250px ">
119                 <tr class="tableTitle">
120                     <td>单位</td>
121                     <td>单相</td>
122                     <td>三相</td>
123                     <td style="width:130px;">电流互感器</td>
124                     <td style="width:130px;">电压互感器</td>
125                     <td>采集器</td>
126                     <td>集中器</td>
127                     <td>专变终端</td>
128                 </tr>
129                 <tr class=‘fontSyle‘>
130                     <td></td>
131                     <td></td>
132                     <td></td>
133                     <td></td>
134                     <td></td>
135                     <td></td>
136                     <td></td>
137                     <td></td>
138                 </tr>
139                 <tr class=‘fontSyle‘>
140                     <td></td>
141                     <td></td>
142                     <td></td>
143                     <td></td>
144                     <td></td>
145                     <td></td>
146                     <td></td>
147                     <td></td>
148                 </tr>
149                 <tr class=‘fontSyle‘>
150                     <td></td>
151                     <td></td>
152                     <td></td>
153                     <td></td>
154                     <td></td>
155                     <td></td>
156                     <td></td>
157                     <td></td>
158                 </tr>
159                 <tr class=‘fontSyle‘>
160                     <td></td>
161                     <td></td>
162                     <td></td>
163                     <td></td>
164                     <td></td>
165                     <td></td>
166                     <td></td>
167                     <td></td>
168                 </tr>
169                 <tr class=‘fontSyle‘>
170                     <td></td>
171                     <td></td>
172                     <td></td>
173                     <td></td>
174                     <td></td>
175                     <td></td>
176                     <td></td>
177                     <td></td>
178                 </tr>
179                 <tr class=‘fontSyle‘>
180                     <td></td>
181                     <td></td>
182                     <td></td>
183                     <td></td>
184                     <td></td>
185                     <td></td>
186                     <td></td>
187                     <td></td>
188                 </tr>
189                 <tr class=‘fontSyle‘>
190                     <td></td>
191                     <td></td>
192                     <td></td>
193                     <td></td>
194                     <td></td>
195                     <td></td>
196                     <td></td>
197                     <td></td>
198                 </tr>
199                 <tr class=‘fontSyle‘>
200                     <td></td>
201                     <td></td>
202                     <td></td>
203                     <td></td>
204                     <td></td>
205                     <td></td>
206                     <td></td>
207                     <td></td>
208                 </tr>
209                 <tr class=‘fontSyle‘>
210                     <td></td>
211                     <td></td>
212                     <td></td>
213                     <td></td>
214                     <td></td>
215                     <td></td>
216                     <td></td>
217                     <td></td>
218                 </tr>
219                 <tr class=‘fontSyle‘>
220                     <td></td>
221                     <td></td>
222                     <td></td>
223                     <td></td>
224                     <td></td>
225                     <td></td>
226                     <td></td>
227                     <td></td>
228                 </tr>
229                 <tr class=‘fontSyle‘>
230                     <td></td>
231                     <td></td>
232                     <td></td>
233                     <td></td>
234                     <td></td>
235                     <td></td>
236                     <td></td>
237                     <td></td>
238                 </tr>
239                 <tr class=‘fontSyle‘>
240                     <td></td>
241                     <td></td>
242                     <td></td>
243                     <td></td>
244                     <td></td>
245                     <td></td>
246                     <td></td>
247                     <td></td>
248                 </tr>
249                 <tr class=‘fontSyle‘>
250                     <td></td>
251                     <td></td>
252                     <td></td>
253                     <td></td>
254                     <td></td>
255                     <td></td>
256                     <td></td>
257                     <td></td>
258                 </tr>
259                 <tr class=‘fontSyle‘>
260                     <td></td>
261                     <td></td>
262                     <td></td>
263                     <td></td>
264                     <td></td>
265                     <td></td>
266                     <td></td>
267                     <td></td>
268                 </tr>
269                 <tr class=‘fontSyle‘>
270                     <td></td>
271                     <td></td>
272                     <td></td>
273                     <td></td>
274                     <td></td>
275                     <td></td>
276                     <td></td>
277                     <td></td>
278                 </tr>
279             </table>
280         </div>
281     </html:form>
282 </body>
283
284 <script type="text/javascript">
285     var form = document.forms[0];
286     var time = "<%=time%>";
287      if(time == "" || time == "null"){
288         time = "300000";
289     }
290     window.onload=function(){
291         //设置进度条flash的进度
292         var rate = <%=request.getAttribute("wareRate")%>;
293         document.getElementById("wareRate").setOption(rate);
294
295         //初始化饼状图
296         var wareEquipCategChartXML1 = "<%=request.getAttribute("wareEquipCateg")%>";
297           setEquipCategInfoChartXML(wareEquipCategChartXML1);
298
299          //设置表格
300          var tableDataList = <%=request.getAttribute("tableDataList")%>;
301          initTableDate(tableDataList,0);
302
303     }
304     var twoLevelWareHouseContext = document.getElementById("twoLevelWareHouseContext");
305     function initTableDate(tableData,num){
306         //初始化数据
307         doCleanTable();
308         var times = tableData.numData.length/15;
309         var startIndex = num*15;
310         //构建table并往里面填写数据
311         for(var i=1 ;num<times && i<16 && ((i-1)+startIndex) < tableData.numData.length; i++){//tableData.numData.length+1
312
313             //填充数据
314             var trData = tableData.numData[(i-1)+startIndex];
315
316             var styleConent = " "+trData.dxf+trData.sxf+trData.dlhgqf+trData.dyhgqf+trData.zbzdf+trData.jzqf+trData.cjqf;
317
318             twoLevelWareHouseContext.rows[i].cells[0].innerHTML = "<span id=orgName"+i+" class=‘fontSyle‘>"+trData.orgName+"</span>";
319             twoLevelWareHouseContext.rows[i].cells[1].innerHTML = "<div ><span class=‘fontSyle‘>"+trData.dx+"</span></div>";
320             twoLevelWareHouseContext.rows[i].cells[2].innerHTML = "<div ><span class=‘fontSyle‘>"+trData.sx+"</span></div>";
321             twoLevelWareHouseContext.rows[i].cells[3].innerHTML = "<div ><span class=‘fontSyle‘>"+trData.dlhgq+"</span></div>";
322             twoLevelWareHouseContext.rows[i].cells[4].innerHTML = "<div ><span class=‘fontSyle‘>"+trData.dyhgq+"</span></div>";
323             twoLevelWareHouseContext.rows[i].cells[5].innerHTML = "<div ><span class=‘fontSyle‘>"+trData.zbzd+"</span></div>";
324             twoLevelWareHouseContext.rows[i].cells[6].innerHTML = "<div ><span class=‘fontSyle‘>"+trData.jzq+"</span></div>";
325             twoLevelWareHouseContext.rows[i].cells[7].innerHTML = "<div ><span class=‘fontSyle‘>"+trData.cjq+"</span></div>";
326         }
327         num = num+1;
328         if(num>=times){
329             num = 0;
330         }
331         setTimeout(function(){initTableDate(tableData,num)},time);
332     }
333
334     function doCleanTable(){
335         for(var i=1;i<16; i++){
336             twoLevelWareHouseContext.rows[i].cells[0].innerHTML = "";
337             twoLevelWareHouseContext.rows[i].cells[1].innerHTML = "";
338             twoLevelWareHouseContext.rows[i].cells[2].innerHTML = "";
339             twoLevelWareHouseContext.rows[i].cells[3].innerHTML = "";
340             twoLevelWareHouseContext.rows[i].cells[4].innerHTML = "";
341             twoLevelWareHouseContext.rows[i].cells[5].innerHTML = "";
342             twoLevelWareHouseContext.rows[i].cells[6].innerHTML = "";
343             twoLevelWareHouseContext.rows[i].cells[7].innerHTML = "";
344         }
345     }
346
347     function setEquipCategInfoChartXML(wareEquipCategChartXML){
348         var chart1 = new FusionCharts("../assets/FusionCharts/Pie3D.swf","myChartId1", "360", "400");
349         //初始化的chart1不能放在setEquipCategInfoChartXML方法的外面，或出现组件中文乱码
350         chart1.setTransparent(true);
351            chart1.setDataXML(wareEquipCategChartXML);
352            chart1.render("wareEquipCategChartDiv");
353     }
354        //根据点击的地图上不同的地市 查询出该地市的单位库存占比
355        function loadXMLDoc(org_no,orgName,levelInfo){
356            //alert("org_no:"+org_no+"orgName:"+orgName+"levelInfo:"+levelInfo);
357         var url = "<%=request.getContextPath()%>/mpsm/jproscheculing/warehousing/twolevelwarehousing.do?action=initLeftTop&isAjax=Y&org_no="+org_no;
358         jQuery.post(url,function(data){
359             //库存占比 进度条
360             document.getElementById("changePosition").innerHTML=orgName;
361             document.getElementById("twoLevelWareHouseInfo").innerHTML=levelInfo;
362             document.getElementById("wareRate").refresh(data.wareRate);
363             //初始化饼状图
364             var chartObj = getChartFromId("myChartId1");
365             chartObj.setDataXML(data.wareEquipCategChartXML);
366             //setEquipCategInfoChartXML(data.wareEquipCategChartXML);
367             //设置表格
368             initTableDate(data.tableDataList,0);
369         },"json");
370       }
371
372 </script>
373
374 </html>

该jsp主要是在2015年7月开发某个省的国网项目时写的，主要用到了里面的flash，以及funsion charts组件，以及jquery对table里的内容的定时刷新

时间： 2024-10-29 14:14:44

table的定时刷新的相关文章

百度地图获取数据库点的坐标，并定时刷新到页面上

后台代码 先创建marker点的实体类(并利用Spring注解功能实现自动自动建表) 1 package com.sdtg.ditu.bean; 2 3 import javax.persistence.Column; 4 import javax.persistence.Entity; 5 import javax.persistence.GeneratedValue; 6 import javax.persistence.Id; 7 import javax.persistence.Tabl

&lt;微信应用开发系列&gt;定时刷新AccessToken

微信内嵌H5站一直很火,很多公司也想借助微信的用户群和社交群来做点事情,所以对于各位代码君来说也算是一个研究方向吧. access_token是公众号的全局唯一票据,公众号调用各接口时都需使用access_token.开发者需要进行妥善保存.access_token的存储至少要保留512个字符空间.access_token的有效期目前为2个小时,需定时刷新,重复获取将导致上次获取的access_token失效. 公众号可以使用AppID和AppSecret调用本接口来获取access_token

servletResponse 实用的页面跳转技术和定时刷新技术

package response; import java.io.IOException;import java.util.Random; import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse; public class

JS获取当前日期时间并定时刷新

JS获取当前日期时间 var date = new Date(); date.getYear(); //获取当前年份(2位) date.getFullYear(); //获取完整的年份(4位,2014) date.getMonth(); //获取当前月份(0-11,0代表1月) date.getDate(); //获取当前日(1-31) date.getDay(); //获取当前星期X(0-6,0代表星期天) date.getTime(); //获取当前时间(从1970.1.1開始的毫秒数) d

Angular 定时器$timeout和$interval关于定时刷新页面和发送请求的用法

项目中有用到定时器定时刷新页面的数据,在网上查看了一些资料,整理了一下,备忘. $timeout 用法如下:$timeout(fn,[delay],[invokeApply]); fn:一个将被延迟执行的函数. delay:延迟的时间(毫秒). invokeApply:如果设置为false,则跳过脏值检测,否则将调用$apply. 方法:cancel(promise); promise:$timeout函数的返回值. 具体使用:在项目中用到的其中一处是键入字符然后自动发送请求查询,如果每键入一个

黑马day04 定时刷新&amp;是否缓冲

定时刷新: //每隔一秒刷新 response.setIntHeader("Refresh", 1); response.setContentType("text/html;charset=utf-8"); response.getWriter().write("当前的时间"+new Date()); 告知浏览器不缓存数据.当使用验证码的时候就不缓存数据,为的是防止有的浏览器设置不一样.而有的就需要使用刷新,直接使用缓存中的数据,减少服务器的压力

如何让网页局部定时刷新？

如何逻辑整理? 1. 需要用到js的定时刷新函数  setInterval(function,time) 2. 只需要对网页中局部的标签进行刷新 函数中function为自定义函数,time是多久执行自定义函数,单位是毫秒 3. 可以通过定义自定义函数进行局部刷新,需要导入jquery 代码演示,如何? setInterval(function() { $("#history").load(location.href+" #history>*","&

js 页面定时刷新

html <label class="am-switch am-switch-lg"> <input type="checkbox" id="check_is_f"> <span class="am-switch-checkbox"></span> </label> 定时刷新 js //定时刷新 is_f = localStorage.getItem("is

JSP简单练习-定时刷新页面

<%@ page contentType="text/html; charset=gb2312" %> <%@ page import="java.util.Date" %> <html> <head> <title>定时刷新页面</title> </head> <body> <% // 设置刷新页面的时间,每隔1秒钟刷新一次 response.setHeader(