GridView动态增加行列

很多时候，我们需要可编辑的表格，来比较方便的进行数据的录入，比如学习成绩的录入。当然这就要求能够动态的增加行，来一次性录入多个学生的信息。现在用ASP.NET中强大的GridView控件就能够达到这样的效果，如下图：

下面是具体实现

前台代码：

<% @ Page Language = " C# " AutoEventWireup = " true " CodeFile = " Default.aspx.cs " Inherits = " _Default " %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > GridView中实现动态动态增加删除行 </ title >
< style type ="text/css" >
.hide {
display : none ;
}
</ style >
< script type ="text/javascript" >
// 选中所有行
function SelectAll(chkAll)
{
var gridview = document.getElementById( " GridView1 " );
if (gridview)
{
// 获取到GridView1中的所有input标签
var inputs = gridview.getElementsByTagName( " input " );
for ( var i = 0 ;i < inputs.length;i ++ )
{
if (inputs[i].type == " checkbox " )
{
// 设置所有checkbox的选中状态与chkAll一致
inputs[i].checked = chkAll.checked;
}
}
}
}

// 给选中行换背景色
function checkRow(chkRow)
{
var row = chkRow.parentNode.parentNode;
if (row)
{
if (chkRow.checked)
row.style.backgroundColor = " #7799CC " ;
else
row.style.backgroundColor = " #FFFFFF " ;
}
}
</ script >
</ head >
< body >
< form id ="form1" runat ="server" >
< div >
< asp:LinkButton ID ="lbtnAddRow" runat ="server" Width ="80px" OnClick ="lbtnAddRow_Click" > 添加行 </ asp:LinkButton >
< asp:LinkButton ID ="btnDeleteRow" runat ="server" OnClick ="btnDeleteRow_Click" OnClientClick ="return confirm('确定要删除选中行吗？');" > 删除选中行 </ asp:LinkButton >
</ div >
< div >
< asp:GridView ID ="GridView1" runat ="server" AutoGenerateColumns ="False" CellPadding ="4" ForeColor ="#333333" >
< Columns >
< asp:BoundField DataField ="ID" HeaderText ="ID" >
< ItemStyle CssClass ="hide" BorderColor ="#507CD1" />
< HeaderStyle CssClass ="hide" />
</ asp:BoundField >
< asp:TemplateField HeaderText ="序号" >
< ItemTemplate >
<% # Container.DataItemIndex + 1 %>
</ ItemTemplate >
< ItemStyle BorderColor ="#507CD1" HorizontalAlign ="Center" BorderWidth ="1px" />
</ asp:TemplateField >
< asp:TemplateField >
< HeaderTemplate >
< input id ="chkAll" type ="checkbox" onclick ="SelectAll(this)" />
</ HeaderTemplate >
< ItemTemplate >
< input id ="chkRow" type ="checkbox" onclick ="checkRow(this);" runat ="server" />
</ ItemTemplate >
< ItemStyle Width ="30px" HorizontalAlign ="Center" BorderColor ="#507CD1" BorderWidth ="1px" />
</ asp:TemplateField >
< asp:TemplateField HeaderText ="姓名" >
< ItemTemplate >
< asp:TextBox ID ="txtName" runat ="server" Text ='<%# Bind("Name") % > ' BorderStyle="None"> </ asp:TextBox >
</ ItemTemplate >
< ItemStyle Width ="100px" BorderColor ="#507CD1" BorderWidth ="1px" />
</ asp:TemplateField >
< asp:TemplateField HeaderText ="平时成绩" >
< ItemTemplate >
< asp:TextBox ID ="txtUsuallyResults" runat ="server" Text ='<%# Bind("UsuallyResults") % > ' BorderStyle="None"> </ asp:TextBox >
</ ItemTemplate >
< ItemStyle Width ="100px" BorderColor ="#507CD1" BorderWidth ="1px" />
</ asp:TemplateField >
< asp:TemplateField HeaderText ="考试成绩" >
< ItemTemplate >
< asp:TextBox ID ="txtExamResults" runat ="server" Text ='<%# Bind("ExamResults") % > ' BorderStyle="None"> </ asp:TextBox >
</ ItemTemplate >
< ItemStyle Width ="100px" BorderColor ="#507CD1" BorderWidth ="1px" />
</ asp:TemplateField >
</ Columns >
< HeaderStyle BackColor ="#507CD1" Font-Bold ="True" ForeColor ="White" />
</ asp:GridView >
</ div >
</ form >
</ body >
</ html >

后台代码：

protected void Page_Load( object sender, EventArgs e)
{
if ( ! Page.IsPostBack)
{
DataTable table = new DataTable();
table.Columns.Add( new DataColumn( " ID " ));
table.Columns.Add( new DataColumn( " Name " ));
table.Columns.Add( new DataColumn( " UsuallyResults " ));
table.Columns.Add( new DataColumn( " ExamResults " ));
DataRow row = table.NewRow();
table.Rows.Add(row);
GridView1.DataSource = table;
GridView1.DataBind();
}
}

protected void lbtnAddRow_Click( object sender, EventArgs e)
{
DataTable table = GetGridViewData();
DataRow newRow = table.NewRow();
newRow[ " ID " ] = Guid.NewGuid().ToString();
table.Rows.Add(newRow);
GridView1.DataSource = table;
GridView1.DataBind();
}

private DataTable GetGridViewData()
{
DataTable table = new DataTable();
table.Columns.Add( new DataColumn( " ID " ));
table.Columns.Add( new DataColumn( " Name " ));
table.Columns.Add( new DataColumn( " UsuallyResults " ));
table.Columns.Add( new DataColumn( " ExamResults " ));
foreach (GridViewRow row in GridView1.Rows)
{
DataRow sourseRow = table.NewRow();
sourseRow[ " ID " ] = row.Cells[ 0 ].Text;
sourseRow[ " Name " ] = ((TextBox)row.Cells[ 3 ].FindControl( " txtName " )).Text;
sourseRow[ " UsuallyResults " ] = ((TextBox)row.Cells[ 4 ].FindControl( " txtUsuallyResults " )).Text;
sourseRow[ " ExamResults " ] = ((TextBox)row.Cells[ 5 ].FindControl( " txtExamResults " )).Text;
table.Rows.Add(sourseRow);
}
return table;
}

protected void btnDeleteRow_Click( object sender, EventArgs e)
{
DataTable table = GetGridViewData();

foreach (GridViewRow row in GridView1.Rows)
{
if (((HtmlInputCheckBox)row.Cells[ 2 ].FindControl( " chkRow " )).Checked)
{
foreach (DataRow dtRow in table.Rows)
{
if (dtRow[ " ID " ].ToString() == row.Cells[ 0 ].Text)
{
table.Rows.Remove(dtRow);
break ;
}
}
}
}

GridView1.DataSource = table;
GridView1.DataBind();
}

转载于:https://www.cnblogs.com/gyweiUSTC/archive/2011/07/28/2119726.html