GridView动态添加1编辑行

GridView动态添加一编辑行

这几天遇到了怎样给GridView动态增加一编辑行的需求，因为之前一直没有碰到过，所以一时也不知道怎么实现。后来通过百度看了一些大神给的解决方案和例子，自己也转载了一篇实现这个功能的博客。方法总的来说，很多也很灵活，有的说用DataTable先取GridView里面的数据，再增加一行，然后再绑定到GridView。有的说用js+table也可以解决。

通过我一下午的努力，照着别人的博客也写了个Demo，严格来说，这种不是点击增加一行，而是给人的错觉是增加一行而已。也就是在GridView下面再加一个同样长的Table，然后对应的列中加入TextBox,再在Table下面增加一个按钮，点击按钮把Table里面的内容存到数据库，然后取出来绑定到GridView中。

下面是我的流程和代码：

1.前台，先加一个GridView控件，再在下面加一个Table,再加一个button

<%--GridView开始--%>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" EmptyDataText="没有记录">
                <Columns>
                    <asp:BoundField HeaderText="品牌" DataField="品牌" ItemStyle-Width="100" />
                    <asp:BoundField HeaderText="价格" DataField="价格" ItemStyle-Width="100" />
                    <asp:BoundField HeaderText="数量" DataField="数量" ItemStyle-Width="100" />
                    <asp:BoundField HeaderText="生产日期" DataField="生产日期" DataFormatString="{0:M-dd-yyyy}" ItemStyle-Width="100" />
                    <asp:BoundField HeaderText="商品详情" DataField="商品详情" ItemStyle-Width="100" />
                    <asp:BoundField HeaderText="生产地" DataField="生产地" ItemStyle-Width="100" />
                </Columns>
            </asp:GridView>
            <%--GridView结束--%>
            <%--Table开始--%>
            <table border="1" style="border-collapse:collapse;">
                <tr>
                    <td>
                        <asp:TextBox ID="TextBox1" runat="server" Width="93"></asp:TextBox>
                    </td>
                    <td>
                        <asp:TextBox ID="TextBox2" runat="server" Width="93"></asp:TextBox>
                    </td>
                    <td>
                        <asp:TextBox ID="TextBox3" runat="server" Width="93"></asp:TextBox>
                    </td>
                    <td>
                        <asp:TextBox ID="TextBox4" runat="server" Width="93"></asp:TextBox>
                    </td>
                    <td>
                        <asp:TextBox ID="TextBox5" runat="server" Width="93"></asp:TextBox>
                    </td>
                    <td>
                        <asp:TextBox ID="TextBox6" runat="server" Width="93"></asp:TextBox>
                    </td>
                </tr>
            </table>
            <%--Table结束--%>
            <%--Button开始--%>
            <asp:Button ID="Button1" runat="server" Text="添加" OnClick="Button1_Click" />
            <%--Button结束--%>

2.后台代码：

protected void Page_Load(object sender, EventArgs e)
        {
            if(!IsPostBack)
            {
                string con = ConfigurationManager.ConnectionStrings["con"].ToString();
                SqlConnection sqlcon = new SqlConnection(con);
                string sql = "select 品牌,价格,数量,商品详情,生产日期,生产地 from Shuma";
                sqlcon.Open();
                SqlDataAdapter sqlda = new SqlDataAdapter(sql, sqlcon);
                DataSet ds = new DataSet();
                sqlda.Fill(ds);
                sqlcon.Close();
                if(ds.Tables[0].Rows.Count == 0)
                {
                    DataTable dt = new DataTable();
                    dt.Columns.Add("品牌");
                    dt.Columns.Add("价格");
                    dt.Columns.Add("数量");
                    dt.Columns.Add("商品详情");
                    dt.Columns.Add("生产日期");
                    dt.Columns.Add("生产地");
                    if(dt.Rows.Count == 0)
                    {
                        dt.Rows.Add(dt.NewRow());
                    }
                    GridView1.DataSource = dt;
                    GridView1.DataBind();
                    GridView1.Rows[0].Cells[0].Text = "暂无记录";
                    GridView1.Rows[0].Cells[1].Text = "暂无记录";
                    GridView1.Rows[0].Cells[2].Text = "暂无记录";
                    GridView1.Rows[0].Cells[3].Text = "暂无记录";
                    GridView1.Rows[0].Cells[4].Text = "暂无记录";
                    GridView1.Rows[0].Cells[5].Text = "暂无记录";
                }
                else
                {
                    GridView1.DataSource = ds;
                    GridView1.DataBind();
                }
            }
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            string brand = TextBox1.Text.ToString();
            int price =Convert.ToInt32(TextBox2.Text);
            int number = Convert.ToInt32(TextBox3.Text);
            DateTime productdate = Convert.ToDateTime(TextBox4.Text);
            string text = TextBox5.Text.ToString();
            string place = TextBox6.Text.ToString();

            string con = ConfigurationManager.ConnectionStrings["con"].ToString();
            SqlConnection sqlcon = new SqlConnection(con);
            string sql = "insert into Shuma(品牌,价格,数量,商品详情,生产日期,生产地) values('"+brand+"','"+price+"','"+number+"','"+text+"','"+productdate+"','"+place+"')";
            string sqlstr = "select 品牌,价格,数量,商品详情,生产日期,生产地 from Shuma";
            sqlcon.Open();
            SqlCommand sqlcom = new SqlCommand(sql,sqlcon);
            sqlcom.ExecuteNonQuery();
            SqlDataAdapter sqlda = new SqlDataAdapter(sqlstr,sqlcon);
            DataSet ds = new DataSet();
            sqlda.Fill(ds);
            GridView1.DataSource = ds;
            GridView1.DataBind();
            sqlcon.Close();
        }
    }

3.解释：

针对Page_Load()函数

先从数据库里取数据放到ds(DataSet对象)中。if(ds.Tables[0].Rows.Count==0)用来判断ds中有没有数据。

如果没有，自己新建一个dt(DataTable对象),再在dt中做文章，给它加入列名(这个就对应的GridView的列名)，作用是让GridView在没有数据的情况下依旧显示出表头，dt.Rows.Add(dt.NewRow())这句话是用来给它加一个空行。GridView1.Rows[0].Cells[0].Text = "暂无记录"这句话是给新加的空行赋值(告诉用户没有记录)。

如果有，GridView绑定ds，然后显示出来。

针对Button1_Click函数

分两步：

第一步，将TextBox里面的数据存到数据库中。

第二步，将数据库里面的数据取出来绑定到GridView然后显示出来。

综上所述，这种方法并不是真的增加一行，只是让用户觉得增加一行而已或者让用户始终感觉有可以输入的行。