添加在HTML表格單元格進度條在Razor視圖

我有一個HTML表，我想添加一個進度條：像塊進度條這裏http://www.telerik.com/aspnet-mvc/progressbar 我從存儲作爲存儲過程中獲取數據目前有一個數字，需要將其顯示爲進度條。添加在HTML表格單元格進度條在Razor視圖

有人可以指出我在正確的方向。我一直在這個任務上停留了一段時間。這是我的代碼到目前爲止。

代碼：

<script> 
    $(document).ready(function() { 

     var pb = $("#profileCompleteness").kendoProgressBar({ 
      type: "chunk", 
      chunkCount: 36, 
      min: 0, 
      max: 36, 
      value: 4 
     }) 
      $(function() { 
      var pb = $("#profileCompleteness").data("kendoProgressBar"); 
      $(this).find(".progress").kendoProgressBar({value: item.percentage}) 

     }); 
    }) 
</script>

裏面的HTML表：

@foreach (var item in Model) 
     { 
      <td align="center"> 
        <div id="profileCompleteness"></div> 

       @Html.DisplayFor(modelItem => item.Percentage) 
       @Html.DisplayFor(modelItem => item.ProfileCompleteness) 

       </td> 
}

我想獲得相當於從數據庫中輸出百分比，目前，我有硬編碼的百分比值4以上。我非常感謝提前的幫助。

感謝

來源

2016-12-13 Hari

你有什麼代碼，使遠嗎？你試過什麼錯？請提供您迄今爲止獲得的代碼。 – Luke

我已經添加了div標籤，

，並添加了一個類似如下的CSS類：.progress { background：＃333; border-radius：13px; height：20px; width：300px; padding：3px; } 。進展{ 內容：''; display：block; 背景：橙色; 寬度：50％; 身高：100％; border-radius：9px; }我看不到進度條了。我只能看到數字。謝謝 – Hari

setInterval(function() { 
 
    var randomWidth = 200*Math.random() + "px"; 
 
    document.getElementById("progress").style.width = randomWidth;}, 1000);

#progress-bar { 
 
    width: 200px; 
 
    height: 10px; 
 
    background-color: black; 
 
    position: absolute; 
 
    
 
    top: 0px; 
 
    left: 0px; 
 
    z-index -1; 
 
    } 
 

 
#progress { 
 
    width: 40px; 
 
    height: 10px; 
 
    background-color: red; 
 
    position: absolute; 
 
    top:0px; 
 
    left:0px; 
 
    z-index:7; 
 
}

<div> 
 
    <div id="progress-bar"> </div> 
 
    <div id="progress"> </div> 
 
</div>

來源

2016-12-14 04:58:51 murtuza

感謝Murtuza的回覆。 – Hari

需求的細微變化，我被要求使用Kendo控件來實現進度條。我可以渲染kendo進度條，我可以對值進行硬編碼以獲取進度條輸出，但是我需要根據來自數據庫的值實時渲染進度條。有人可以指導我。謝謝，我將把上面的代碼放在我原來的文章中。 – Hari

添加在HTML表格單元格進度條在Razor視圖

回答

相關問題