Получите значение ячейки ASP.NET GridView и покажите в индикаторе прогресса JQuery

Question

У меня есть ASP.NET GridView, который заполняется из базы данных SQL Server.Это работает нормально.Мой код использует C #.

Один из столбцов в GridView содержит панель прогресса JQuery, а другой - несколько ответов.См. Изображение ниже:

Как можно получить каждое значение для столбца счетчик ответов и отображать это значение в каждой строке, соответствующей JQuery Progressbar?

Мой индикатор выполнения 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:

 $(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'); }
        );

   });

Я не уверен, где быть здесь, поэтому любая помощь будет оценена.

Answer 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) });
});

ВСЕ это было просто с моей головы без какой-либо реальной проверки кода .. Но это будет ИДЕЯ:

1. Получить значение из ASP.NET в скрытое поле рядом с индикаторами выполнения в каждой строке
2. Обновите каждый индикатор выполнения в jQuery, указав значение в скрытом поле HTML.

Надеюсь, это поможет

Answer 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;" 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>