Question

 $.get('jobs', {
    }, function (responseText) {
        rt = JSON.parse(responseText);
        console.log(rt);
        for (i = 0; i < rt.length; i++)
        {
            $("#jobs").append("<tr><td><div id='progressbar"+i+"' class='progressbar'></div></td></tr>");
             pval = (rt[i][2] / rt[i][1]) * 100;

            $("#progressbar"+i).progressbar({
                value: pval,
                max:  100
            });

        }

    });

我已经编写了这段代码，以便在表格的每一行的td上创建进度条。当我在一行中做它时，它工作正常，但在我的Db中添加了多行之后，这些值并不准确。即使pval的值为100，它也会填充进度条的1/4。

Answer 1

我无法复制这个问题。您可能需要编辑帖子并包含更多详细信息，示例数据以及Console生成的任何错误。

我创建了以下测试：https://jsfiddle.net/Twisty/0v4q5a8z/

<强> HTML

<div class="ui-widget">
  <a href="#" id="getProgress" class="button">Get Progress</a>
  <table id="jobs" width="100%">
    <tbody>
    </tbody>
  </table>
</div>

<强>的JavaScript

var progress = [
  ["p1", 100, 100],
  ["p2", 100, 75],
  ["p3", 100, 22]
];

function getProgress(source, target) {
  /* Ajax Post used for Example purposes
  ** Example response:
  ** Array [
  **   ["p1", 100, 100],
  **   ["p2", 100, 80],
  **   ["p3", 100, 75]
  ** ]
  */

  $.ajax({
    url: source,
    data: {
      json: JSON.stringify(progress)
    },
    type: "POST",
    dataType: "json",
    success: function(responseText) {
      var rt, pval;
      rt = responseText
      console.log(rt.toString());
      for (i = 0; i < rt.length; i++) {
        target.append("<tr><td><div id='progressbar-" + i + "' class='progressbar'></div></td></tr>");
        pval = (rt[i][2] / rt[i][1]) * 100;
        $("#progressbar-" + i).progressbar({
          value: pval,
          max: 100
        });
      }
    }
  });
}

$(function() {
  $(".button").button();
  $("#getProgress").click(function(e) {
    e.preventDefault();
    getProgress("/echo/json/", $("#jobs"));
  });
});

此测试按预期工作。你的代码可能不那么激烈了。功能可以是：

function getProgress(source, target) {
  $.getJSON(source, function(responseText) {
      var rt, pval;
      rt = responseText
      for (i = 0; i < rt.length; i++) {
        target.append("<tr><td><div id='progressbar-" + i + "' class='progressbar'></div></td></tr>");
        pval = (rt[i][2] / rt[i][1]) * 100;
        $("#progressbar-" + i).progressbar({
          value: pval,
          max: 100
        });
      }
    }
  });
}

Jquery UI Progressbar填充减少了进度

1 个答案: