來自微軟MSDN
「在 TreeView 控制項中顯示關聯式資料」
就是網路上很多人詢問的「TreeView or Menu巡覽控制項,如何從資料庫裡面撈資料,自動顯示出樹狀階層的路徑?」
以下的程式碼,我個人加上一些註解,
希望對您有幫助。
如同昨天分享的範例,今天要分享的
也是來自同一個網址(微軟MSDN)
逐步解說:顯示 TreeView 控制項中的階層式資料
http://msdn.microsoft.com/zh-tw/library/7a9swst5%28v=VS.100%29.aspx
這篇文章有分成上 / 下兩個範例
下半部的「在 TreeView 控制項中顯示關聯式資料」
就是網路上很多人詢問的「TreeView or Menu巡覽控制項,如何從資料庫裡面撈資料,自動顯示出樹狀階層的路徑?」
本文已經收錄在「下集(第二版)」 2011年推出的黑皮書裡面,
============================================================
HTML畫面設計:
本範例採用了 Northwind資料庫,唯二要動手修正的地方:
第一,Web.Config檔裡面的連線字串(ConnectionString)
第二,畫面上的 TreeView
#以滑鼠右鍵按一下 [TreeView] 控制項 => [屬性],然後將 [MaxDataBindDepth] 設為 2。
#以滑鼠右鍵按一下 [TreeView] 控制項 => [顯示智慧工作],然後在 [TreeView 工作] 功能表上按 [編輯節點]。
#在 [TreeView 節點編輯器] 對話方塊中,按一下標記為 [加入根節點] 的圖示,然後在 [屬性] 下,將 [文字] 設為 [Product List],並將 [PopulateOnDemand] 設為 true。 註:若要動態填入節點,請先將節點的 PopulateOnDemand 屬性設為 true。
#按一下 [確定]。
您會建立樹狀結構的最上層節點,其中只包含靜態文字。
============================================================
後置程式碼 Code Behind:
以下的程式碼範例,有點複雜。
但只要您瞭解 Northwind資料庫裡面, Products 與 Categories兩個資料表的關連。
就能應用這段現成的程式來作了。
執行成果如下圖:
我們可以看見「第一層」節點是「產品分類(Categories)」,例如:飲料。
第二層的節點,才是產品名稱。
同理可證,您手上如果有兩個關連式資料表,
只要修改一下SQL指令,也能原封不動地使用這段程式。
以下的程式碼,我個人加上一些註解,
希望對您有幫助。
原本的網址,也有提供C#範例,您也可以參閱。
02
03 Imports System.Web.Configuration
04 Imports System.Data
05 Imports System.Data.SqlClient
06
07
08
09 Protected Sub TreeView1_TreeNodePopulate(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.TreeNodeEventArgs) Handles TreeView1.TreeNodePopulate
10 '== 當使用者按一下以開啟節點時,會呼叫此程式碼。 ==
11 ' e As TreeNodeEventArgs物件會以程式的方式存取目前節點。
12
13 If e.Node.ChildNodes.Count = 0 Then
14 Select Case e.Node.Depth
15 '== 因為您想要在樹狀結構的不同層級顯示不同的資料,
16 '== 所以必須判斷使用者按一下的節點深度,然後於該層級適當地填入節點。
17 Case 0
18 PopulateCategories(e.Node) '== 自己寫的副程式
19 Case 1
20 PopulateProducts(e.Node) '== 自己寫的副程式
21 End Select
22 End If
23
24 End Sub
25
26 '==== 自己寫的副程式 ===============================================
27 Sub PopulateCategories(ByVal node As TreeNode)
28 Dim sqlQuery As New SqlCommand("Select CategoryName, CategoryID From Categories")
29
30 Dim ResultSet As DataSet = RunQuery(sqlQuery)
31
32 If ResultSet.Tables.Count > 0 Then
33 Dim row As DataRow
34 For Each row In ResultSet.Tables(0).Rows
35 Dim NewNode As TreeNode = New TreeNode(row("CategoryName").ToString() & "--以下是產品", row("CategoryID").ToString())
36 NewNode.PopulateOnDemand = True
37 '== 底下還有一層子節點,所以設定為 true。
38 NewNode.SelectAction = TreeNodeSelectAction.Expand
39 node.ChildNodes.Add(NewNode)
40 '== 註解:將每一個節點的 PopulateOnDemand 屬性設為 true,以便在使用者按一下節點時,節點會引發其 TreeView TreeNodePopulate事件。
41 '== 設定 SelectAction 屬性,讓節點根據 “預設”處於展開狀態。
42
43 Next
44 End If
45 End Sub
46
47
48 '== 節點的第二層級將顯示每一個分類的產品。
49 '== 因此,填入產品節點會需要參數型查詢,以便您可以為目前分類擷取產品,並適當地填入子節點。
50 Sub PopulateProducts(ByVal node As TreeNode)
51 Dim sqlQuery As New SqlCommand
52 sqlQuery.CommandText = "Select ProductName From Products Where CategoryID = @categoryid"
53 sqlQuery.Parameters.Add("@categoryid", SqlDbType.Int).Value = node.Value
54
55 Dim ResultSet As DataSet = RunQuery(sqlQuery)
56
57 If ResultSet.Tables.Count > 0 Then
58 Dim row As DataRow
59 For Each row In ResultSet.Tables(0).Rows
60 Dim NewNode As TreeNode = New TreeNode(row("ProductName").ToString())
61 NewNode.PopulateOnDemand = False
62 NewNode.SelectAction = TreeNodeSelectAction.None
63 node.ChildNodes.Add(NewNode)
64 ' == 註解:將 PopulateOnDemand屬性設為 false。如此在顯示產品節點時,”不”顯示展開按鈕。
65 '== 這是十分必要的,因為這些產品的節點下面,已經並沒有其他(更深一層的)節點了。
66
67 Next
68 End If
69 End Sub
70 '=============================================================
71
72
73 Function RunQuery(ByVal sqlQuery As SqlCommand) As DataSet
74 Dim Conn As New SqlConnection(WebConfigurationManager.ConnectionStrings("NorthwindConnectionString").ConnectionString)
75
76 Dim dbAdapter As New SqlDataAdapter()
77 dbAdapter.SelectCommand = sqlQuery
78 sqlQuery.Connection = Conn
79
80 Dim ds As DataSet = New DataSet()
81 Try
82 dbAdapter.Fill(ds)
83 Catch ex As Exception
84 Response.Write("Unable to connect to SQL Server.")
85 End Try
86
87 Return ds '== 傳回一個 DataSet
88 End Function
上面會使用到一個少見的事件
TreeView. TreeNodePopulate 事件
有時候,根據使用者輸入的資料大小或自訂內容,靜態地預先定義樹狀結構並不實際。因為這個原因,TreeView 控制項會支援動態節點擴展。將節點的 PopulateOnDemand 屬性設定為 true 時,在執行階段展開節點時,便會填入該節點。
若要動態填入節點,請先將節點的 PopulateOnDemand 屬性設為 true。然後,定義 TreeNodePopulate 事件的事件處理方法,以程式的方式填入節點。一般事件處理方法會從資料來源擷取節點資料、將資料置於節點結構,然後將節點結構加入所填入之節點的 ChildNodes 集合。藉由將 TreeNode 物件加入父節點的 ChildNodes 集合,可建立節點結構。
檔案下載(附上VB與C#兩種),裡面我有加上個人註解,希望對您有幫助。
=== 最後要打一下廣告 ==========================
1. 如果您覺得我的描述、寫作方式,符合您的胃口。
2. 如果您看完以後,知道我寫書、介紹一些控制項或是技術........不是「混過去」、「帶過去」而已,而是真真確確地蒐集 "有用的範例",讓您學得更深入!
3. 如果您覺得:我出完書以後,還不定期地提供售後服務,提供補充教材......這樣的互動是 "良性"的,是值得鼓勵的。......已經推出 兩百多篇 補充範例了
4. 如果您(尤其是學生)真的想把基礎學好,而不是 "混"過這一門課就好、而不是寫個(畢業專題的)屍體出來交差(能畢業就好).....那麼.......
請您購買下面的書籍,
東西多到您學不完
上 / 下兩集,兩本書的厚度(我蒐集的各種範例)將近 兩千頁 !!......絕對不會讓您失望
我將思想傳授他人, 他人之所得,亦無損於我之所有;
猶如一人以我的燭火點燭,光亮與他同在,我卻不因此身處黑暗。----Thomas Jefferson
線上課程教學,遠距教學 (Web Form 約 51hr) https://dotblogs.com.tw/mis2000lab/2016/02/01/aspnet_online_learning_distance_education_VS2015
線上課程教學,遠距教學 (ASP.NET MVC 約 140hr) https://dotblogs.com.tw/mis2000lab/2018/08/14/ASPnet_MVC_Online_Learning_MIS2000Lab
寫信給我,不要私訊 -- mis2000lab (at) yahoo.com.tw 或 school (at) mis2000lab.net
(1) 第一天 ASP.NET MVC5 完整影片(5.5小時 / .NET 4.x版)免費試聽。影片 https://youtu.be/9spaHik87-A
(2) 第一天 ASP.NET Core MVC 完整影片(3小時 / .NET Core 6.0~8.0)免費試聽。影片 https://youtu.be/TSmwpT-Bx4I
[學員感言] mis2000lab課程評價 - ASP.NET MVC , WebForm 。 https://mis2000lab.medium.com/%E5%AD%B8%E5%93%A1%E6%84%9F%E8%A8%80-mis2000lab%E8%AA%B2%E7%A8%8B%E8%A9%95%E5%83%B9-asp-net-mvc-webform-77903ce9680b
ASP.NET遠距教學、線上課程(Web Form + MVC)。 第一天課程, "完整" 試聽。
......... facebook社團 https://www.facebook.com/mis2000lab ......................
......... YouTube (ASP.NET) 線上教學影片 https://www.youtube.com/channel/UC6IPPf6tvsNG8zX3u1LddvA/
Blog文章 "附的範例" 無法下載,請看 https://dotblogs.com.tw/mis2000lab/2016/03/14/2008_2015_mis2000lab_sample_download
請看我們的「售後服務」範圍(嚴格認定)。
......................................................................................................................................................
ASP.NET MVC => .NET Core MVC 線上教學 ...... 第一天課程 完整內容 "免費"讓您評估 / 試聽
[遠距教學、教學影片] ASP.NET (Web Form) 課程 上線了!MIS2000Lab.主講 事先錄好的影片,並非上課側錄! 觀看時,有如「一對一」面對面講課。