GridView动态添加新行

2022-05-01 07:13:27

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，然后绑定。

本文转自shenzhoulong 51CTO博客，原文链接：http://blog.51cto.com/shenzhoulong/662781，如需转载请自行联系原作者

码农公寓

相关文章