【问题标题】：Calculation with jQuery GridViewRow Total not working after postback回发后使用 jQuery GridViewRow Total 计算不起作用
【发布时间】：2012-05-29 19:06:54
【问题描述】：

对于正常的 GridView Row Total 计算，此脚本运行良好，但是当我从 GridView 页脚行添加新行时，总数不起作用。这意味着回发后此脚本不起作用。我该如何解决这个问题？

ASP.NET GridView 代码

 <asp:UpdatePanel ID="UpdatePanel4" runat="server">
        <ContentTemplate>
            <asp:GridView ID="grdItems" runat="server" AutoGenerateColumns="False" CssClass="GridViewStyle"
                GridLines="None" ShowFooter="True" EmptyDataText="There is no data to show."
                Width="100%" OnRowCommand="grdItems_RowCommand" OnRowDataBound="grdItems_RowDataBound">
                <RowStyle CssClass="RowStyle" />
                <PagerStyle CssClass="PagerStyle" />
                <HeaderStyle CssClass="HeaderStyle" />
                <EditRowStyle CssClass="EditRowStyle" />
                <AlternatingRowStyle CssClass="AltRowStyle" />
                <FooterStyle CssClass="FooterStyle" />
                <Columns>
                    <asp:TemplateField HeaderText="ID" HeaderStyle-Width="10px">
                        <ItemTemplate>
                            <asp:Label ID="lblShowID" runat="server" Text='<%#Container.DataItemIndex+1 %>' />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Item">
                        <ItemTemplate>
                            <asp:TextBox ID="txtItem" runat="server" TextMode="MultiLine" Text='<%# Bind("Item") %>'
                                Width="180px" CssClass="text-long" Rows="2" />
                        </ItemTemplate>
                        <FooterTemplate>
                            <asp:TextBox ID="txtFItem" runat="server" TextMode="MultiLine" Width="180px" Rows="2" />
                            <asp:RequiredFieldValidator ID="txtFItem_rfv" runat="server" ControlToValidate="txtFItem"
                                ErrorMessage="Please enter Item Name!" ValidationGroup="Add" Display="None" />
                            <asp:ValidatorCalloutExtender ID="txtFItem_vce" runat="server" TargetControlID="txtFItem_rfv"
                                CssClass="customCalloutStyle" WarningIconImageUrl="~/App_Themes/Img/001_111.png"
                                CloseImageUrl="~/App_Themes/Img/001_051.png" />
                        </FooterTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Qty">
                        <ItemTemplate>
                            <asp:TextBox ID="txtCalcQuantity" runat="server" Text='<%# Bind("Quantity") %>' Width="30px" />
                            <asp:RegularExpressionValidator ID="txtCalcQuantity_rev" runat="server" ControlToValidate="txtCalcQuantity"
                                ValidationGroup="Remove" Display="None" ErrorMessage="Please enter valid format 99.999!"
                                ValidationExpression="[0-9]*" />
                            <asp:ValidatorCalloutExtender ID="txtCalcQuantity_vce" runat="server" TargetControlID="txtCalcQuantity_rev" />
                        </ItemTemplate>
                        <FooterTemplate>
                            <asp:TextBox ID="txtCalcQuantity" runat="server" Width="30px" />
                            <asp:RequiredFieldValidator ID="txtCalcQuantity_rfv" runat="server" ControlToValidate="txtCalcQuantity"
                                ErrorMessage="Please enter Quantity!" ValidationGroup="Add" Display="None" />
                            <asp:ValidatorCalloutExtender ID="txtCalcQuantity_vce1" runat="server" TargetControlID="txtCalcQuantity_rfv"
                                CssClass="customCalloutStyle" WarningIconImageUrl="~/App_Themes/Img/001_111.png"
                                CloseImageUrl="~/App_Themes/Img/001_051.png" />
                            <asp:RegularExpressionValidator ID="txtCalcQuantity_rev" runat="server" ControlToValidate="txtCalcQuantity"
                                ValidationGroup="Add" Display="None" ErrorMessage="Please enter valid format 99.999!"
                                ValidationExpression="[0-9]*" />
                            <asp:ValidatorCalloutExtender ID="txtCalcQuantity_vce2" runat="server" TargetControlID="txtCalcQuantity_rev"
                                CssClass="customCalloutStyle" WarningIconImageUrl="~/App_Themes/Img/001_111.png"
                                CloseImageUrl="~/App_Themes/Img/001_051.png" />
                        </FooterTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="UOM">
                        <ItemTemplate>
                            <asp:TextBox ID="txtUnit" runat="server" Text='<%# Bind("Unit") %>' Width="50px" />
                        </ItemTemplate>
                        <FooterTemplate>
                            <asp:TextBox ID="txtUnit" runat="server" Width="50px" />
                        </FooterTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Cur">
                        <ItemTemplate>
                            <asp:Label ID="lblCurrency" runat="server" Width="25px" />
                        </ItemTemplate>
                        <FooterTemplate>
                            <asp:Label ID="lblCurrency" runat="server" Width="25px" />
                        </FooterTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Unit Price (Budget)">
                        <ItemTemplate>
                            <asp:TextBox ID="txtCalcUnitPrice" runat="server" Text='<%# Bind("UnitPrice", "{0:N}") %>'
                                Width="90px" />
                            <asp:RegularExpressionValidator ID="txtCalcUnitPrice_rev" runat="server" ControlToValidate="txtCalcUnitPrice"
                                ValidationGroup="Remove" Display="None" ErrorMessage="Please enter valid format 99.999!"
                                ValidationExpression="^\-?\(?\$?\s*\-?\s*\(?(((\d{1,3}((\,\d{3})*|\d*))?(\.\d{1,4})?)|((\d{1,3}((\,\d{3})*|\d*))(\.\d{0,4})?))\)?$" />
                            <asp:ValidatorCalloutExtender ID="txtCalcUnitPrice_vce" runat="server" TargetControlID="txtCalcUnitPrice_rev" />
                        </ItemTemplate>
                        <FooterTemplate>
                            <asp:TextBox ID="txtCalcUnitPrice" runat="server" Width="90px" />
                            <asp:RequiredFieldValidator ID="txtCalcUnitPrice_rfv" runat="server" ControlToValidate="txtCalcUnitPrice"
                                ErrorMessage="Please enter Quantity!" ValidationGroup="Add" Display="None" />
                            <asp:ValidatorCalloutExtender ID="txtCalcUnitPrice_vce1" runat="server" TargetControlID="txtCalcUnitPrice_rfv"
                                CssClass="customCalloutStyle" WarningIconImageUrl="~/App_Themes/Img/001_111.png"
                                CloseImageUrl="~/App_Themes/Img/001_051.png" />
                            <asp:RegularExpressionValidator ID="txtCalcUnitPrice_rev" runat="server" ControlToValidate="txtCalcUnitPrice"
                                ValidationGroup="Add" Display="None" ErrorMessage="Please enter valid format 99.999!"
                                ValidationExpression="^\-?\(?\$?\s*\-?\s*\(?(((\d{1,3}((\,\d{3})*|\d*))?(\.\d{1,4})?)|((\d{1,3}((\,\d{3})*|\d*))(\.\d{0,4})?))\)?$" />
                            <asp:ValidatorCalloutExtender ID="txtCalcUnitPrice_vce2" runat="server" TargetControlID="txtCalcUnitPrice_rev"
                                CssClass="customCalloutStyle" WarningIconImageUrl="~/App_Themes/Img/001_111.png"
                                CloseImageUrl="~/App_Themes/Img/001_051.png" />
                        </FooterTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Amount (Budget)">
                        <ItemTemplate>
                            <asp:Label ID="lblAmount" runat="server" Text='<%# Bind("Amount", "{0:N}") %>' Width="95px" />
                            <asp:HiddenField ID="hfAmount" runat="server" Value='<%# Eval("Amount").ToString()%>' />
                        </ItemTemplate>
                        <FooterTemplate>
                            <asp:Label ID="lblAmount" runat="server" Width="95px" />
                            <asp:HiddenField ID="hfAmount" runat="server" />
                        </FooterTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            <span class="red">#</span>Unit Price (Actual)</HeaderTemplate>
                        <ItemTemplate>
                            <asp:TextBox ID="txtCalcActUnitPrice" runat="server" Text='<%# Bind("ActUnitPrice", "{0:N}") %>'
                                Width="90px" />
                            <asp:RegularExpressionValidator ID="txtCalcActUnitPrice_rev" runat="server" ControlToValidate="txtCalcActUnitPrice"
                                ValidationGroup="Purchaser" Display="None" ErrorMessage="Please enter valid format 99.999!"
                                ValidationExpression="^\-?\(?\$?\s*\-?\s*\(?(((\d{1,3}((\,\d{3})*|\d*))?(\.\d{1,4})?)|((\d{1,3}((\,\d{3})*|\d*))(\.\d{0,4})?))\)?$" />
                            <asp:ValidatorCalloutExtender ID="txtCalcActUnitPrice_vce" runat="server" TargetControlID="txtCalcActUnitPrice_rev"
                                CssClass="customCalloutStyle" WarningIconImageUrl="~/App_Themes/Img/001_111.png"
                                CloseImageUrl="~/App_Themes/Img/001_051.png" />
                        </ItemTemplate>
                        <FooterTemplate>
                            <asp:TextBox ID="txtCalcActUnitPrice" runat="server" Width="90px" />
                            <asp:RegularExpressionValidator ID="txtCalcActUnitPrice_rev" runat="server" ControlToValidate="txtCalcActUnitPrice"
                                ValidationGroup="Remove" Display="None" ErrorMessage="Please enter valid format 99.999!"
                                ValidationExpression="^\-?\(?\$?\s*\-?\s*\(?(((\d{1,3}((\,\d{3})*|\d*))?(\.\d{1,4})?)|((\d{1,3}((\,\d{3})*|\d*))(\.\d{0,4})?))\)?$" />
                            <asp:ValidatorCalloutExtender ID="txtCalcActUnitPrice_vce" runat="server" TargetControlID="txtCalcActUnitPrice_rev"
                                CssClass="customCalloutStyle" WarningIconImageUrl="~/App_Themes/Img/001_111.png"
                                CloseImageUrl="~/App_Themes/Img/001_051.png" />
                        </FooterTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            <span class="red">#</span>Amount (Actual)</HeaderTemplate>
                        <ItemTemplate>
                            <asp:Label ID="lblActAmount" runat="server" Text='<%# Eval("ActAmount").ToString()%>'
                                Width="95px" />
                            <asp:HiddenField ID="hfActAmount" runat="server" Value='<%# Eval("ActAmount").ToString()%>' />
                        </ItemTemplate>
                        <FooterTemplate>
                            <asp:Label ID="lblActAmount" runat="server" Width="95px" />
                            <asp:HiddenField ID="hfActAmount" runat="server" />
                        </FooterTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            <span class="red">#</span>Type</HeaderTemplate>
                        <ItemTemplate>
                            <asp:DropDownList ID="ddlType" runat="server" CssClass="text-small" />
                        </ItemTemplate>
                        <FooterTemplate>
                            <asp:DropDownList ID="ddlType" runat="server" CssClass="text-small" />
                        </FooterTemplate>
                    </asp:TemplateField>                        
                    <asp:TemplateField>
                        <HeaderTemplate>
                            <span class="red">#</span>DO No.</HeaderTemplate>
                        <ItemTemplate>
                            <asp:TextBox ID="txtDO" runat="server" Width="90px" Text='<%# Bind("DONo") %>' />
                        </ItemTemplate>
                        <FooterTemplate>
                            <asp:TextBox ID="txtFDO" runat="server" Width="90px" />
                        </FooterTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            <span class="red">#</span>Date of DO</HeaderTemplate>
                        <ItemTemplate>
                            <asp:TextBox ID="txtDODate" runat="server" Width="90px" Text='<%# Bind("DODate", "{0:dd-MMM-yyyy}") %>' />
                            <asp:CalendarExtender ID="txtDODate_ce" runat="server" TargetControlID="txtDODate"
                                PopupPosition="Right" Animated="true" Format="dd-MMM-yyyy" />
                            <asp:MaskedEditExtender ID="txtDODate_me" runat="server" ClearMaskOnLostFocus="False"
                                CultureName="en-GB" Mask="99-LLL-9999" TargetControlID="txtDODate" UserDateFormat="DayMonthYear" />
                            <asp:RegularExpressionValidator ID="txtDODate_rev" runat="server" ControlToValidate="txtDODate"
                                Display="None" ErrorMessage="Please enter valid date format dd-MMM-yyyy" ValidationGroup="None"
                                ValidationExpression="^(0?[1-9]|[12][0-9]|3[01])-(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)-(19|20)\d\d$" />
                            <asp:ValidatorCalloutExtender ID="txtDODate_vce" runat="server" TargetControlID="txtDODate_rev"
                                CssClass="customCalloutStyle" WarningIconImageUrl="~/App_Themes/Img/001_111.png"
                                CloseImageUrl="~/App_Themes/Img/001_051.png" />
                        </ItemTemplate>
                        <FooterTemplate>
                            <asp:TextBox ID="txtDODate" runat="server" Width="90px" />
                            <asp:CalendarExtender ID="txtDODate_ce" runat="server" TargetControlID="txtDODate"
                                PopupPosition="Right" Animated="true" Format="dd-MMM-yyyy" />
                            <asp:MaskedEditExtender ID="txtDODate_me" runat="server" ClearMaskOnLostFocus="False"
                                CultureName="en-GB" Mask="99-LLL-9999" TargetControlID="txtDODate" UserDateFormat="DayMonthYear" />
                            <asp:RegularExpressionValidator ID="txtDODate_rev" runat="server" ControlToValidate="txtDODate"
                                Display="None" ErrorMessage="Please enter valid date format dd-MMM-yyyy" ValidationGroup="None"
                                ValidationExpression="^(0?[1-9]|[12][0-9]|3[01])-(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)-(19|20)\d\d$" />
                            <asp:ValidatorCalloutExtender ID="txtDODate_vce" runat="server" TargetControlID="txtDODate_rev"
                                CssClass="customCalloutStyle" WarningIconImageUrl="~/App_Themes/Img/001_111.png"
                                CloseImageUrl="~/App_Themes/Img/001_051.png" />
                        </FooterTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField ItemStyle-HorizontalAlign="Center" FooterStyle-HorizontalAlign="Center"
                        FooterStyle-CssClass="action" ItemStyle-CssClass="action">
                        <ItemTemplate>
                            <asp:LinkButton ID="btnRemove" runat="server" CommandName="Select" CssClass="delete"
                                Text="Del" OnClientClick="return confirm('Are you sure you want to delete this?');" />
                        </ItemTemplate>
                        <FooterTemplate>
                            <asp:LinkButton ID="btnAdd" runat="server" ValidationGroup="Add" CommandName="Insert"
                                CssClass="add" Text="Add" />
                            <%--OnClientClick="return confirm('Are you sure you want to submit this?');"--%></FooterTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
            <asp:SqlDataSource ID="Supplier_DS" runat="server" SelectCommand="Select '' as ID, '' as Name 
                Union Select ID, Name From tbl_Supplier Group By ID, Name Order By Name" ConnectionString="<%$ ConnectionStrings:RFP_CS %>" />
            <table style="float: right; width: 100%; text-align: right;">
                <tbody>
                    <tr>
                        <td style="color: Red; text-align: right; width: 200px">
                            <span class="red">#</span>Discount (Actual)
                        </td>
                        <td style="width: 110px">
                            <%--<asp:TextBox ID="txtDiscount" runat="server" CssClass="text-medium" Style="text-align: right;
                                color: Red" AutoPostBack="true" OnTextChanged="txtDiscount_TextChanged" Width="105px" />
                            <asp:RegularExpressionValidator ID="txtDiscount_rev" runat="server" ControlToValidate="txtDiscount"
                                ValidationGroup="submit" Display="None" ErrorMessage="Please enter valid format 99.999!"
                                ValidationExpression="^\$?(\d{1,3},?(\d{3},?)*\d{3}(.\d{0,3})?|\d{1,3}(.\d{2})?)$" />
                            <asp:ValidatorCalloutExtender ID="txtDiscount_vce" runat="server" TargetControlID="txtDiscount_rev" />--%>
                        </td>
                        <td style="width: 310px; text-align: left;">
                            <asp:TextBox ID="txtActDiscount" runat="server" CssClass="text-medium" Style="text-align: right;
                                color: Red" AutoPostBack="true" OnTextChanged="txtActDiscount_TextChanged" Width="105px" />
                            <asp:RegularExpressionValidator ID="txtActDiscount_rev" runat="server" ControlToValidate="txtActDiscount"
                                ValidationGroup="submit" Display="None" ErrorMessage="Please enter valid format 99.999!"
                                ValidationExpression="^\$?(\d{1,3},?(\d{3},?)*\d{3}(.\d{0,3})?|\d{1,3}(.\d{2})?)$" />
                            <asp:ValidatorCalloutExtender ID="txtActDiscount_vce" runat="server" TargetControlID="txtActDiscount_rev" />
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 290px">
                            Total
                        </td>
                        <td style="font-weight: bold; width: 110px;">
                            <asp:Label ID="lblTotal" runat="server" CssClass="text-medium" Width="110px" />
                        </td>
                        <td style="font-weight: bold; width: 310px; text-align: left;">
                            <asp:Label ID="lblActTotal" runat="server" CssClass="text-medium" Width="110px" Style="text-align: right" />
                            <asp:HiddenField ID="hfActTotal" runat="server" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </ContentTemplate>
    </asp:UpdatePanel>

