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>
后台代码：
protectedvoid 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();
}
} protectedvoid 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;
} protectedvoid 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();
}
http://www.cnblogs.com/psforever/archive/2011/02/23/1963207.html
http://blog.csdn.net/qbook/article/details/8191002
http://www.cnblogs.com/hfliyi/archive/2011/05/18/2050164.html
GridView动态增加行的更多相关文章
- js 动态增加行删除行
<body> <table id="tableID" border="1" align="center" width=&q ...
- JQuery实现表格动态增加行并对新行添加事件
实现功能: 通常在编辑表格时表格的行数是不确定的,如果一次增加太多行可能导致页面内容太多,反应变慢:通过此程序实现表格动态增加行,一直保持最下面有多个空白行. 效果: 一:原始页面 二:表1增加新行并 ...
- JQUERY方法给TABLE动态增加行
比如设置table的id为tabvar trHTML = "<tr><td>...</td></tr>"$("#tab&q ...
- C#点击按钮用DataGridView动态增加行、删除行，增加按钮列
原来有一行: 点击添加,在下面增加同样的一行 新增加的行有一列删除按钮,点击某行的删除按钮时,删除当前行 方法: 哈哈,我果然好聪明啊 1.文本框.文本框.添加按钮 2.一个DataGridView( ...
- poi读取Excel模板并修改模板内容与动态的增加行
有时候我们可能遇到相当复杂的excel,比如表头的合并等操作,一种简单的方式就是直接代码合并(浪费时间),另一种就是写好模板,动态的向模板中增加行和修改指定单元格数据. 1.一个简单的根据模板shee ...
- JQuery实现表格自动增加行，对新行添加事件
实现功能: 通常在编辑表格时表格的行数是不确定的,如果一次增加太多行可能导致页面内容太多,反应变慢:通过此程序实现表格动态增加行,一直保持最下面有多个空白行. 效果: 一:原始页面 二:表1增加新行并 ...
- jquery表格动态增删改及取数据绑定数据完整方案
一 前言 上一篇Jquery遮罩插件,想罩哪就罩哪! 结尾的预告终于来了. 近期参与了一个针对内部员工个人信息收集的系统,其中有一个需求是在填写各个相关信息时,需要能动态的增加行当时公司有自己的解决方 ...
- JavaScript动态增删改表格数据
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- jquery plugins —— datatables 增加行号
table = $("#Table").DataTable({ "rowCallback": function (row, data, dataIndex) { ...
随机推荐
- DDD实践案例：引入事件驱动与中间件机制来实现后台管理功能
DDD实践案例:引入事件驱动与中间件机制来实现后台管理功能 一.引言 在当前的电子商务平台中,用户下完订单之后,然后店家会在后台看到客户下的订单,然后店家可以对客户的订单进行发货操作.此时客户会在自己 ...
- POJ3690 Constellations 【KMP】
Constellations Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 5044 Accepted: 983 Des ...
- 【百度地图API】如何给自定义覆盖物添加事件
原文:[百度地图API]如何给自定义覆盖物添加事件 摘要: 给marker.lable.circle等Overlay添加事件很简单,直接addEventListener即可.那么,自定义覆盖物的事件应 ...
- 经典HTML5小游戏 支持各种浏览器 （围住神经猫）
源码地址: http://files.cnblogs.com/files/liujing379069296/MyCat.rar 插件地址:http://files.cnblogs.com/files/ ...
- windows下利用OpenVPN搭建VPNserver
一.OpenVPN是一款功能强大,可跨平台(支持Win 2000/XP/2003, Linux, Mac OS X, Solaris, FreeBSD, NetBSD, 和 OpenBSD)使用的SS ...
- Asp.net MVC + EF + Spring.Net 项目实践（四）
这篇写一写如何使用Spring.net来解耦各个项目 1. 在接口层添加IStudentBLL文件,里面有GetStudent和GetAllStudents两个方法:然后在StudentBLL类里实现 ...
- Swift入门教程:基本语法(四)
可选类型 可选类型的使用场合 当一个值可能存在,可能不存在的时候,就用可选类型 比如查找字符k在某个字符串中的位置 如果字符串是"jake",说明k的位置存在,是2 如果字符串是& ...
- 七牛云存储C#例用小例子 C#笔记
最近有需求要把网站的图片传到云存储上去.于是就找到了七牛.看上面的SDK...看了才发现里面注释很少.当时看的头大.在网上搜一下,基本上没有好的例子.给初学者带来很大的不便!不过最后还是做出来了.在这 ...
- jQuery UI dialog 參数说明
前段时间碰到个问题 jquery UI dialog弹出层 弹出多个层是 比方弹出两个层A和B B层假设显示的数据表格太大,伸到了A层的外面,那伸到A层之外的部分就看不到了,由于B层是在A层上弹出的 ...
- Front End Books
Front End Books 记录和推荐一些认为还不错的前端方面的书籍.列入标准: 看过,并觉得值得推荐给大家的. 正在看的,已经觉得不错的,或者听闻别人说不错的. 打算看的,经多人推荐,一致认为必 ...