温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

ASP.NET如何实现GridView增加一行JS

发布时间:2021-10-21 11:34:38 来源:亿速云 阅读:105 作者:小新 栏目:编程语言

这篇文章主要介绍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”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI