Question

在下面的代码中我有gridview，它有textbox和dropdownlist我想用javascript添加行。我的目标是避免在添加行时回发.Pls帮助我这样做。

<asp:GridView Width="100%" runat="server" ID="gvProduct" AutoGenerateColumns="false" CellPadding="4" ForeColor="#333333" ShowFooter="true"
                            PageSize-Mode="NumericPages" PagerStyle-Visible="true" AllowPaging="false" AllowSorting="true"                            
                            CssClass="mGrid" OnRowDataBound="gvProduct_RowDataBound" OnRowDeleting="gvProduct_RowDeleting" OnRowCommand="gvProduct_RowCommand"
                            PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt">

                            <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" />

 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';
            }
        }

Answer 1

asp中的Gridview = HTML中的表
asp中Gridview中的新行= HTML中Table中的新行

示例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也必须可见。

Answer 2

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

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

两种可能的解决方案：

用html表替换GridView。可以使用对宁静的API的JavaScript调用来填充和更新数据。

用空行预填充GridView数据源。

数据绑定x空字段数量（例如10个空字段）。
在GridView标记中，使用css隐藏所有行。
运行JavaScript以显示不为空的行。
“添加行”按钮只能显示第一个空行。
如果已使用所有空字段，请添加某种通知。（例如：“ 请保存您的数据，然后再继续”）。
在后面的代码中，使用前删除所有空字段。

使用javascript在gridview中添加新行

2 个答案: