GridView展現Master-Detail的幾種方式(包含動態錄影教學)

資料表設計經常會有Head,Detail的設計,拿最普遍的範例(北風資料庫)來看。訂單就有分為訂單Head檔(Orders)與訂單Detail明細(Order Details)這兩個資料表。當然這樣的資料表示有關係的,已訂單為例的話,關係就是訂單編號(OrderID)

那麼如何在畫面上展現這樣的資料呢,小喵整理以下幾種

資料表設計經常會有Head,Detail的設計,拿最普遍的範例(北風資料庫)來看。訂單就有分為訂單Head檔(Orders)與訂單Detail明細(Order Details)這兩個資料表。當然這樣的資料表示有關係的,以訂單為例的話,關係就是訂單編號(OrderID)

那麼如何在畫面上展現這樣的資料呢,小喵整理以下幾種

  1. GridView多筆顯示Orders,點選某一筆訂單時,另一GridView顯示該訂單的明細
  2. GridView包GridView的巢狀顯示
  3. GridView多筆顯示Orders,點選某一筆時,在GridView裡面增加一個Row顯示該訂單的明細
    1. 小喵的作法
    2. Jeff大大的作法

各方式的設計方式如下

 

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顯示該訂單的明細

這裡提供小喵的做法與Jeff大大的作法提供大家參考

a.小喵的作法如下:

這個方式程式碼會多一點點,因為要動態的撰寫增加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

b.Jeff大大的做法:

請參考這篇:十幾行程式碼搞定 Master-Detail GridView(內含子 GridView)


以下是簽名:


Microsoft MVP
Visual Studio and Development Technologies
(2005~2019/6) 
topcat
Blog:http://www.dotblogs.com.tw/topcat