Question

我有两个文本框，一个按钮和网格视图。

我想要的很简单，只要我点击按钮，文本框中的值就会插入到网格视图中。

我需要javascript这个b'cs我是javascript的新手。

Answer 1

上周末，在帮助我的朋友参与他的项目时，我需要在asp.net gridview上执行行级客户端操作。首先，我搜索了一下类似于“excel中的公式”的内容，用于asp gridview。当我找不到好的东西时，我决定使用javascript在各个gridview行上执行客户端操作。

我的方案是生成发票单，其中需要动态添加行（每个产品选择一个），然后执行一些计算，如显示行总计。单击“添加”按钮，将添加在下拉列表中选择的项目的新记录（这是从服务器端代码完成的）。在这里，用户可以在任何文本框中输入值。系统必须相应地更新Total Excessible Value列文本框中的值（见下图）。

为此，我编写了两个简单的javascript函数，并在textbox的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中，但它确实有效。

Answer 2

这就是你需要的，不需要额外的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>

Answer 3

请参阅此代码。这会对你有所帮助。

<!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>

如何使用javascript将文本框值插入gridview

3 个答案: