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) { ...
随机推荐
- contentWindow,
a>contentWindow 兼容各个浏览器,可取得子窗口的 window 对象.b>contentDocument Firefox 支持,> ie8 的ie支持.可取得子窗口的 ...
- 无效 URI: 故障分析证书颁发机构/主机
无效 URI: 分析证书颁发机构/主机 出现该错误的原因是URL中少了一个斜杠.正常的URL是"http:"后边有两个斜杠,而我在改动配置文件里的URL的IP地址部分时.不小心删掉 ...
- CQRS模式实现
[.NET领域驱动设计实战系列]专题十:DDD扩展内容:全面剖析CQRS模式实现 一.引言 前面介绍的所有专题都是基于经典的领域驱动实现的,然而,领域驱动除了经典的实现外,还可以基于CQRS模式来进行 ...
- 第14章 命令模式（Command Pattern）
原文 第14章 命令模式(Command Pattern) 命令模式(Command Pattern) 概述 在软件系统中,“行为请求者”与“行为实现者”通常呈现一种“紧耦合”.但在某些场合,比如 ...
- hdu Tempter of the Bone （奇偶剪枝）
学习链接:http://www.ihypo.net/1554.html https://www.slyar.com/blog/depth-first-search-even-odd-pruning.h ...
- VS2013打包部署（图解）
首先要说明的是VS解决方案的配置Debug模式和Release有什么区别模式.Debug模式通常被称为调试模式,它包括调试信息,不优化的代码,序:Release模式通常叫做公布模式.不包括调试信息,可 ...
- Android_显示器本身被卸载应用程序
1.经jni实现功能 //LOG宏定义 #define LOG_INFO(tag, msg) __android_log_write(ANDROID_LOG_INFO, tag, msg) #defi ...
- JavaScript语言基础知识点图示
原文:JavaScript语言基础知识点图示 一位牛人归纳的JavaScript 语言基础知识点图示. 1.JavaScript 数据类型 2.JavaScript 变量 3.Javascript 运 ...
- UIImage分类:返回一个可以拉伸的图片
// 返回一个可拉伸的图片 // UIImage的分类 + (UIImage *)resizedImage:(NSString *)name { UIImage *image = [self imag ...
- 访问Google神器，魔高一尺，道高一丈！
最近谷歌的IP被大范围的禁用了.身处一个连谷歌都用不了的过度的程序员,深感命运多舛.幸好,魔高一尺,道高一丈.下面是几种可以使用谷歌的方法. 方法一 1)在chrome浏览器中输入:chrome:// ...