使用 javascript 在网格视图中添加新行

本文关键字：添加 新行 视图 网格 javascript 使用 | 更新日期: 2023-09-27 18:35:22

在下面的代码中，我有网格视图，其中包含文本框和下拉列表，我想使用 JavaScript 添加行。我的目标是避免在添加行时回发。

标记代码：

<asp:GridView runat="server" ID="gvProduct" AutoGenerateColumns="false" 
              Width="100%" CellPadding="4" ForeColor="#333333" ShowFooter="true"
              PageSize-Mode="NumericPages" PagerStyle-Visible="true" AllowPaging="false" AllowSorting="true"
              CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt"
              OnRowDataBound="gvProduct_RowDataBound" OnRowCommand="gvProduct_RowCommand" OnRowDeleting="gvProduct_RowDeleting">
  <Columns>
    <asp:TemplateField HeaderText="Product Name" ItemStyle-Width="350px">
      <ItemTemplate>
        <asp:DropDownList ID="ddlProduct" runat="server" AutoPostBack="false" Style="width: 100%; height:23px" ></asp:DropDownList>
      </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Current Stock" ItemStyle-Width="80px" Visible="false">
      <ItemTemplate>
        <asp:Label ID="lblCurrentStock" runat="server" onkeypress="return isNumberKey(event, false);" Height="20px" style="width:80px" Enabled="false" ></asp:Label>
      </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Quantity" ItemStyle-Width="80px">
      <ItemTemplate>
        <asp:TextBox ID="txtQuantity"  onkeypress="return isNumberKey(event, false);"    runat="server" Height="20px" Width="150px" onblur="js_function(this);"   > </asp:TextBox>
        <asp:Label ID="lblunittype" runat="server" ></asp:Label>
      </ItemTemplate>
    </asp:TemplateField>
  </Columns>
</asp:GridView>
<asp:Button ID="Button2" OnClientClick="AddRow(); return false;" runat="server" Text="Button" />

Javascript代码：

function AddRow() {
    var table = document.getElementById('<%=gvProduct.ClientID %>');
    var newRow = table.insertRow();
    var i = 0;
    for (i = 0; i < table.rows[0].cells.length; i++) {
        var newCell = newRow.insertCell();
        newCell.innerHTML = 'New Row';
    }
}

使用 javascript 在网格视图中添加新行

  • asp 中的网格视图 = HTML 中的表
  • asp 网格视图中的新行 = HTML 中表中的新行

示例 JavaScript 代码：

function AddRow() {
    let tableRef = document.getElementById('MainContent_gvItems');
    let newRow = tableRef.insertRow(-1);//inserts at last row
    let Cell0 = newRow.insertCell(0);
    let Text0 = document.createTextNode('mydata');
    Cell0.appendChild(Text0);
}

顺便说一句，GridView 必须可见，即使它是空的。

如果您只想向表格中添加行以进行演示，那么@Mostafa Shehata答案应该可以正常工作。

但是，在 JavaScript 中添加行不会将其附加到 GridView 数据源。因此，在后端处理数据（例如保存到数据库）时会遇到问题。

两种可能的解决方案：

  1. 将 GridView 替换为 html 表。数据可以使用对 restful API 的 JavaScript 调用进行填充和更新。
  1. 使用空行预填充 GridView 数据源。
  • 数据绑定 x 数量的空字段（例如 10 个空字段）。
  • 在网格视图中，使用 css 隐藏所有行。
  • 运行 JavaScript 以显示不为空的行。
  • "添加行"按钮只能显示第一个空行。
  • 如果已使用所有空字段，请添加某种通知。（例如："请先保存您的数据，然后再继续"）。
    • 在
  • 代码隐藏中，在使用它之前删除所有空字段。
相关文章：