添加进度条的 Class 基于 GridView 列值：jQuery

Question

我有一个网格，其中有一个名为 "C" 的列，它指定了 C:\ 驱动器。在该专栏中，我在 bootstrap 进度条中显示了使用过的 space。

我已经完成了用gridview绑定记录。在这里，我想根据使用的 space 更改进度条 class。假设，如果使用的 space 超过 90%，那么我想显示 progress-bar-danger 否则我想显示 progress-bar-info.

The code, I have tried and the result I am getting is below:

<asp:TemplateField>
    <ItemTemplate>
         <div class="progress">
            <div class="progress-bar progress-bar-info progress-bar-striped active" id="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                 <%# Eval("C") %>
             </div>
         </div>
     </ItemTemplate>                                
 </asp:TemplateField>

 jQuery:

    <script type="text/javascript">

    $(function () {
        $(".progress").each(function () {
            var $this = $(this),
                value = parseInt($this.find('.progress-bar').text());
            $this.progressbar({
                value: value
            });
            // Here, "value" gives the used space value.
        });
    });

</script>

 Result:

如何根据值改变进度条class同时对齐进度条文本对齐居中？请提出建议。

Answer 1

只需通过检查值在 .each 循环中添加 progress-bar-danger class。

$(function () {
  $(".progress").each(function (index, elem) {
    var $this = $(this),
        value = parseInt($this.find('.progress-bar').text());
        /*
        $this.progressbar({
            value: value
        });
        */
    if ( value > 90 ) {
      $(elem).find('.progress-bar').addClass('progress-bar-danger');
    }
    // Here, "value" gives the used space value.
  });
});

.container {
  margin-top: 40px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
          60%
        </div>
      </div>
      <br />
      <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 91%;">
          91%
        </div>
      </div>                
    </div>
  </div>
</div>

添加进度条的 Class 基于 GridView 列值：jQuery

Add Progress Bar's Class based on GridView column value: jQuery

asp.net

jquery

gridview

twitter-bootstrap

progress-bar