很多时候,我们需要可编辑的表格,来比较方便的进行数据的录入,比如学习成绩的录入。当然这就要求能够动态的增加行,来一次性录入多个学生的信息。现在用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 >
<! 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();
}
{
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();
}