2012-03-23 100 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設置爲最高。