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

 

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

效果如下
/
點擊增加按鈕後
/

JS文件如下:

/

前臺代碼:

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





<%#Container.DataItemIndex +1%> 序號 <%#Eval(p_name)%> 姓名 <%#Eval(p_age)%> 年齡 <%#Eval(p_sex)%> 性別
增加一個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 = ;
    $(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實現。當然增加完一行後,數據需要編輯和保存,下一篇來介紹刪除。
代碼下載:https://download.csdn.net/detail/yysyangyangyangshan/6997727

發佈留言