Master-Detail GridView

article/2025/9/10 8:38:10

梦幻版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 ！你已經毫無疑問了！