JQuery GridView 计算

// For GridView Calculation
$("[id*=grdItems]input[type=text][id*=txtCalc]").live("keyup", function(e) {
    var quantity = $(e.target).closest('tr').find("input[type=text][id*=txtCalcQuantity]").val();
    var price = $(this).closest('tr').find("input[type=text][id*=txtCalcUnitPrice]").val().replace(/,/g, '');
    var actprice = $(this).closest('tr').find("input[type=text][id*=txtCalcActUnitPrice]").val().replace(/,/g, '');

    var total = parseFloat(price) * parseInt(quantity);
    var acttotal = parseFloat(actprice) * parseInt(quantity);


    if (isNaN(total)) total = 0;
    $(e.target).closest('tr').find("[id*=lblAmount]").text(total.toFixed(2));
    $(e.target).closest('tr').find("[id*=hfAmount]").val(total);

    if (isNaN(acttotal)) acttotal = 0;
    $(e.target).closest('tr').find("[id*=lblActAmount]").text(acttotal.toFixed(2));
    $(e.target).closest('tr').find("[id*=hfActAmount]").val(acttotal);

    GrossTotal();
    GrossActTotal();
});    

var gross;
function GrossTotal() {
    gross = 0;
    $("[id*=grdItems][id*=hfAmount]").each(function(index, val) {

        var value = parseFloat($(val).val().replace(/,/g, ''));
        if (isNaN(value)) value = 0;
        gross = gross + value;
    });
    $("[id*=lblTotal]").text(gross.toFixed(2));

}

