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

Posted 2023-05-09

【中文标题】获取 ASP.NET GridView 单元格值并在 JQuery 进度条中显示

【英文标题】：Get ASP.NET GridView cell value and show in JQuery Progress Bar

【发布时间】：2012-04-05 07:58:16

【问题描述】：

我有一个从 SQL Server 数据库填充的 ASP.NET GridView。这工作正常。我后面的代码使用的是 C#。

GridView 中的一列包含一个 JQuery 进度条，另一列包含许多响应。请看下图：

如何获取 response count 列的每个值并在对应 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'); 
        );

   );

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

【参考方案1】：

在包含进度条的 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 中的每个进度条。

希望对你有帮助

【讨论】：

不幸的是，当我使用此代码时，进度条消失了。我已经检查并正确设置了隐藏字段值，但没有出现进度条。请看这张图片：i41.tinypic.com/344cz6a.png

我会检查并回复你

嗨 Rupert，我编辑了 jQuery 部分。现在应该可以了。你是对的.. 进度条是空的，因为隐藏字段的值被视为字符串。在'parseInt'之后，它起作用了。还因为如果您在母版页下添加 ASP.NET 可能会更改元素的 ID，我切换到将其选择为没有 ID 的“隐藏字段”本身（只要您在 pbcontainer 下只有 1 个隐藏字段就可以工作，就像我们现在一样）。希望这会有所帮助

【参考方案2】：

试试这个：

<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;" >
    <tr>
        <td colspan="3">4. Have you used an iPad before?</td>
    </tr>
    <tr>
        <td >Answer</td>
        <td>Percentage</td>
        <td >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>