ASP.NET—005：GridView增加一行JS實現

 

Gridview在做項目時一般使用的比較多，用來展示資料，編輯資料等。這一篇我們來看看如何用JS控制gridview來增加一行。主要還是使用Jquery，原理是複製一行已有的資料。直接看代碼

效果如下

點擊增加按鈕後

JS檔案如下：

前台代碼：

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

增加一個gridview控制項，後台存放資料使用DataTable。表頭和內容使用和來展示。這樣可以在列中方多個控制項，以滿足項目的需要。

下面是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();            }        }    }

這樣就完成了。
增加一行的功能主要是JS實現。當然增加完一行後，資料需要編輯和儲存，下一篇來介紹刪除。
代碼下載：http://download.csdn.net/detail/yysyangyangyangshan/6997727