数据表设计经常会有Head,Detail的设计,拿最普遍的范例(北风数据库)来看。订单就有分为订单Head文件(Orders)与订单Detail明细(Order Details)这两个数据表。当然这样的数据表示有关系的,已订单为例的话,关系就是订单编号(OrderID)
那么如何在画面上展现这样的资料呢,小喵整理以下几种
- GridView多笔显示Orders,点选某一笔订单时,另一GridView显示该订单的明细
- GridView包GridView的巢状显示
- 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
最後相關的程式碼附在這裡
![]() Microsoft MVP ASP/ASP.NET |
![]() topcat |