获取ASP.NET GridView单元格值并在JQuery进度条中显示

我有一个从SQL Server数据库填充的ASP.NET GridView。这工作正常。我的代码背后是使用C＃。获取ASP.NET GridView单元格值并在JQuery进度条中显示

GridView中的一列包含JQuery进度栏，另一列包含一些响应。请看下面的图片：

enter image description here

我该如何去获得的响应每个值计算列，并显示在相应的JQuery的进度条各行这个价值？

我JQuery的进度条是目前静态的，它产生的，像这样：

<asp:DataList runat="server" id="listResponses" DataKeyField="QuestionID" OnItemDataBound="listResponses_ItemDataBound" Width="100%"> 
    <ItemTemplate> 
     <div class="question_header"> 
      <p><strong><asp:Label ID="lblOrder" runat="server" Text='<%# Container.ItemIndex + 1 %>'></asp:Label>. <%# DataBinder.Eval(Container.DataItem, "QuestionText") %></strong></p> 
     </div> <!-- end question_header --> 
     <asp:GridView runat="server" ID="gridResponses" DataKeyNames="AnswerID" AutoGenerateColumns="False" CssClass="responses" AlternatingRowStyle-BackColor="#f3f4f8"> 
      <Columns> 
       <asp:BoundField DataField="AnswerTitle" ItemStyle-Width="250px"></asp:BoundField> 
       <asp:TemplateField> 
        <ItemTemplate> 
         <div class="pbcontainer"> 
          <div class="progressbar"></div> 
         </div> 
        </ItemTemplate> 
       </asp:TemplateField> 
       <asp:BoundField DataField="Responses" HeaderText="Response Count" HeaderStyle-Width="100px" /> 
      </Columns> 
     </asp:GridView> 
    </ItemTemplate> 
</asp:DataList>

使用提供的JQuery的UI网站上的以下脚本：

$(function() { 

     // Progressbar 
     $(".progressbar").progressbar({ 
      value: 40 
     }); 
     //hover states on the static widgets 
     $('#dialog_link, ul#icons li').hover(
      function() { $(this).addClass('ui-state-hover'); }, 
      function() { $(this).removeClass('ui-state-hover'); } 
     ); 

    });

我不知道在这里是所以任何帮助，将不胜感激。

来源

2012-03-20 HGomez90

在你的div保存进度条，添加一个隐藏字段，像这样：

<div class="pbcontainer"> 
    <!-- This is the new line in markup. Replace NumOfResponses with your value field --> 
    <asp:HiddenField ID="hiddenValue" runat="server" Value='<%# Eval("NumOfResponses") %>' /> 

    <div class="progressbar"></div> 
</div

现在包含一个进度条也各div包含带有值隐藏字段，你需要更新进度条用。

在jQuery中，您可以设置数据列表中的所有进度条等于它们各自的值。例如：

编辑：（以下jQuery代码进行了修改）

$('.pbcontainer').each(function() { 
    // We assume that there is only 1 hidden field under 'pbcontainer' 
    var valueFromHiddenField = $('input[type=hidden]', this).val(); 

    $('.progressbar', this).progressbar({ value: parseInt(valueFromHiddenField) }); 
});

所有这些只是从我的头顶，没有任何实际的代码验证.. 但是，这将是IDEA：

从ASP.NET获取值到每行进度条附近的隐藏字段
使用HTML隐藏字段中的值更新jQuery中的每个进度条。

希望这有助于

来源

2012-03-20 20:23:26

不幸的是，当我使用此代码的进度条消失。我已检查并且隐藏的字段值设置正确，但进度条未显示。请看这个图像：http://i41.tinypic.com/344cz6a.png – HGomez90 2012-03-20 21:23:07

我会检查它并回复给你 – 2012-03-21 05:10:49

嗨，鲁珀特，我编辑了jQuery部分。现在应该可以。你是对的..进度条是空的，因为隐藏字段的值被当作字符串。在'parseInt'之后，它工作。另外，因为ASP.NET可能会更改元素的ID，所以如果您将它添加到母版页中，我会切换为将其选作“隐藏字段”，而不会使用ID（只要您在pbcontainer下只有一个隐藏字段，就像我们现在这样）。希望这有助于 – 2012-03-21 05:58:45

试试这个：

<script> 
    var maxBarVal = 0; 
    $(function() { 
     $('.row').each(function() { 
      var val = parseInt($(".value", this).text()); 
      maxBarVal += val; 
     }); 
     $('.row').each(function() { 
      var val = parseInt($(".value", this).text()); 
      $('.bar', this).progressbar({ value: val/maxBarVal * 100 }); 
     }); 
    }); 
</script>

这是从模拟GridView控件输出：

<table border="1" cellpadding="3" cellspacing="0" style="border-collapse: collapse;" width="100%"> 
    <tr> 
     <td colspan="3">4. Have you used an iPad before?</td> 
    </tr> 
    <tr> 
     <td width="250">Answer</td> 
     <td>Percentage</td> 
     <td width="100">Response Count</td> 
    </tr> 
    <tr class="row"> 
     <td>Yes</td> 
     <td><div class="bar"></div></td> 
     <td class="value">4</td> 
    </tr> 
    <tr class="row"> 
     <td>No</td> 
     <td><div class="bar"></div></td> 
     <td class="value">2</td> 
    </tr> 
</table>

来源

2012-03-20 22:15:55 Walk

获取ASP.NET GridView单元格值并在JQuery进度条中显示

回答

相关问题