var actgross;
function GrossActTotal() {
    actgross = 0;
    $("[id*=grdItems][id*=lblActAmount]").each(function(index, actitem) {

        var value = parseFloat($(actitem).text().replace(/,/g, ''));
        if (isNaN(value)) value = 0;
        actgross = actgross + value;
    });

    var discount = parseFloat($("[id*=txtActDiscount]").text());
    if (isNaN(discount)) discount = 0;
    actgross = actgross - discount;

    $("[id*=lblActTotal]").text(actgross.toFixed(2));
    $("[id*=hfActTotal]").val(actgross);

}

【问题讨论】：

你使用更新面板吗？
是的，兄弟，我在 updatepanel 中使用了 gridview 和 label_total

标签： jquery asp.net gridview

【解决方案1】：

当您使用 UpdatePanel 时，在回发后 DOM（html 和元素的结构）发生了变化并且您设置的 javascript 需要再次初始化。出于这个原因，UpdatePanel 提供了这个 javascript 功能。

var prm = Sys.WebForms.PageRequestManager.getInstance();    
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);

function InitializeRequest(sender, args) {      

}

function EndRequest(sender, args) {
}

现在在 EndRequest 上，您需要重新初始化您的 javascript。你最终的 javascript 将是

    function InitCalculus()
    {
    // For GridView Calculation
    $("[id*=grdItems]input[type=text][id*=txtCalc]").live("keyup", function(e) {
        var quantity = $(e.target).closest('tr').find("input[type=text][id*=txtCalcQuantity]").val();
        var price = $(this).closest('tr').find("input[type=text][id*=txtCalcUnitPrice]").val().replace(/,/g, '');
        var actprice = $(this).closest('tr').find("input[type=text][id*=txtCalcActUnitPrice]").val().replace(/,/g, '');

        var total = parseFloat(price) * parseInt(quantity);
        var acttotal = parseFloat(actprice) * parseInt(quantity);


        if (isNaN(total)) total = 0;
        $(e.target).closest('tr').find("[id*=lblAmount]").text(total.toFixed(2));
        $(e.target).closest('tr').find("[id*=hfAmount]").val(total);

        if (isNaN(acttotal)) acttotal = 0;
        $(e.target).closest('tr').find("[id*=lblActAmount]").text(acttotal.toFixed(2));
        $(e.target).closest('tr').find("[id*=hfActAmount]").val(acttotal);

        GrossTotal();
        GrossActTotal();
    }); 
    }

   // you can run this onload page, I just place it here to simulate your code
   InitCalculus();

    var prm = Sys.WebForms.PageRequestManager.getInstance();    
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);

    function InitializeRequest(sender, args) {      

    }

    function EndRequest(sender, args) {
       InitCalculus();
    }

