ASPxGridView如何將編輯模式中的兩個字段相乘並顯示在第三個字段中

Question

我已經在ASPxGridView中加載數據，當我點擊編輯鏈接時，數據以編輯模式（PopupForm模式）顯示。 當用戶更改數量字段值時，數量字段將根據數量字段值與價格字段值的乘積進行更新。 金額將會乘以價值。之後用戶將點擊更新鏈接，數據將在數據庫中修改。

這裏是我寫

<dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" EnableTheming="True" KeyFieldName="transaction_id" OnRowCommand="ASPxGridView1_RowCommand" OnRowUpdated="ASPxGridView1_RowUpdated" OnRowUpdating="ASPxGridView1_RowUpdating" Theme="Metropolis"> 
        <Columns> 
         <dx:GridViewCommandColumn ShowDeleteButton="True" ShowEditButton="True" VisibleIndex="0"> 
         </dx:GridViewCommandColumn> 
         <dx:GridViewDataTextColumn FieldName="item_number" VisibleIndex="1"> 
         </dx:GridViewDataTextColumn> 
         <dx:GridViewDataTextColumn FieldName="item_description" VisibleIndex="2"> 
         </dx:GridViewDataTextColumn> 
         <dx:GridViewDataTextColumn FieldName="item_unit" VisibleIndex="3"> 
         </dx:GridViewDataTextColumn> 
         <dx:GridViewDataTextColumn FieldName="item_quantity" VisibleIndex="4"> 
         </dx:GridViewDataTextColumn> 
         <dx:GridViewDataTextColumn FieldName="item_price" VisibleIndex="5"> 
         </dx:GridViewDataTextColumn> 
         <dx:GridViewDataTextColumn FieldName="item_amount" VisibleIndex="6"> 
         </dx:GridViewDataTextColumn> 
         <dx:GridViewDataTextColumn FieldName="voucher_number" VisibleIndex="7"> 
         </dx:GridViewDataTextColumn> 
        </Columns> 
        <SettingsBehavior ConfirmDelete="True" /> 
        <SettingsEditing Mode="PopupEditForm"> 
        </SettingsEditing> 
        <Settings ShowFilterRow="True" ShowFooter="True" /> 
       </dx:ASPxGridView> 
      </ContentTemplate> 
     </asp:UpdatePanel> 

     <br /> 

     <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:item_detailConnectionString %>" DeleteCommand="DELETE FROM [tbl_item_detail_transactions] WHERE [transaction_id] = @transaction_id" InsertCommand="INSERT INTO [tbl_item_detail_transactions] ([item_number], [item_description], [item_unit], [item_quantity], [item_price], [item_amount], [voucher_number]) VALUES (@item_number, @item_description, @item_unit, @item_quantity, @item_price, @item_amount, @voucher_number)" SelectCommand="SELECT *, (item_quantity * item_price) as item_amount2 FROM [tbl_item_detail_transactions]" UpdateCommand="UPDATE [tbl_item_detail_transactions] SET [item_number] = @item_number, [item_description] = @item_description, [item_unit] = @item_unit, [item_quantity] = @item_quantity, [item_price] = @item_price, [item_amount] = @item_amount, [voucher_number] = @voucher_number WHERE [transaction_id] = @transaction_id"> 
      <DeleteParameters> 
       <asp:Parameter Name="transaction_id" Type="Int32" /> 
      </DeleteParameters> 
      <InsertParameters> 
       <asp:Parameter Name="item_number" Type="Int32" /> 
       <asp:Parameter Name="item_description" Type="String" /> 
       <asp:Parameter Name="item_unit" Type="Int32" /> 
       <asp:Parameter Name="item_quantity" Type="Int32" /> 
       <asp:Parameter Name="item_price" Type="Int32" /> 
       <asp:Parameter Name="item_amount2" Type="Int32" /> 
       <asp:Parameter Name="voucher_number" Type="Int32" /> 
      </InsertParameters> 
      <UpdateParameters> 
       <asp:Parameter Name="item_number" Type="Int32" /> 
       <asp:Parameter Name="item_description" Type="String" /> 
       <asp:Parameter Name="item_unit" Type="Int32" /> 
       <asp:Parameter Name="item_quantity" Type="Int32" /> 
       <asp:Parameter Name="item_price" Type="Int32" /> 
       <asp:Parameter Name="item_amount" Type="Int32" /> 
       <asp:Parameter Name="voucher_number" Type="Int32" /> 
       <asp:Parameter Name="transaction_id" Type="Int32" /> 
      </UpdateParameters> 
     </asp:SqlDataSource> 

