Добавление новых строк динамически в виде сетки или данных в 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();
}

и plsПосмотрите на изображение ниже, как оно будет генерировать новые строки ....

Надеюсь, это поможет вам .....

Answer 2

Вы можете использовать fnOpen http://www.datatables.net/ref#fnOpen. Это позволит вам добавить строку прямо под строкой, которую вы ей дали.вы также можете дать этой новой строке HTML-код, который вы хотите иметь.