GridView动态添加新行

gridview动态添加行的原理就是用datatable增加新列然后重新绑定；

设计源码

设计gridview代码

 

< asp:GridView ID = " gvFrontendTypeSetting " runat = " server " AutoGenerateColumns = " false "
CssClass = " table " OnRowDeleting = " gvFrontendTypeSetting_RowDeleting " >
< Columns >
< asp:TemplateField HeaderText = " 序号 " >
< ItemTemplate >
< div align = " center " >
< asp:TextBox ID = " txtSerialNumber " runat = " server " Width = " 20px " Text = ' <%#Eval("serialNumber")%> '
BorderStyle = " None " ></ asp:TextBox >
</ div >
</ ItemTemplate >
</ asp:TemplateField >
< asp:TemplateField HeaderText = " 商品筛选类型 " >
< ItemTemplate >
< asp:TextBox ID = " txtType " runat = " server " Text = ' <%#Eval("type")%> ' BorderStyle = " None " ></ asp:TextBox >
</ ItemTemplate >
< ItemStyle Width = " 100px " />
</ asp:TemplateField >
< asp:TemplateField HeaderText = " 修改时间 " >
< ItemTemplate >
< div align = " center " >
< asp:Label runat = " server " ID = " lblModificationTime " Text = ' <%#Eval("modifiedTime")%> '
BorderStyle = " None " ></ asp:Label >
</ div >
</ ItemTemplate >
</ asp:TemplateField >
< asp:TemplateField HeaderText = " 修改人 " >
< ItemTemplate >
< div align = " center " >
< asp:Label runat = " server " ID = " lblModificationName " Text = ' <%#Eval("modifiedName")%> '
BorderStyle = " None " ></ asp:Label >
</ div >
</ ItemTemplate >
</ asp:TemplateField >
< asp:TemplateField HeaderText = " 操作 " >
< ItemTemplate >
< div align = " center " >
< asp:Button ID = " btnDel " runat = " server " Text = " 删除 " CommandName = " delete " />
< asp:Button ID = " btnEdit " runat = " server " Text = " 修改 " CommandName = " Edit " />
</ div >
</ ItemTemplate >
</ asp:TemplateField >
</ Columns >
</ asp:GridView >

首先我们需要在初始化的时候，新建table并同时新建一个列，以便在初始化的时候就有一个新列可使用

 

/// <summary>
/// Init the gvFrontendTypeSetting to show
/// </summary>
private void InitGVFrontendTypeSetting()
{
// Create a datatable instance
DataTable tbScratchCard = new DataTable();
// column one
DataColumn colSerialNumber = new DataColumn();
colSerialNumber.DataType = System.Type.GetType( " System.Int32 " );
colSerialNumber.ColumnName = " serialNumber " ;
// column two
DataColumn colType = new DataColumn();
colType.DataType = System.Type.GetType( " System.String " );
colType.ColumnName = " type " ;
// column three
DataColumn colModifiedTime = new DataColumn();
colModifiedTime.DataType = System.Type.GetType( " System.DateTime " );
colModifiedTime.ColumnName = " modifiedTime " ;
// column four
DataColumn colModifiedName = new DataColumn();
colModifiedName.DataType = System.Type.GetType( " System.String " );
colModifiedName.ColumnName = " modifiedName " ;

// DataColumnCollection
DataColumn[] cols = { colSerialNumber, colType, colModifiedTime, colModifiedName };
// Add columns to the table tbScratchCard
tbScratchCard.Columns.AddRange(cols);
// Add a new row to the table tbScratchCard
tbScratchCard.Rows.Add(tbScratchCard.NewRow());
tbScratchCard.Rows[ 0 ][ " serialNumber " ] = tbScratchCard.Rows.Count - 1 ;
tbScratchCard.Rows[ 0 ][ " modifiedTime " ] = DateTime.Now;
tbScratchCard.Rows[ 0 ][ " modifiedName " ] = ((User)Session[ " user " ]).AccountName;
ViewState[ " tbCategory " ] = tbScratchCard;
// Bind the table to the gridview
gvFrontendTypeSetting.DataSource = tbScratchCard;
gvFrontendTypeSetting.DataBind();
}

