您的位置：首页 > 编程语言 > ASP

ASP.NET—005：GridView增加一行JS实现

2014-03-27 21:38 447 查看

原文作者：杨友山原文地址：/article/1419373.html
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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航