【讨论】：

【解决方案2】：

$('[id*=grdItems]').find('input[type=text][id*=txtCalc]').live('keyup', function (e) { 

});

//Or 

$("[id*=grdItems] input[type=text][id*=txtCalc]").live("keyup", function(e) { 

});

//Or 

$("[id*=grdItems] > input[type=text][id*=txtCalc]").live("keyup", function(e) { 

});

//=============================================== =======//

$('[id*=grdItems]').find('input[type=text][id*=txtCalc]').on('keyup', function (e) { 

});

//Or 

$("[id*=grdItems] input[type=text][id*=txtCalc]").on("keyup", function(e) { 

});

//Or 

$("[id*=grdItems] > input[type=text][id*=txtCalc]").on("keyup", function(e) { 

});

【讨论】：

我在问题中更新了我的 GridView 代码，而 C# 代码只是绑定。
输入文本框时查询正常，插入一行后回发，查询无效。
您使用的是什么 jquery 版本？使用 -> 现场试试这个看看
我使用了 JQuery 1.7.1，实际上 gridview 计算运行良好。问题是在我从 GridView rowcommand 事件中在 gridview 中添加一行之后，我不知道如何调用/计算我的 gridview。所以我使用了 GridView_RowDataBound。其实我想用jquery，所以<asp:LinkButton ID="btnAdd" runat="server" ValidationGroup="Add" CommandName="Insert" CssClass="add" Text="Add" />