[GridView][ASP.NET] GridView 新增、修改、刪除與排序,沒資料時顯示標題列

[GridView][ASP.NET] GridView 新增、修改、刪除與排序,沒資料時顯示標題列

Introduction

GridView 一直都是賴以為生的工具,如何寫好與善用真是需要用心;

再不改寫控制項的情況下(下次分享),我自己大概是以下面方式達成。

環境:xp sp3 + vs2005 + asp.net 2.0 + SqlServer 2005 + 北風資料庫

其中北風資料庫安裝檔:http://www.microsoft.com/downloads/en/details.aspx?FamilyID=06616212-0356-46A0-8DA2-EEBC53A68034&displaylang=en

 

Examples

版面配置

2010-10-01_105128

 

.aspx

<form id="form1" runat="server">
        <div>
            <asp:LinkButton ID="lcmdAdd" runat="server" OnClick="lcmdAdd_Click">新增</asp:LinkButton>
            &nbsp; &nbsp; &nbsp;
            <asp:Label ID="lblTotal" runat="server" ForeColor="Red" Text="Label"></asp:Label><br />
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
                          AllowPaging="True" AllowSorting="True" 
                          OnPageIndexChanging="GridView1_PageIndexChanging" 
                          OnRowCancelingEdit="GridView1_RowCancelingEdit" 
                          OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating" 
                          OnSorting="GridView1_Sorting" OnRowDeleting="GridView1_RowDeleting">
                <Columns>
                    <asp:TemplateField HeaderText="編輯">
                        <FooterStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                        <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                        <EditItemTemplate>
                            <asp:LinkButton ID="lcmdUpdate" runat="server" CommandName="Update">更新</asp:LinkButton>
                            <asp:LinkButton ID="lcmdCancel_E" runat="server" CommandName="Cancel">取消</asp:LinkButton>
                        </EditItemTemplate>
                        <FooterTemplate>
                            <asp:LinkButton ID="lcmdSave" runat="server" OnClick="lcmdSave_Click">儲存</asp:LinkButton>
                            <asp:LinkButton ID="lcmdCancel_F" runat="server" OnClick="lcmdCancel_F_Click">取消</asp:LinkButton>
                        </FooterTemplate>
                        <ItemTemplate>
                            <asp:LinkButton ID="lcmdModify" runat="server" CommandName="Edit">修改</asp:LinkButton>
                            <asp:LinkButton ID="lcmdDelete" runat="server" CommandName="Delete">刪除</asp:LinkButton>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="EmployeeID" Visible="False">
                        <FooterStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                        <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />                        
                        <EditItemTemplate>
                            <asp:Label ID="lblEmployeeID_E" runat="server" Text='<%#Eval("EmployeeID") %>'></asp:Label>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="lblEmployeeID" runat="server" Text='<%#Eval("EmployeeID") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="LastName" SortExpression="LastName">
                        <FooterStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px"/>
                        <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px"/>
                        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px"/>
                        <ControlStyle Width="100px" />                        
                        <EditItemTemplate>
                            <asp:TextBox ID="lblLastName_E" runat="server" Width="100%" Text='<%#Eval("LastName") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <FooterTemplate>
                            <asp:TextBox ID="lblLastName_F" runat="server" Width="100%" Text='<%#Eval("LastName") %>'></asp:TextBox>
                        </FooterTemplate>
                        <ItemTemplate>
                            <asp:Label ID="lblLastName" runat="server" Text='<%#Eval("LastName") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">
                        <FooterStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px"/>
                        <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px"/>
                        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px"/>
                        <ControlStyle Width="100px" />
                        <EditItemTemplate>
                            <asp:TextBox ID="lblFirstName_E" runat="server" Width="100%" Text='<%#Eval("FirstName") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <FooterTemplate>
                            <asp:TextBox ID="lblFirstName_F" runat="server" Width="100%" Text='<%#Eval("FirstName") %>'></asp:TextBox>
                        </FooterTemplate>
                        <ItemTemplate>
                            <asp:Label ID="lblFirstName" runat="server" Text='<%#Eval("FirstName") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>
    </form>

 

GridView 事件

2010-10-01_105753

 

GridView 屬性

最主要是將排序與分頁打開

2010-10-01_105853

 

 

程式碼

using System.Data.SqlClient;
namespace TestWebGridView {
    public partial class _Default : System.Web.UI.Page {
        private SqlConnection _DbConn;
        private SqlCommand _DbCmd;
        private string _DbConnectionString;

        public _Default() {
            this._DbConnectionString = @"Data Source=localhost;Initial Catalog=Northwind;
                                         User Id=sa;Password=1234;";

            this._DbConn = new SqlConnection(this._DbConnectionString);
            this._DbCmd = new SqlCommand();
            this._DbCmd.CommandType = CommandType.Text;
            
        }

