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

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

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

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

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

Answer 1

你可以试试这个解决方案

内部代码背后

这是下面的代码块：

 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(); } } 

这是单击Button时生成行的方法。 以下是代码块：

 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。