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

【问题标题】：Adding new rows dynamically in a grid view or datatable in asp.net?在 asp.net 的网格视图或数据表中动态添加新行？
【发布时间】：2011-12-13 11:31:02
【问题描述】：

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

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

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

谁能帮我解决这个问题？在 jQuery/JavaScript 或服务器端。

【问题讨论】：

标签： javascript jquery asp.net gridview datatable

【解决方案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();
}

请看下图它将如何生成新行....

希望对你有帮助.....

【讨论】：

不得不在这里发表评论。它帮助了我。谢谢。我想知道为什么它被标记为答案并且没有得到我的赞成票。

【解决方案2】：

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

【讨论】：