        protected void Page_Load(object sender, EventArgs e) {
            if (!Page.IsPostBack) {
                this.BindData();
            }
        }

        //繫結資料
        private void BindData() {
            this.GVGetData(this.GridView1);
        }

        //抓取資料並繫結 GridView
        private void GVGetData(GridView pGridView) {
            try {
                //判斷是否排序過
                if (ViewState["NowSE"] == null) {
                    //沒有排序過,直接抓 DataTable
                    DataTable oDT = this.GetData();
                    this.BindGridView(oDT, pGridView);
                } else { 
                    //有排序,所以除了抓資料,還要排序
                    string NowSE = ViewState["NowSE"].ToString();
                    SortDirection NowSD = (SortDirection)ViewState["NowSD"];
                    this.GVGetData(NowSD, NowSE,pGridView);
                }
            } catch {
                throw;
            }
        }

        //有指定排序的抓資料並繫結 GridView
        private void GVGetData(SortDirection pSortDirection, string pSortExpression,GridView pGridView) {
            try {
                DataTable oDT = this.GetData();
                string sSort = string.Empty;
                if (pSortDirection == SortDirection.Ascending) {
                    sSort = pSortExpression;
                } else {
                    sSort = pSortExpression + " DESC";
                }

                DataView oDV = oDT.DefaultView;
                oDV.Sort = sSort;
                this.BindGridView(oDV, pGridView);                
            } catch {
                throw;
            }
        }

        //繫結 GridView
        private void BindGridView(DataView InDV, GridView InGridView) {
            DataTable oDT = InDV.Table;
            this.BindGridView(oDT, InGridView);
        }

        //繫結 GridView
        private void BindGridView(DataTable InDT, GridView InGridView) {
            //判斷 DataTable 有無資料
            if (InDT.Rows.Count == 0) {
                //設定筆數
                this.SetTotalData("0");

                //使用與來源資料表相同的結構新增資料列
                DataRow oDR = InDT.NewRow();

                //允許資料列的欄位可以是 DBNULL 值
                foreach (DataColumn item in oDR.Table.Columns) {
                    item.AllowDBNull = true;
                }

                //DataTable 加入資料列
                InDT.Rows.Add(oDR);

                //將資料來源結構指定給 Grid DataSource
                InGridView.DataSource = InDT;
                InGridView.DataBind();

                //取得儲存格筆數
                int columnCount = InGridView.Rows[0].Cells.Count;
                InGridView.Rows[0].Cells.Clear();
                InGridView.Rows[0].Cells.Add(new TableCell());
                //合併儲存格
                InGridView.Rows[0].Cells[0].ColumnSpan = columnCount;
                //設定儲存格文字
                InGridView.Rows[0].Cells[0].Text = "No Data!";
                InGridView.RowStyle.HorizontalAlign = HorizontalAlign.Center;
                InGridView.RowStyle.VerticalAlign = VerticalAlign.Middle;
            } else {
                InGridView.DataSource = InDT;
                InGridView.DataBind();
                this.SetTotalData(InDT.Rows.Count.ToString());
            }
        }


        /// <summary>
        /// 取得資料表。
        /// </summary>        
        private DataTable GetData() {
            DataTable oDT = new DataTable();
            SqlDataReader oDbReader = null;
            if (this._DbConn.State != ConnectionState.Open) {
                this._DbConn.Open();
            }
            try {
                this._DbCmd.Connection = this._DbConn;
                this._DbCmd.CommandText = this.GetQueryStringSelect();
                oDbReader = this._DbCmd.ExecuteReader(CommandBehavior.CloseConnection);
                oDT.Load(oDbReader);
            } catch {
                throw;
            }
            finally {
                if (oDbReader != null) {
                    oDbReader.Dispose();
                }
            }
            return oDT;
        }

        /// <summary>
        /// 取得 SQLCommand Select 字串。
        /// </summary>        
        private string GetQueryStringSelect() {
            string sResult = string.Empty;
            sResult = @"Select EmployeeID,LastName,FirstName
                        From [dbo].Employees";
            return sResult;
        }

        /// <summary>
        /// 設定總筆數。
        /// </summary>        
        private void SetTotalData(string Value) {
            this.lblTotal.Text = string.Format("總比數:{0}", Value);
        }

        /// <summary>
        /// 分頁切換。
        /// </summary>        
        protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e) {
            //指定 GridView 的新頁面索引
            (sender as GridView).PageIndex = e.NewPageIndex;

            //重新繫結 GridView
            this.GVGetData(sender as GridView);
        }

