这篇文章主要介绍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进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。