在网格视图中或在asp.net中的datatable中动态添加新行？ [英] Adding new rows dynamically in a grid view or datatable in asp.net?

问题描述

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

我的任务是在用户点击网格中的添加按钮时动态添加新的行到我的网格视图查看它应该生成具有三个文本框的新行。

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

有人可以帮我解决这个问题吗？在jQuery / JavaScript或服务器端。

解决方案

你可以尝试这个解决方案

 < asp：gridview ID =Gridview1runat =serverShowFooter =trueAutoGenerateColumns =false> 
<列> 
< asp：BoundField DataField =RowNumberHeaderText =Row Number/> 
< asp：TemplateField HeaderText =标题1> 
< ItemTemplate> 
< asp：TextBox ID =TextBox1runat =server>< / asp：TextBox> 
< / ItemTemplate> 
< / asp：TemplateField> 
< asp：TemplateField HeaderText =标题2> 
< ItemTemplate> 
< asp：TextBox ID =TextBox2runat =server>< / asp：TextBox> 
< / ItemTemplate> 
< / asp：TemplateField> 
< asp：TemplateField HeaderText =标题3> 
< ItemTemplate> 
< asp：TextBox ID =TextBox3runat =server>< / asp：TextBox> 
< / ItemTemplate> 
< FooterStyle Horizo​​ntalAlign =Right/> 
< FooterTemplate> 
< asp：Button ID =ButtonAddrunat =serverText =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（新的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（）; 
 
 //将DataTable存储在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 ++）
 {
 //提取TextBox值
 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 ++; 
} 
 //添加新行到DataTable 
 dtCurrentTable.Rows.Add（drCurrentRow）; 
 //将当前数据存储到ViewState 
 ViewState [CurrentTable] = dtCurrentTable; 
 
 //使用当前数据重新绑定网格
 Gridview1.DataSource = dtCurrentTable; 
 Gridview1.DataBind（）; 
} 
} 
 else 
 {
 Response.Write（ViewState is null）; 
} 
 
 //在回发上设置上一个数据
 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（）; 
} 
  

并请看下图如何生成新行... 。

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

I am binding the grid view using data table.

My task is to add new rows to my grid view dynamically when the user clicks "ADD" button in grid view it should generate new row with three text boxes.

For example: When I click the add button in the second row, a new row should be created below the second row with three text box where the user can enter details.

Can anybody help me resolve this problem? Either in jQuery/JavaScript or on the server side.

解决方案

you could try this solution

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

inside code behind

Here’s the code block below:

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

in page load you have to call this method

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

this is the method for generating the rows when clicking the Button. Here are the code blocks below:

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

this is setpreviousdata method...

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

            }
        }
    }
}

button click event for adding new row

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

and pls take a look below image how it will generate new rows....

I hope it will helps you.....

这篇关于在网格视图中或在asp.net中的datatable中动态添加新行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！