グリッドビューまたはasp.netのデータテーブルに新しい行を動的に追加しますか？

Question

データテーブルを使用してグリッドビューをバインドしています。

私の仕事は、ユーザーがグリッドビューの「追加」ボタンをクリックすると、新しい行を3つのテキストボックスで生成する必要があるということです。

例：2番目の行の[追加]ボタンをクリックすると、2番目の行の下に新しい行が作成され、詳細を入力できる3つのテキストボックスが表示されます。

誰でも私がこの問題を解決するのに役立つことができますか？ 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方法

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

を新しい行を追加するための...

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++; 

      } 
     } 
    } 
} 

ボタンクリックイベントで、plsはどのように画像の下を見てみましょう新しい行を生成します....

私はそれを願っていますあなたはあなたがfnOpen http://www.datatables.net/ref#fnOpenを使用することができます

Answer 2

.....役立ちます。それはあなたがそれを与える行のすぐ下に行を追加させます。その新しい行に必要なhtmlを付けることができます。