很多時候,我們需要可編輯的表格,來比較方便的進行數據的錄入,比如學習成績的錄入。當然這就要求能夠動態的增加行,來一次性錄入多個學生的信息。現在用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();
}
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