下面是JavaScript代碼

<script src="Scripts/jquery-1.8.2.js"></script> 
<script src="Scripts/jquery-1.4.1.min.js"></script> 

<script type="text/javascript"> 
    $(function() { 
     $("#ASPxGridView1").find("input[title='item_quantity']").blur(function() { 
      var item_quantity = $(this).val(); 
      var item_price = $("#ASPxGridView1").find("input[title='item_price']").val(); 
      if (item_quantity != "" && item_price != "") { 
       var total = parseInt(item_price) + parseInt(item_quantity); 
       $("#ASPxGridView1").find("input[title='item_amount']").val(total); 
      } else { 
       $("#ASPxGridView1").find("input[title='item_amount']").val(""); 
      } 
     }) 
    }) 
</script> 

Answer 1

您可以參考下面的示例具體時自動填充文本框在編輯模式下一個ASP.NET代碼字段鍵入。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<script src="../../../Scripts/jquery-1.8.2.js"></script> 
<script> 
    $(function() { 
     $("#GridView1").find("input[title='Val2']").blur(function() { 
      var val2 = $(this).val(); 
      var val1 = $("#GridView1").find("input[title='Val1']").val(); 
      if (val2 != "" && val1 != "") { 
       var total = parseInt(val1) + parseInt(val2); 
       $("#GridView1").find("input[title='Total']").val(total); 
      } else { 
       $("#GridView1").find("input[title='Total']").val(""); 
      } 
     }) 
    }) 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
    <div> 
     <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="Id" DataSourceID="SqlDataSource1"> 
      <Columns> 
       <asp:BoundField DataField="Id" HeaderText="Id" InsertVisible="False" ReadOnly="True" SortExpression="Id" /> 
       <asp:BoundField DataField="Val1" HeaderText="Val1" SortExpression="Val1" /> 
       <asp:BoundField DataField="Val2" HeaderText="Val2" SortExpression="Val2" /> 
       <asp:BoundField DataField="Total" HeaderText="Total" SortExpression="Total" /> 
       <asp:CommandField ShowEditButton="True" /> 
      </Columns> 
     </asp:GridView> 
     <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConflictDetection="CompareAllValues" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" DeleteCommand="DELETE FROM [CalTotal] WHERE [Id] = @original_Id AND (([Val1] = @original_Val1) OR ([Val1] IS NULL AND @original_Val1 IS NULL)) AND (([Val2] = @original_Val2) OR ([Val2] IS NULL AND @original_Val2 IS NULL)) AND (([Total] = @original_Total) OR ([Total] IS NULL AND @original_Total IS NULL))" InsertCommand="INSERT INTO [CalTotal] ([Val1], [Val2], [Total]) VALUES (@Val1, @Val2, @Total)" OldValuesParameterFormatString="original_{0}" SelectCommand="SELECT * FROM [CalTotal]" UpdateCommand="UPDATE [CalTotal] SET [Val1] = @Val1, [Val2] = @Val2, [Total] = @Total WHERE [Id] = @original_Id AND (([Val1] = @original_Val1) OR ([Val1] IS NULL AND @original_Val1 IS NULL)) AND (([Val2] = @original_Val2) OR ([Val2] IS NULL AND @original_Val2 IS NULL)) AND (([Total] = @original_Total) OR ([Total] IS NULL AND @original_Total IS NULL))"> 
      <DeleteParameters> 
       <asp:Parameter Name="original_Id" Type="Int32" /> 
       <asp:Parameter Name="original_Val1" Type="Int32" /> 
       <asp:Parameter Name="original_Val2" Type="Int32" /> 
       <asp:Parameter Name="original_Total" Type="Int32" /> 
      </DeleteParameters> 
      <InsertParameters> 
       <asp:Parameter Name="Val1" Type="Int32" /> 
       <asp:Parameter Name="Val2" Type="Int32" /> 
       <asp:Parameter Name="Total" Type="Int32" /> 
      </InsertParameters> 
      <UpdateParameters> 
       <asp:Parameter Name="Val1" Type="Int32" /> 
       <asp:Parameter Name="Val2" Type="Int32" /> 
       <asp:Parameter Name="Total" Type="Int32" /> 
       <asp:Parameter Name="original_Id" Type="Int32" /> 
       <asp:Parameter Name="original_Val1" Type="Int32" /> 
       <asp:Parameter Name="original_Val2" Type="Int32" /> 
       <asp:Parameter Name="original_Total" Type="Int32" /> 
      </UpdateParameters> 
     </asp:SqlDataSource> 
    </div> 
</form> 
</body> 
</html>