溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹ASP.NET如何實現GridView增加一行JS，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
效果如下
點擊增加按鈕后
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();
}
}
}以上是“ASP.NET如何實現GridView增加一行JS”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
