正文 

当前位置： 首页 > 知识 >

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

     2023-05-09     253

关键词：

【中文标题】获取 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>

【讨论】：

获取asp.net网格单元的内部按钮并使用c sharp更改其css属性？

...描述】：我有一个网格，但是当我使用隐藏它的单元格时GridView1.Rows[i].Cells[10].CssClass="controlview";和cs 查看详情

如何查找从 ASP.NET MVC 页面单击的表格单元格值？

】如何查找从ASP.NETMVC页面单击的表格单元格值？【英文标题】：HowtofindtablecellvaluethatisclickedfromASP.NETMVCPage?【发布时间】：2011-01-0710:59:04【问题描述】：我正在尝试查找被点击的表格单元格的文本（来自TD）。基本上，我的JQuery... 查看详情

ASP.NET Gridview 与动态网格上的链接按钮列

】ASP.NETGridview与动态网格上的链接按钮列【英文标题】：ASP.NETGridviewwithLinkbuttoncolumnonDynamicGrid【发布时间】：2012-12-2023:06:55【问题描述】：动态网格上带有链接按钮列的ASP.NETGridviewASP.NETGridview应该有一个链接的列-第一列，单击... 查看详情

asp.net(c#)datagridview如何实现单元格值更改后自动触发事件

datagridview如何实现单元格值更改后自动触发事件而不像CellValueChanged更改时就触发，这个执行的太早了，我想要修改之后就自动执行某一事件!参考技术ACellEndEdit事件！编辑停止后触发事件本回答被提问者和网友采纳 参考技术Bdatag... 查看详情

如何在 c# ASP.NET 中使用 GridView_RowCommand 事件从 GridView 获取图像

】如何在c#ASP.NET中使用GridView_RowCommand事件从GridView获取图像【英文标题】：HowtogetimagefromGridViewusingGridView_RowCommandeventinc#ASP.NET【发布时间】：2015-06-2811:32:57【问题描述】：我正在使用c#ASP.NET在GridView内进行编辑操作。当用户单击... 查看详情

asp.net webforms ajax 更新gridview

】asp.netwebformsajax更新gridview【英文标题】：asp.netwebformsajaxupdategridview【发布时间】：2011-10-0500:31:47【问题描述】：我们有一个包含大量信息（100个或行和列）的网格视图，我们需要提高其性能。目前为了解决一些性能问题，我们... 查看详情

如何使用 jQuery 遍历表行并获取单元格值

】如何使用jQuery遍历表行并获取单元格值【英文标题】：HowtoiteratethroughatablerowsandgetthecellvaluesusingjQuery【发布时间】：2012-05-1303:57:14【问题描述】：我正在使用jQuery动态创建下表...执行我的代码后，我得到如下表：<tableid="TableV... 查看详情

从 asp.net 中的 gridview 获取检查的行

】从asp.net中的gridview获取检查的行【英文标题】：GettingCheckedrowsfromgridviewinasp.net【发布时间】：2011-08-0921:42:33【问题描述】：我在ASP.net中有一个GridView，其中有一个CheckBox列。用户可以切换CheckBox。现在，我想要的是当用户点击... 查看详情

java示例代码_设置并获取JavaFX表的单元格值，比如swing JTable

java示例代码_设置并获取JavaFX表的单元格值，比如swing JTable 查看详情

如何获取gridview单元格的值

参考技术A在GridControl中有个GridView如：gridview//鼠标单击某单元格触发的事件voidGridView_MouseUp(objectsender,MouseEventArgse)GridHitInfoHitInfo=gridview.CalcHitInfo(e.Location);//获取鼠标点击的位置if(HitInfo.InRowCell&&HitInfo.Column!=null)GridCell[]gridCells=gridvie... 查看详情

获取单元格值并在 INSERT 语句中使用它 (MS ACCESS)

】获取单元格值并在INSERT语句中使用它(MSACCESS)【英文标题】：GetcellvalueanduseitinanINSERTstatement(MSACCESS)【发布时间】：2016-03-1215:05:01【问题描述】：我想使用来自不同表的值插入一条记录只是为了说明：INSERTINTOtbl1VALUES([value1],[value2... 查看详情

单元格值的条件格式

】单元格值的条件格式【英文标题】：Conditionalformattingoncellvalue【发布时间】：2011-08-0803:22:55【问题描述】：我一直在到处研究GridViews的条件格式，但我是ASP.Net的新手并且遇到了困难。这是我发现对我最有意义的代码：protectedvoi... 查看详情

从 ASP.NET GridView 更新中获取 textarea 中的文本

】从ASP.NETGridView更新中获取textarea中的文本【英文标题】：GettingtextoutoftextareafromaASP.NETGridViewupdate【发布时间】：2011-06-1720:29:39【问题描述】：我疯了。在GridView中使用ASP.NET以及其他控件，我有以下内容：<asp:TemplateFieldHeaderText=... 查看详情

将复选框列添加到 asp.net gridview

】将复选框列添加到asp.netgridview【英文标题】：Addingacheckboxcolumntoasp.netgridview【发布时间】：2014-04-1017:57:12【问题描述】：关于在asp.net中将CheckBox列添加到gridview并获取多个值时，我有几个问题。首先，我看到每个人都将OnCheckedCh... 查看详情

嗨，我正在尝试更改单元格值更改事件中 gridview 列的值，但每次发生时我都没有得到正确的输出

】嗨，我正在尝试更改单元格值更改事件中gridview列的值，但每次发生时我都没有得到正确的输出【英文标题】：Hi,Iamtryingtochangethevalueofgridviewcolumnincellvaluechangedeventbutiamnotgettingcorrectoutputeachtimeanoccured【发布时间】：2021-04-0321:48:3... 查看详情

在 Gridview 中选择一行并将其删除 - Asp.net

】在Gridview中选择一行并将其删除-Asp.net【英文标题】：SelectingarowinGridviewanddeletingit-Asp.net【发布时间】：2013-05-0122:31:38【问题描述】：我有一个从MSAccess数据库填充其数据的gridview。我在gridview上启用了“选择”，并创建了一个删... 查看详情

使用jquery从asp.net中的gridview控件获取所有字段的值？

】使用jquery从asp.net中的gridview控件获取所有字段的值？【英文标题】：Gettingvalueofallthefieldsfromgrdiviewcontrolinasp.netusingjquery?【发布时间】：2012-05-0808:48:21【问题描述】：我正在使用jquery将gridview的选定数据发布到服务器上以便使用j... 查看详情

ASP.Net、JavaScript 中 GridView 上的线条

】ASP.Net、JavaScript中GridView上的线条【英文标题】：LinesonaGridViewinASP.Net,JavaScript【发布时间】：2017-11-1421:18:04【问题描述】：我试图在JavaScript中的GridView前面放置一条垂直线来控制间隔，但这条线出现在网格下方。有可能吗？首... 查看详情