原文作者：杨友山
原文地址：http://blog.csdn.net/yysyangyangyangshan/article/details/20571705
Gridview在做项目时一般使用的比较多，用来展示数据，编辑数据等。这一篇我们来看看如何用JS控制gridview来增加一行。主要还是使用Jquery，原理是复制一行已有的数据。直接看代码
效果如下点击增加按钮后
JS文件如下：
前台代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ChildFrm.aspx.cs" Inherits="ASPNETGridViewJSAdd.Pages.ChildFrm" %>
<!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></title>
</head>
<body runat="server">
<form id="Form1" runat="server">
<asp:Button ID="btnAdd" runat="server" OnClientClick="return AddNewRow();return false;" Text="增加"/>
<asp:GridView ID="dgPersons" runat="server" EnableViewState="false" CellPadding="4"
GridLines="Horizontal" PageChange="TextBox" AutoGenerateColumns="False" SortMode="Total" ForeColor="#333333"
CellSpacing="1" Width="60%" ShowNoRecordTip="True">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<%#Container.DataItemIndex +1%>
<input id="hideID" type="hidden" runat="server" value="p_id" />
</ItemTemplate>
<HeaderTemplate>
<span>序号</span>
</HeaderTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<span> <%#Eval("p_name")%></span>
</ItemTemplate>
<HeaderTemplate>
<span>姓名</span>
</HeaderTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<span> <%#Eval("p_age")%></span>
</ItemTemplate>
<HeaderTemplate>
<span>年龄</span>
</HeaderTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<span> <%#Eval("p_sex")%></span>
</ItemTemplate>
<HeaderTemplate>
<span>性别</span>
</HeaderTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" HorizontalAlign="Center" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<RowStyle HorizontalAlign="Center" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#999999" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>
</form>
</body>
</html>增加一个gridview控件，后台存放数据使用DataTable。表头和内容使用<ItemTemplate>和<HeaderTemplate>来展示。这样可以在列中方多个控件，以满足项目的需要。下面是JS代码：
<script type="text/javascript" src="/Scripts/Ajax.js"></script>
<script type="text/javascript" src="/Scripts/jquery-1.4.1.js"></script>
<script language="javascript" type="text/javascript">
var dgPersonsID = "<%= dgPersons.ClientID %>";
$(document).ready(function () {
$("#dgPersons tr").eq(1).hide();
});
function AddNewRow() {
var tr = $("#dgPersons tr").eq(1).clone();
tr.show();
tr.appendTo("#dgPersons");
refreshNo();
return false;
}
function refreshNo() {
var dgg = document.getElementById(dgPersonsID);
var index = 1;
for (var i = 2; i < dgg.rows.length; ++i) {
var cells = dgg.rows[i].cells;
var row = dgg.rows[i];
if (row.style.display != "none") {
cells[0].firstChild.nodeValue = index++;
}
}
return false;
}
</script>
主要用来响应增加按钮增加一行，并且刷新数据，这里主要是来刷新序号。
后台代码
用于读取数据的方法，专门写了一个单例模式的类，本人觉得这样利于管理，所有代码都写在页面的CS文件中，不太方便。
public class MainManager
{
private DataTable personCollect = null;
private static MainManager instance = null;
public DataTable PersonCollect
{
get { return personCollect; }
set { personCollect = value; }
}
public static MainManager DoGetInstance()
{
if (instance == null)
{
instance = new MainManager();
}
return instance;
}
public void DoAddSinglePersons()
{
if(PersonCollect==null)
{
PersonCollect = new DataTable();
PersonCollect.Columns.Add("p_id");
PersonCollect.Columns.Add("p_name");
PersonCollect.Columns.Add("p_age");
PersonCollect.Columns.Add("p_sex");
}
if (PersonCollect.Rows.Count < 1)
{
for (int i = 0; i < 1; i++)
{
DataRow nrow = PersonCollect.NewRow();
nrow["p_id"] = System.Guid.NewGuid().ToString();
nrow["p_name"] = "西北白杨树";
nrow["p_age"] = 27;
nrow["p_sex"] = "男";
PersonCollect.Rows.Add(nrow);
}
}
}
}
页面的cs类，负责加载数据和绑定。
public partial class ChildFrm : System.Web.UI.Page
{
private MainManager dManager = null;
protected void Page_Load(object sender, EventArgs e)
{
dManager = MainManager.DoGetInstance();
if (!IsPostBack)
{
if (dManager.PersonCollect != null) { dManager.PersonCollect.Clear(); }
dManager.DoAddSinglePersons();
this.dgPersons.DataSource = dManager.PersonCollect;
this.dgPersons.DataBind();
}
}
}这样就完成了。增加一行的功能主要是JS实现。当然增加完一行后，数据需要编辑和保存，下一篇来介绍删除。
代码下载：http://download.csdn.net/detail/yysyangyangyangshan/6997727