2012-03-23 99 views
0

我正在尝试获取实时进度指示器。实时进度指示器

在下面的代码片段中,我试图根据从Web服务回调函数中检索的项目数来设置DIV的宽度。

for (i = 0; i < data.length; i++) { 

     table += '<tr>'; 
     table += '<td>' + data[i].ItemId + '</td>'; 
     table += '<td></td>'; 
     table += '<td>' + data[i].Name + '</td>'; 
     table += '<td>' + data[i].Unit + '</td>'; 
     table += '<td><input type=text value=' + data[i].Quantity + '></td>'; 
     table += '<td>' + data[i].Brands + '</td>'; 
     table += '<td><img border=0 src=../images/Delete_icon.gif></td>'; 
     table += '</tr>'; 

     $('#divProgressIndicator').width((100 * (i/data.length)) + '%'); 

    } 

如代码所示的上方,在for循环被执行后,我只看到填充有背景色divProgressIndicator,我无法看到的进展。 我可以在for循环中实现这一点,或者我需要使用其他的东西。 Regards

回答

0

那么首先是你为每次迭代更新#divProgressIndicator,所以它最后一次通过它是'(100 * 1)%',它会给你100%,然后填充DIV。

你需要的是这个((行的总数/行数)* 100)%。这将在for循环之外完成

+0

对不起,我的误解,也许我首先误解了这个问题,但设置循环的最后一次迭代中的最终宽度并将其设置在循环之外有什么区别? – 2012-03-23 14:52:38

+0

循环遍历数据,在最后的遍历中,它将以这种方式计算宽度的百分比:循环中的次数/循环中的项目总数* 100。这可以简化为1 * 100所以无论进展如何,它都会被设定为100.但我也可能误解了这一点。我想我正在接近这个想法,即当用户访问该页面时,该过程可能还没有完成。 – 2012-03-23 20:40:01

0

而不是编写自己的进度条,您可能需要考虑使用jquery进度条,更多信息请参见http://docs.jquery.com/UI/Progressbar

关于你的代码,我不完全理解什么是确切的html和什么是确切的问题,但在我看来,创建一个进度条,你需要两个div,绝对定位在同一地点,一个是固定的宽度和透明的(或较低的z-索引)和边框,而第二个div应该有一个颜色,并应根据进度改变宽度。

如果你确实有这样的设置,并且问题是只显示背景div,那么原因是背景div位于进度div之上,并且解决方法是将背景div设置为透明或通过将z-index设置为更高的值来将进度div设置为最高。