GridView动态增加行列

系统 1683 0

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

GridView动态增加行列_第1张图片 下面是具体实现

前台代码:

<% @ 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();
}

GridView动态增加行列


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论