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();
}
posted @ 2011-07-28 16:56  x喜德盛  阅读(1019)  评论(0编辑  收藏  举报