リアルタイム進捗インジケータ

Question

私はリアルタイムの進行状況インジケータを取得しようとしています。以下のコードスニペットで

は、私は、Webサービスのコールバック関数から取得アイテム数に基づいてDIVの幅を設定しようとしています。ループのための私は、背景色で塗りつぶさdivProgressIndicatorを見て、私は進行状況を確認することができません実行された後、上記のコードに示すように

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ループでこれを達成することができますか私は他のいくつかのことを使用する必要があります。 よろしくお願いします。

Answer 1

最初のことは、各繰り返しで#divProgressIndicatorを更新していることです。最後に経過すると '（100 * 1）％'が100％となり、 div。あなたが必要なもの

は％（100 *行われた行の行/数の（総数））これを持っていることです。これはforループの外側で行われます

Answer 2

独自のプログレスバーを書くのではなく、jqueryプログレスバーを使用することをお勧めします。詳しくはhttp://docs.jquery.com/UI/Progressbarを参照してください。

あなたのコードに関して、私は正確なHTMLと正確な問題は何かを完全には理解していませんが、私の考えではプログレスバーを作成するには2つのdivが必要です。 2番目のdivは色を持つ必要があり、進行状況に基づいて幅を変更する必要があります。

このような設定をしていて、バックグラウンドdivのみが表示されている場合は、バックグラウンドdivがプログレス・ディビジョンの上に表示され、その解決策はバックグラウンドdivをトランスペアレントにするか、z-indexをより高い値に設定してプログレス・ディグを一番上に設定します。