ASP.NET如何实现GridView增加一行JS-创新互联

这篇文章主要介绍ASP.NET如何实现GridView增加一行JS，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

公司主营业务：网站建设、成都网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联公司推出雨花台免费做网站回馈大家。

效果如下
ASP.NET如何实现GridView增加一行JS
点击增加按钮后
ASP.NET如何实现GridView增加一行JS


JS文件如下：

ASP.NET如何实现GridView增加一行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”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

新闻标题：ASP.NET如何实现GridView增加一行JS-创新互联
网页路径：https://www.cdcxhl.com/article34/digcse.html

成都网站建设公司_创新互联，为您提供静态网站、外贸网站建设、移动网站建设、网站策划、外贸建站、面包屑导航

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

成都定制网站建设

解决方案知识

行业网站建设