如果初始化的时候需要给某列进行赋值，比如当前时间和当前用户，可以给第一行的值赋值，同时我们需要把建立好的datatable结构给viewstate或者session以便我们后续的新加行，删除等操作，有了上面的代码后我们在初始化的时候就能看到我们设计的界面，同时会有一个新行已经初始化

点击新增行按钮

 

/// <summary>
/// 添加行
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void btnAddType_Click( object sender, EventArgs e)
{
DataTable tbCategory = (DataTable)ViewState[ " tbCategory " ];
for ( int i = 0 ; i <= tbCategory.Rows.Count - 1 ; i ++ )
{
tbCategory.Rows[i][ " serialNumber " ] = Convert.ToInt32(((TextBox)gvFrontendTypeSetting.Rows[i].Cells[ 0 ].FindControl( " txtSerialNumber " )).Text);
tbCategory.Rows[i][ " type " ] = ((TextBox)gvFrontendTypeSetting.Rows[i].Cells[ 0 ].FindControl( " txtType " )).Text;
tbCategory.Rows[i][ " modifiedTime " ] = ((Label)gvFrontendTypeSetting.Rows[i].Cells[ 0 ].FindControl( " lblModificationTime " )).Text;
tbCategory.Rows[i][ " modifiedName " ] = ((Label)gvFrontendTypeSetting.Rows[i].Cells[ 0 ].FindControl( " lblModificationName " )).Text;
}
// Add new row
tbCategory.Rows.Add(tbCategory.NewRow());
tbCategory.Rows[tbCategory.Rows.Count - 1 ][ " serialNumber " ] = tbCategory.Rows.Count - 1 ;
tbCategory.Rows[tbCategory.Rows.Count - 1 ][ " modifiedTime " ] = DateTime.Now;
tbCategory.Rows[tbCategory.Rows.Count - 1 ][ " modifiedName " ] = ((User)Session[ " user " ]).AccountName;
ViewState[ " tbCategory " ] = tbCategory;
// Bind the table to the gridview
gvFrontendTypeSetting.DataSource = tbCategory;
gvFrontendTypeSetting.DataBind();
}

这里我们首先要得到我们在初始化的时候建立的datatable数据结构，然后我们获得用户填写的数据，这里主要是因为，当用户修改数据时我们可以动态的获取用户修改的值，避免用户新增加一行保存一行所带来的不便。把数据保存到datatable中后我们再添加一个新行，同样，有一些初始值我们需要给初始化出来，再新添加行之后，我们需要把数据结构赋给viewstate或者session然后和gridview绑定，这样动态新增行就搞定了；

 

好吧再来一个动态删除行的code，如下

 

/// <summary>
/// 删除
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void gvFrontendTypeSetting_RowDeleting( object sender, GridViewDeleteEventArgs e)
{

int number = Convert.ToInt32(((TextBox)gvFrontendTypeSetting.Rows[e.RowIndex].FindControl( " txtSerialNumber " )).Text);
DataTable tbCategory = (DataTable)ViewState[ " tbCategory " ];
for ( int i = 0 ; i <= tbCategory.Rows.Count - 1 ; i ++ )
{
if (Convert.ToInt32(tbCategory.Rows[i][ " serialNumber " ]) == number)
{
tbCategory.Rows.RemoveAt(i);
}
}
ViewState[ " tbCategory " ] = tbCategory;
gvFrontendTypeSetting.DataSource = tbCategory;
gvFrontendTypeSetting.DataBind();
}

这里是我们首先要找到gridview中能唯一标示这行数据的值，然后获得datatable的数据结构，再根据gridview数据行的唯一标示在datatable中循环，如果某行中的某个字段的值行gridview中的行唯一标示相等，则移除当前行，同样把修改后的数据结构绑定给viewstate或者session，然后重新绑定；

 

总体就是在初始化的时候需要把数据结构的建立起来，并新建一行，并把数据结构给viewstate或者session，然后如果做其他操作就需要先活动这个数据结构，再做其他的修改，同样做完修改后需要把新的数据结构赋给viewstate或者session，以便实时更新viewstate或者session，然后绑定。