Master-Detail GridView

梦幻版Master-Detail GridView(黄忠成)

2007-12-26 09:34

前面的Master-Detail GridView控件應用，相信你已在市面上的書、或網路上見過，但此節中的GridView控件應用包你沒看過，但一定想過！請見圖4-8-63。

圖4-8-63

圖4-8-64

你一定很想驚呼？這是GridView嗎？？不是第三方控件的效果吧？是的！這是GridView控件，而且只需要不到100行程式碼！！請先建立一個UserControl：DetailsGrid.ascx，加入一個SqlDataSource控件連結至Northwind的Order Details資料表，選取所有欄位，接著在WHERE區設定如圖4-8-65的條件。

圖4-8-65

接著加入一個GridView控件繫結至此SqlDataSource控件，並將Enable Editing打勾，然後於原始碼中鍵入4-8-17的程式碼。

程式4-8-17

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

public partial class DetailsGrid : System.Web.UI.UserControl

{

    public int OrderID

    {

        get

        {

            object o = ViewState["OrderID"];

            return o == null ? -1 : (int)o;

        }

        set

        {

            ViewState["OrderID"] = value;

            SqlDataSource1.SelectParameters[0].DefaultValue = value.ToString();

        }

    }

    protected void Page_Load(object sender, EventArgs e)

    {

    }

}

接著建立一個新網頁，加入SqlDataSource控件繫結至Northwind的Orders資料表，然後加入一個GridView控件，並於其欄位編輯器中加入一個TemplateField，於其內加入一個LinkButton控件，設定其屬性如圖4-8-66。

圖4-8-66

然後設定LinkButton的DataBindings如圖4-8-67。

圖4-8-67

然後於原始碼中鍵入4-8-18的程式碼。

程式4-8-18

using System;

using System.Collections.Generic;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

public partial class CollapseGridView : System.Web.UI.Page

{

    private List<int> _collaspedRows = new List<int>();

    private List<GridViewRow> _delayAddRows = new List<GridViewRow>();

    private bool RowIsCollasped(GridViewRow row)

    {

        if(_collaspedRows.Count > 0)

            return _collaspedRows.Contains((int)GridView1.DataKeys[row.RowIndex].Value);

        return false;

    }

    private void CreateDetailRow(GridViewRow gridRow)

    {

        if (RowIsCollasped(gridRow))

        {

            GridViewRow row = new GridViewRow(gridRow.RowIndex, -1,

DataControlRowType.DataRow, DataControlRowState.Normal);

            TableCell cell = new TableCell();

            row.Cells.Add(cell);

            TableCell cell2 = new TableCell();

            cell2.Attributes["colspan"] = (GridView1.Columns.Count - 1).ToString();

            Control c = LoadControl("DetailsGrid.ascx");

             ((DetailsGrid)c).OrderID = (int)GridView1.DataKeys[gridRow.RowIndex].Value;

            cell2.Controls.Add(c);

            row.Cells.Add(cell2);

            _delayAddRows.Add(row);

        }

    }

    protected void Page_Load(object sender, EventArgs e)

    {

    }  

    protected override void LoadViewState(object savedState)

    {

        Pair state = (Pair)savedState;

        base.LoadViewState(state.First);

        _collaspedRows = (List<int>)state.Second;

    }

    protected override object SaveViewState()

    {

        Pair state = new Pair(base.SaveViewState(), _collaspedRows);

        return state;

    }

}

接下來在TemplateField中的LinkButton的Click事件中鍵入4-8-19的程式碼。

程式4-8-19

protected void LinkButton1_Click(object sender, EventArgs e)

{

        LinkButton btn = (LinkButton)sender;       

        int key = int.Parse(btn.CommandArgument);

        if (_collaspedRows.Contains(key))

        {

            _collaspedRows.Remove(key);

            GridView1.DataBind();

        }

        else

        {

            _collaspedRows.Clear(); // clear.

            _collaspedRows.Add(key);

            GridView1.DataBind();

        }

}

最後在GridView控件的RowCreated、PageIndexChanging事件中鍵入4-8-20的程式碼。

程式4-8-20

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)

{

        if(e.Row.RowType == DataControlRowType.DataRow)

            CreateDetailRow(e.Row);

        else if (e.Row.RowType == DataControlRowType.Pager && _delayAddRows.Count > 0)

        {

            for (int i = 0; i < GridView1.Rows.Count; i++)

            {

                if (RowIsCollasped(GridView1.Rows[i]))

                {

                    GridView1.Controls[0].Controls.AddAt(GridView1.Rows[i].RowIndex + 2,

_delayAddRows[0]);

                    _delayAddRows.RemoveAt(0);

                }

            }

        }

    }

    protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)

    {

        _collaspedRows.Clear();

    }

執行後你就能看到前圖的效果了，那具體是如何做到的呢？從前面的說明，我們知道了可以在GridView控件中動態的插入一個 GridViewRow控件，而GridViewRow控件可以擁有多個Cell，每個Cell可以擁有子控件，那麼當這個子控件是一個UserControl呢 ？相信說到這份上，讀者已經知道整個程式的運行基礎及概念了，剩下的細節如LoadViewState、SaveViewState皆已在前面章節提過，看懂這個範例後！你應該也想到了其它的應用了(UserControl中放DetailsView、FormView、MultiView，哈!)，對於GridView！你已經毫無疑問了！