在asp.net中的网格视图或数据表中动态添加新行？

Question

我使用数据表绑定网格视图。

我的任务是当用户在网格视图中单击“添加”按钮时，动态地向网格视图添加新行，它应该生成带有三个文本框的新行。

例如：当我单击第二行中的添加按钮时，应该在第二行下面创建一个新行，并带有三个文本框，用户可以在其中输入详细信息。

任何人都可以帮我解决这个问题吗？无论是在jQuery/JavaScript或服务器端。

Answer 1

你可以试试这个解决方案

<asp:gridview ID="Gridview1" runat="server" ShowFooter="true" AutoGenerateColumns="false"> 
    <Columns> 
    <asp:BoundField DataField="RowNumber" HeaderText="Row Number" /> 
    <asp:TemplateField HeaderText="Header 1"> 
     <ItemTemplate> 
      <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
     </ItemTemplate> 
    </asp:TemplateField> 
    <asp:TemplateField HeaderText="Header 2"> 
     <ItemTemplate> 
      <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> 
     </ItemTemplate> 
    </asp:TemplateField> 
    <asp:TemplateField HeaderText="Header 3"> 
     <ItemTemplate> 
      <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox> 
     </ItemTemplate> 
     <FooterStyle HorizontalAlign="Right" /> 
     <FooterTemplate> 
     <asp:Button ID="ButtonAdd" runat="server" Text="Add New Row" /> 
     </FooterTemplate> 
    </asp:TemplateField> 
    </Columns> 

里面的代码背后

这里是下面的代码块：

private void SetInitialRow() 
{ 
    DataTable dt = new DataTable(); 
    DataRow dr = null; 
    dt.Columns.Add(new DataColumn("RowNumber", typeof(string))); 
    dt.Columns.Add(new DataColumn("Column1", typeof(string))); 
    dt.Columns.Add(new DataColumn("Column2", typeof(string))); 
    dt.Columns.Add(new DataColumn("Column3", typeof(string))); 
    dr = dt.NewRow(); 
    dr["RowNumber"] = 1; 
    dr["Column1"] = string.Empty; 
    dr["Column2"] = string.Empty; 
    dr["Column3"] = string.Empty; 
    dt.Rows.Add(dr); 
    //dr = dt.NewRow(); 

    //Store the DataTable in ViewState 
    ViewState["CurrentTable"] = dt; 

    Gridview1.DataSource = dt; 
    Gridview1.DataBind(); 
} 

在页面加载，你必须调用此方法

protected void Page_Load(object sender, EventArgs e) 
    { 
    if (!Page.IsPostBack) 
    { 
     SetInitialRow(); 
    } 
} 

这是单击按钮时生成行的方法。这里是代码块如下：

private void AddNewRowToGrid() 
{ 
    int rowIndex =0; 

    if (ViewState["CurrentTable"] != null) 
    { 
     DataTable dtCurrentTable = (DataTable)ViewState["CurrentTable"]; 
     DataRow drCurrentRow = null; 
     if (dtCurrentTable.Rows.Count > 0) 
     { 
      for (int i = 1; i <= dtCurrentTable.Rows.Count; i++) 
      { 
       //extract the TextBox values 
       TextBox box1 = (TextBox)Gridview1.Rows[rowIndex].Cells[1].FindControl("TextBox1"); 
       TextBox box2 = (TextBox)Gridview1.Rows[rowIndex].Cells[2].FindControl("TextBox2"); 
       TextBox box3 = (TextBox)Gridview1.Rows[rowIndex].Cells[3].FindControl("TextBox3"); 

       drCurrentRow = dtCurrentTable.NewRow(); 
       drCurrentRow["RowNumber"] = i + 1; 
       drCurrentRow["Column1"] = box1.Text; 
       drCurrentRow["Column2"] = box2.Text; 
       drCurrentRow["Column3"] = box3.Text; 

       rowIndex++; 
      } 
      //add new row to DataTable 
      dtCurrentTable.Rows.Add(drCurrentRow); 
      //Store the current data to ViewState 
      ViewState["CurrentTable"] = dtCurrentTable; 

      //Rebind the Grid with the current data 
      Gridview1.DataSource = dtCurrentTable; 
      Gridview1.DataBind(); 
     } 
    } 
    else 
    { 
     Response.Write("ViewState is null"); 
    } 

    //Set Previous Data on Postbacks 
    SetPreviousData(); 
} 

这是setpreviousdata方法...

private void SetPreviousData() 
{ 
    int rowIndex = 0; 
    if (ViewState["CurrentTable"] != null) 
    { 
     DataTable dt = (DataTable)ViewState["CurrentTable"]; 
     if (dt.Rows.Count > 0) 
     { 
      for (int i = 1; i < dt.Rows.Count; i++) 
      { 
       TextBox box1 = (TextBox)Gridview1.Rows[rowIndex].Cells[1].FindControl("TextBox1"); 
       TextBox box2 = (TextBox)Gridview1.Rows[rowIndex].Cells[2].FindControl("TextBox2"); 
       TextBox box3 = (TextBox)Gridview1.Rows[rowIndex].Cells[3].FindControl("TextBox3"); 

       box1.Text = dt.Rows[i]["Column1"].ToString(); 
       box2.Text = dt.Rows[i]["Column2"].ToString(); 
       box3.Text = dt.Rows[i]["Column3"].ToString(); 

       rowIndex++; 

      } 
     } 
    } 
} 

按钮单击事件添加新行

protected void ButtonAdd_Click(object sender, EventArgs e) 
{ 
    AddNewRowToGrid(); 
} 

，并请采取下面的图片怎么看它会产生新的行....

我希望它会帮助你.....

Answer 2

可以使用fnOpen http://www.datatables.net/ref#fnOpen。它会让你在你给它的行的正下方添加一行。你可以给新的一行提供你想要的html。