1. 首頁
  2. 問答
  3. 使用jQuery GridViewRow進行計算回發後總計不工作

使用jQuery GridViewRow進行計算回發後總計不工作

2012-05-15 53 views
0

對於正常的GridView Row總計算，該腳本很好地工作，但是當我從GridView頁腳行添加新行時，總量不起作用。這意味着回發後這個腳本不起作用。我該如何解決這個問題？使用jQuery GridViewRow進行計算回發後總計不工作

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

}

來源

2012-05-15 CMMaung

+0

你使用updatepanel嗎？ – Aristos

+0

是兄弟，我用gridview和label_total裏面updatepanel – CMMaung

回答

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將是

​​

來源

2012-05-15 08:17:54 Aristos

0 
$('[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) { 

});

來源

2012-05-15 09:20:58 Thulasiram

+0

什麼jQuery版本我使用？你可以告訴我你的gridview代碼... – Thulasiram

+0

我更新了我的GridView代碼在我的問題和C＃代碼只是綁定。 – CMMaung

+0

當我鍵入文本框，查詢是好的，插入一行後回發，查詢不起作用。 – CMMaung

相關問題

 相關問題