-2

2 つのテキスト ボックス、1 つのボタン、およびグリッド ビューがあります。

ボタンをクリックするたびに、テキストボックスの値がグリッドビューに挿入されます。

この b'cs には JavaScript が必要です。JavaScript は初めてです。

4

3 に答える 3

1

先週末、友人のプロジェクトを手伝っているときに、asp.net gridview で行レベルのクライアント側操作を実行する必要がありました。まず、asp gridview の「excel の数式」に似たものを見つけるためにグーグルで検索しました。良いものが見つからなかったので、javascript を使用して、個々のグリッドビュー行でクライアント側の操作を実行することにしました。

私のシナリオは請求書シートの生成であり、行を動的に追加する必要があり（選択した製品ごとに1つ）、行ごとの合計を表示するなどの計算を実行しました。[追加] ボタンをクリックすると、ドロップダウンで選択された項目の新しいレコードが追加されます (これはサーバー側のコードから行われます)。ここで、ユーザーは任意のテキストボックスに値を入力できます。また、システムはそれに応じて、合計超過額列のテキスト ボックス (下の画像を参照) の値を更新する必要があります。

このために、2 つの単純な JavaScript 関数を作成し、テキスト ボックスの onchange イベントでそれらを呼び出しました。以下は、私が使用したグリッド ビューと jquery コードです。

（拡大するにはクリックしてください）

私が使用したGridViewは以下でした：

<asp:GridView ID="gdvInvoiceItems" runat="server" AutoGenerateColumns="False" ShowHeader="true"
        OnRowCommand="gdvInvoiceItems_RowCommand">
        <EmptyDataTemplate>
            No items added yet.
        EmptyDataTemplate>
        <Columns>
            <asp:TemplateField HeaderText="S No.">
                <ItemTemplate>
                    <%# Container.DataItemIndex + 1 %>
                    <asp:HiddenField ID="hdnItemId" runat="server" Value='<%# Eval("Id") %>' />
                ItemTemplate>
            asp:TemplateField>
            <asp:TemplateField HeaderText="Description of Goods" ItemStyle-CssClass="description">
                <ItemTemplate>
                    <asp:TextBox ID="txtDescription" runat="server" Text='<%# Eval("Description") %>'
                        CssClass="txtDescStyle">asp:TextBox>
                ItemTemplate>
            asp:TemplateField>
            <asp:TemplateField HeaderText="Quantity(Net)" ItemStyle-CssClass="quantity">
                <ItemTemplate>
                    <asp:TextBox ID="txtQuantity" runat="server" Text='<%# Eval("Quantity") %>' onchange="javascript:Multiply(this, this.value)">asp:TextBox>
                ItemTemplate>
            asp:TemplateField>
            <asp:TemplateField HeaderText="Value Per Unit" ItemStyle-CssClass="value">
                <ItemTemplate>
                    <asp:TextBox ID="txtValue" runat="server" Text='<%# Eval("PerUnitValue") %>' onchange="javascript:Multiply(this, this.value)">asp:TextBox>
                ItemTemplate>
            asp:TemplateField>
            <asp:TemplateField HeaderText="Total Exesible Value" ItemStyle-CssClass="exesiblevalue">
                <ItemTemplate>
                    <asp:TextBox ID="txtTotalExeValue" runat="server" Text='<%# Eval("Total") %>' CssClass="TotalExeValue">asp:TextBox>
                ItemTemplate>
            asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:LinkButton ID="lnkBtnRemove" runat="server" Text="Remove" ItemStyle-CssClass="remove">
                    asp:LinkButton>
                ItemTemplate>
            asp:TemplateField>
        Columns>
    asp:GridView>

使用された JavaScript コード:

<script type="text/javascript">
      //This method is called when quantity/cost textbox looses focus with some change in content
      function Multiply(element, val)
      {
          var otherElementName = '';
          var finalElementName = '';

          //id of calling element i.e, quantity/cost textbox
          var elementName = element.id;

        //get second element, i.e., get quantity if change is in cost and vice-versa
          if(endsWith(elementName, "txtQuantity"))
          {
              otherElementName = elementName.replace("txtQuantity", "txtValue");
          }
          else if(endsWith(elementName, "txtValue"))
          {
              otherElementName = elementName.replace("txtValue", "txtQuantity");
          }    
          var otherElement = document.getElementById(otherElementName);

          //get textbox where final value is to be displayed
        finalElementName = elementName.replace("txtValue", "txtTotalExeValue")         
          var finalElement = document.getElementById(finalElementName);
          finalElement.value = otherElement.value * val;
      }

      //checks if given string ends with given suffix
      function endsWith(str, suffix) {
        return str.indexOf(suffix, str.length - suffix.length) !== -1;
    }

    script>

強調表示された行 onchange="javascript:Multiply(this, this.value)" は、魔法を行っている行です。この onchange イベントは、IntelliSense には含まれていませんが、機能します。

于 2015-02-19T12:14:19.010 に答える
0

このコードを参照してください。それはあなたに役立ちます。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
  function copyTextValue(bf) {
                if(bf.checked)
                      var text1 = document.getElementById("Name1").value;
                else
                      text1='';
                document.getElementById("Name2").value = text1;
                document.getElementById("Name3").value=text1;

                }
        </script>
</head>
<body>


       <input type="checkbox" name="check1" onchange="copyTextValue(this);"/>
<input id="Name1"><input id="Name2"><input id="Name3">


</body>
</html>
于 2013-08-05T12:57:03.373 に答える
0

それはあなたが必要とするものです.追加のjs関数は必要ありません.CompareValidatorを使用してください. テンプレート フィールドには、EditItemTemplate と<%# Bind(...) %>、データ ソース内のフィールドにバインドされたコントロール ( ) が必要です。

  <asp:TemplateField HeaderText="Units In Stock">
    <EditItemTemplate>
       <asp:TextBox ID="editUnitsInStock" Runat="server" 
             Text='<%# Bind("UnitsInStock") %>' Columns="4"></asp:TextBox>
       <asp:CompareValidator ID="CompareValidator2" Runat="server" ErrorMessage="You must provide a valid integer for Units In Stock."
            ControlToValidate="editUnitsInStock" 
            Operator="DataTypeCheck" Type="Integer">*</asp:CompareValidator>
                </EditItemTemplate>
于 2013-08-05T12:55:54.563 に答える