如何通过该网格视图中的TemplateField复选框更新gridview中的标签,而不进行回发

时间:2014-07-10 13:13:05

标签: asp.net gridview checkbox asp.net-ajax

我有一个gridview,每行在第一列都有一个复选框。我将datagridview绑定到bill的数据源。我想显示在gridview之外的标签上检查的账单总和。而且我也不希望复选框做回发。我试着用javascript(asp:复选框的onclick事件)做到这一点,但无法实现。我也尝试了AjaxControlToolkit但又失败了。

请帮忙。

<asp:GridView runat="server" ID="GridView1" AutoGenerateColumns="False" Width="100%"
                    CssClass="gv">
                    <Columns>
                        <asp:TemplateField HeaderText="Seç" HeaderStyle-Width="50px">
                            <ItemTemplate>
                                <asp:CheckBox ID="chkRow" runat="server" Checked="false"/>
                            </ItemTemplate>
                            <HeaderStyle HorizontalAlign="Center" />
                            <ItemStyle HorizontalAlign="Center" />
                        </asp:TemplateField>
                        <asp:BoundField DataField="InvoiceDate" HeaderText="Fatura Tarihi" DataFormatString="{0:dd-MM-yyyy}">
                            <HeaderStyle HorizontalAlign="Center" />
                            <ItemStyle HorizontalAlign="Center" />
                        </asp:BoundField>
                        <asp:BoundField DataField="Amount" HeaderText="Tutar" DataFormatString="{0:N2} TL">
                            <HeaderStyle HorizontalAlign="Right" />
                            <ItemStyle HorizontalAlign="Right" />
                        </asp:BoundField>
 </Columns>
                </asp:GridView>

1 个答案:

答案 0 :(得分:1)

正如您所提到的,您还尝试使用JS作为解决方案。所以我在这里发布你的解决方案。 我认为你的标签 id lbl (你想要显示相应列名Tutar的总和)。 你的标签

<asp:Label ID="lbl" runat="server"></asp:Label>

您只需要在复选框中添加一个类。我用 mychk 。 所以你的复选框代码就像这样

Columns>
     <asp:TemplateField HeaderText="Seç" HeaderStyle-Width="50px">
         <ItemTemplate>
             <asp:CheckBox ID="chkRow" runat="server" Checked="false" class="mychk" />
          </ItemTemplate>
    </asp:TemplateField>

你的jquery将是

<script type="text/javascript">
        $(document).ready(function () {
            var sum = parseInt($('#lbl').html()) || 0;
            $('.mychk input[type="checkbox"]').on('change', function () {
                if ($(this).is(':checked')) {
                    sum += parseInt($(this).closest('tr').find('td:eq(2)').html()) || 0;
                } else {
                    sum -= parseInt($(this).closest('tr').find('td:eq(2)').html()) || 0;
                }
                $('#lbl').html(sum);
            });
        }); 
</script>

checkuncheck checkboxes

时,它会显示总和