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

Gridview在做项目时一般使用的比较多，用来展示数据，编辑数据等。这一篇我们来看看如何用JS控制gridview来增加一行。主要还是使用Jquery，原理是复制一行已有的数据。直接看代码
效果如下
SouthEast
点击增加按钮后
SouthEast

JS文件如下：

SouthEast

前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ChildFrm.aspx.cs" Inherits="ASPNETGridViewJSAdd.Pages.ChildFrm" %>







   


    

     
      
             GridLines="Horizontal" PageChange="TextBox" AutoGenerateColumns="False" SortMode="Total" ForeColor="#333333"
       CellSpacing="1" Width="60%" ShowNoRecordTip="True">
    


      
      
         <%#Container.DataItemIndex +1%>
        
      
      
           序号
      
      


      
      
        <%#Eval("p_name")%>
      
      
           姓名
      
      


       
      
        <%#Eval("p_age")%>
      
      
           年龄
      
      
      
      
      
        <%#Eval("p_sex")%>
      
      
           性别
      
      


    
    
           
           
           
           
           
           
   
   



增加一个gridview控件，后台存放数据使用DataTable。表头和内容使用和来展示。这样可以在列中方多个控件，以满足项目的需要。

下面是JS代码：








主要用来响应增加按钮增加一行，并且刷新数据，这里主要是来刷新序号。

后台代码


用于读取数据的方法，专门写了一个单例模式的类，本人觉得这样利于管理，所有代码都写在页面的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();
            }
        }
    }

这样就完成了。