GridView展现Head,Detail的几种方式(包含动态录像教学)

数据表设计经常会有Head,Detail的设计，拿最普遍的范例(北风数据库)来看。订单就有分为订单Head文件(Orders)与订单Detail明细(Order Details)这两个数据表。当然这样的数据表示有关系的，已订单为例的话，关系就是订单编号(OrderID)

那么如何在画面上展现这样的资料呢，小喵整理以下几种

 

1. GridView多笔显示Orders，点选某一笔订单时，另一GridView显示该订单的明细
2. GridView包GridView的巢状显示 
3. GridView多笔显示Orders，点选某一笔时，在GridView里面增加一个Row显示该订单的明细

各方式的设计方式如下

1.GridView多笔显示Orders，点选某一笔订单时，另一GridView显示该订单的明细

这个透过拖拉放、设定一下就OK了，完全不用写到程序，请看以下的录像教学

 

http://vip2.blueshop.com.tw/topcat/DEMO/DemoHeadDetail/DemoHeadDetail1.html

 

2.GridView包GridView的巢状显示

这种方式写的程序也很少，之前有一篇已经介绍过，请参考以下连结

 

http://www.dotblogs.com.tw/topcat/archive/2008/04/30/3755.aspx

 

3.GridView多笔显示Orders，点选某一笔时，在GridView里面增加一个Row显示该订单的明细

这个方式程序代码会多一点点，因为要动态的撰写增加GridRow以及用程序代码动态的产生Details的GridView

画面的准备过程请看以下的录像

 

http://vip2.blueshop.com.tw/topcat/DEMO/DemoHeadDetail/DemoHeadDetail2.html

其中在GridView的RowDataBound事件中的程序代码如下：

 

 

    Protected Sub gvOrders_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gvOrders.RowDataBound
If Not (ViewState("cOrderID") Is Nothing) Then
If e.Row.RowType = DataControlRowType.DataRow Then
Dim drv As DataRowView = e.Row.DataItem
Dim OrderID As String = CStr(ViewState("cOrderID"))
'判斷訂單編號相同的Row才要處理
If CStr(drv.Item("OrderID")) = OrderID Then
'取得連接字串
Dim ConnStr As String = Web.Configuration.WebConfigurationManager.ConnectionStrings("NWind").ConnectionString
'建立DataTable物件
Dim Dt As New DataTable
'建立Connection
Using Conn As New SqlConnection(ConnStr)
'設定查詢語法
Dim SqlTxt As String = ""
SqlTxt += " SELECT * "
SqlTxt += " FROM [Order Details] "
SqlTxt += " WHERE OrderID = @OrderID "
'建立Command物件
Dim Cmmd As New SqlCommand(SqlTxt, Conn)
'設定參數
Cmmd.Parameters.AddWithValue("@OrderID", ViewState("cOrderID"))
'建立DataAdapter
Dim Da As New SqlDataAdapter(Cmmd)
Da.Fill(Dt)
End Using
'建立Detail的GridView
Dim gvDetail As New GridView
'指定資料來源
gvDetail.DataSource = Dt
'設定自動產生欄位
gvDetail.AutoGenerateColumns = True
'資料繫結
gvDetail.DataBind()
'產生新的GridViewRow
Dim gvRow As New GridViewRow(0, -1, DataControlRowType.DataRow, DataControlRowState.Normal)
'建立一個Cell
Dim tCell As New TableCell
tCell.Controls.Add(gvDetail)
'設定合併Cell
tCell.Attributes.Add("colspan", "7")
'設定置中
tCell.Attributes.Add("align", "center")
'Cell放入GridViewRow
gvRow.Cells.Add(tCell)
'GridViewRow放到GridView中
e.Row.Parent.Controls.AddAt(e.Row.RowIndex + 2, gvRow)
End If
End If
End If
End Sub

最後相關的程式碼附在這裡

tHeadDetail.zip