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) { ...
随机推荐
- HMAC-SHA1算法签名及Authorization头认证
使用PHP进行HMAC-SHA1签名,并通过Authorization头认证Deom $app_id = 'id'; $host = "test.abc.com"; $port = ...
- Is it always safe to call getClass() within the subclass constructor?(转)
14down votefavorite An article on classloading states that the method getClass() should not be cal ...
- Android FM学习中的模块 FM启动过程
最近的研究FM模,FM是一家值我正在学习模块.什么可以从上层中可以看出. 上层是FM按钮的操作和界面显示,因此调用到FM来实现广播收听的功能. 看看Fm启动流程:例如以下图: 先进入FMRadio.j ...
- Android 4.4(KitKat)表格管理子系统 - 骨架
原文地址:http://blog.csdn.net/jinzhuojun/article/details/37737439 窗体管理系统是Android中的主要子系统之中的一个.它涉及到App中组件的 ...
- 解决RecyclerView无法onItemClick问题
供RecyclerView采用.会员可以查看将替代ListView的RecyclerView 的使用(一),单单从代码结构来说RecyclerView确实比ListView优化了非常多.也简化了我们编 ...
- Android设计模式（五岁以下儿童）－－简单工厂模式
1.面试的时候问这个问题: 在ListView 的item小程序.很多不同的显示风格.或者是,为了更好地维护,不同的样式,应该怎么做? 我一下就想到的是工厂的模式,利用project,编写ViewFa ...
- 你可以不知道原因，但是，我们不能停止努力。httplook抓取路由配置界面信息
因为实验室的项目要求,需要动态控制路由的配置信息,我们知道.路由选择需要购买的访问后,:http://192.168.1.1 路由配置页面.配置,不须要人手工操作.甚至定时任务配置的时候,就须要进一步 ...
- Android数据库高手秘籍(六)——LitePal的改动和删除操作
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/40083685 在上一篇文章中,我们学会了使用LitePal进行存储数据的功能.确实 ...
- javascript权威指南(2)
JavaScript预定义了一系列全局变量和函数,在自定义变量和函数式要避免使用这些预定义的名称: arguments encodeURI Infinity Number RegExp Arra ...
- IOS SDK相机的详细解释/画廊（默认＋他们的高清摄像头接口）
原版的blog,转载请注明出处 blog.csdn.net/hello_hwc 前言: 新NSURLSession的UploadTask的,结果写那个Demo的时候想要写成拍照上传.然后就想到先写一个 ...