在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。