Индикатор хода реального времени

Question

Я пытаюсь получить индикатор прогресса в реальном времени.

В нижеприведенном фрагменте кода я пытаюсь установить ширину 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)) + '%'); 

    } 

Как показано в коде выше, после того, как цикл выполняется я вижу только divProgressIndicator заполнены с цветом фона, и я не в состоянии видеть прогресс. Могу ли я достичь этого в цикле for или мне нужно использовать что-то еще. С уважением

Answer 1

Ну, во-первых, вы обновляете #divProgressIndicator для каждой итерации, поэтому в последний раз, когда он проходит через него, это «(100 * 1)%», который даст вам 100% и затем заполнит дела.

Что вам нужно, чтобы иметь это ((общее количество строк/количество строк) * 100)%. Это будет сделано за пределами цикла for

Answer 2

Вместо того, чтобы писать свой собственный индикатор прогресса, вы можете рассмотреть возможность использования панели параметров jquery, для получения дополнительной информации см. http://docs.jquery.com/UI/Progressbar.

Что касается вашего кода, я не совсем понимаю, что такое точный html и какая именно проблема, но, на мой взгляд, для создания индикатора прогресса вам понадобятся два divs, расположенных на одном и том же месте, причем одна из них имеет фиксированную ширину и прозрачный (или нижний индекс z) и границы, тогда как второй div должен иметь цвет и должен меняться в зависимости от прогресса.

Если у вас есть такая настройка, и ваша проблема заключается в том, что отображается только фоновый div, то причиной является то, что background div находится поверх div прогресса, и решение заключается в том, чтобы установить фоновый div на быть прозрачным или установить прогресс div на вершине, установив его z-index на большее значение.