        /// <summary>
        /// 排序資料列。
        /// </summary>        
        protected void GridView1_Sorting(object sender, GridViewSortEventArgs e) {
            string NowSE = ViewState["NowSE"] != null ? ViewState["NowSE"].ToString() : string.Empty;
            SortDirection NowSD = ViewState["NowSD"] != null ? (SortDirection)ViewState["NowSD"] : SortDirection.Ascending;

            if (string.IsNullOrEmpty(NowSE)) {
                NowSE = e.SortExpression;
                NowSD = SortDirection.Ascending;
            }

            if (NowSE != e.SortExpression) {
                NowSE = e.SortExpression;
                NowSD = SortDirection.Ascending;
            } else {
                if (NowSD == SortDirection.Ascending) {
                    NowSD = SortDirection.Descending;
                } else {
                    NowSD = SortDirection.Ascending;
                }
            }

            ViewState["NowSD"] = NowSD;
            ViewState["NowSE"] = NowSE;

            this.GVGetData(NowSD, NowSE,sender as GridView);
        }

        
        protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e) {            
            this.RowEditingGridVeiw(sender as GridView, e.NewEditIndex);
        }

        /// <summary>
        /// 修改資料列。
        /// </summary>        
        protected void RowEditingGridVeiw(GridView pGridView, int NewEditIndex) {
            //設定 GridView 要編輯的資料列            
            pGridView.EditIndex = NewEditIndex;

            //取消新增資料列
            this.CancelRowAddGridView(pGridView);
        }

        protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e) {
            this.UpdatingRowGridView(sender as GridView, e);
        }
        

        /// <summary>
        /// 更新資料列。
        /// </summary>
        protected void UpdatingRowGridView(GridView pGridView, GridViewUpdateEventArgs e) { 
            //DoUpdateData...

            //離開模式
            //this.CancelRowEditGridView(pGridView);
        }

        protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e) {
            this.CancelRowEditGridView(sender as GridView);
        }

        /// <summary>
        /// 取消資料列修改。
        /// </summary>        
        protected void CancelRowEditGridView(GridView pGridView) {
            pGridView.EditIndex = -1;
            this.GVGetData(pGridView);
        }

        protected void lcmdAdd_Click(object sender, EventArgs e) {
            this.AddRowGridView(this.GridView1);
        }

        protected void AddRowGridView(GridView InGridView) {
            //顯示新增資料列
            InGridView.ShowFooter = true;

            //關閉修改列            
            this.CancelRowEditGridView(InGridView);   
         
            //關閉 No Data 資料列
            this.VisibleGridViewNoData(InGridView, false);
        }


        protected void lcmdCancel_F_Click(object sender, EventArgs e) {
            this.CancelRowAddGridView(this.GridView1);
        }

        /// <summary>
        /// 取消資料列新增。
        /// </summary>        
        protected void CancelRowAddGridView(GridView InGridView) {
            InGridView.ShowFooter = false;
            this.GVGetData(InGridView);
        }

        protected void lcmdSave_Click(object sender, EventArgs e) {
            this.SaveRowGridView(this.GridView1);
        }

        /// <summary>
        /// 儲存資料列。
        /// </summary>        
        protected void SaveRowGridView(GridView InGridView) { 
            //DoInsertData...
            //this.CancelRowAddGridView(InGridView);
        }

        protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e) {
            this.DeletingRowGridView(sender as GridView, e.RowIndex);
        }

        /// <summary>
        /// 刪除資料列
        /// </summary>        
        protected void DeletingRowGridView(GridView InGridView,int RowIndex) { 
            //DoDeleteData
            //this.GVGetData(InGridView);
        }

        /// <summary>
        /// 顯示 No Data 資料列。
        /// </summary>        
        protected void VisibleGridViewNoData(GridView InGridView, bool IsShow) {
            if (InGridView.Rows.Count == 1 && !IsShow) {
                if (InGridView.Rows[0].Cells[0].Text.Trim().Equals("No Data!")) {
                    InGridView.Rows[0].Visible = IsShow;
                }
            }
        }
    }
}

達到效果

我們希望 GirdView 具備了新刪修之後還可以排序,並且沒資料時顯示標題列

List

2010-10-01_111541

 

新增

2010-10-01_111653

修改

2010-10-01_111757

排序(lastName)

2010-10-01_111928

顯示標題列

2010-10-01_112115

 

當沒資料時除了顯示標題列外,按下新增 No Data 隱藏起來

2010-10-01_112246

 

 

 下載程式碼:TestWebGridView.rar

HEMiDEMi 的標籤:,

三小俠  小弟獻醜,歡迎指教