來自微軟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
![](dialog/InsertCode/codeimages/None.gif)
04
![](dialog/InsertCode/codeimages/None.gif)
05
![](dialog/InsertCode/codeimages/ExpandedBlockEnd.gif)
06
07
![](dialog/InsertCode/codeimages/None.gif)
08
09
![](dialog/InsertCode/codeimages/ExpandedBlockStart.gif)
10
![](dialog/InsertCode/codeimages/InBlock.gif)
11
![](dialog/InsertCode/codeimages/InBlock.gif)
12
![](dialog/InsertCode/codeimages/InBlock.gif)
13 If e.Node.ChildNodes.Count = 0 Then
14
![](dialog/InsertCode/codeimages/InBlock.gif)
15
![](dialog/InsertCode/codeimages/InBlock.gif)
16
![](dialog/InsertCode/codeimages/InBlock.gif)
17
![](dialog/InsertCode/codeimages/InBlock.gif)
18
![](dialog/InsertCode/codeimages/InBlock.gif)
19
![](dialog/InsertCode/codeimages/InBlock.gif)
20
![](dialog/InsertCode/codeimages/InBlock.gif)
21
![](dialog/InsertCode/codeimages/InBlock.gif)
22
![](dialog/InsertCode/codeimages/InBlock.gif)
23
![](dialog/InsertCode/codeimages/InBlock.gif)
24
![](dialog/InsertCode/codeimages/ExpandedSubBlockEnd.gif)
25
![](dialog/InsertCode/codeimages/InBlock.gif)
26 '==== 自己寫的副程式 ===============================================
27
![](dialog/InsertCode/codeimages/ExpandedSubBlockStart.gif)
28
![](dialog/InsertCode/codeimages/InBlock.gif)
29
![](dialog/InsertCode/codeimages/InBlock.gif)
30 Dim ResultSet As DataSet = RunQuery(sqlQuery)
31
![](dialog/InsertCode/codeimages/InBlock.gif)
32 If ResultSet.Tables.Count > 0 Then
33
![](dialog/InsertCode/codeimages/InBlock.gif)
34
![](dialog/InsertCode/codeimages/InBlock.gif)
35
![](dialog/InsertCode/codeimages/InBlock.gif)
36
![](dialog/InsertCode/codeimages/InBlock.gif)
37
![](dialog/InsertCode/codeimages/InBlock.gif)
38
![](dialog/InsertCode/codeimages/InBlock.gif)
39
![](dialog/InsertCode/codeimages/InBlock.gif)
40
![](dialog/InsertCode/codeimages/InBlock.gif)
41
![](dialog/InsertCode/codeimages/InBlock.gif)
42
![](dialog/InsertCode/codeimages/InBlock.gif)
43 Next
44
![](dialog/InsertCode/codeimages/InBlock.gif)
45
![](dialog/InsertCode/codeimages/ExpandedSubBlockEnd.gif)
46
![](dialog/InsertCode/codeimages/InBlock.gif)
47
48
![](dialog/InsertCode/codeimages/InBlock.gif)
49
![](dialog/InsertCode/codeimages/InBlock.gif)
50
![](dialog/InsertCode/codeimages/ExpandedSubBlockStart.gif)
51
![](dialog/InsertCode/codeimages/InBlock.gif)
52
![](dialog/InsertCode/codeimages/InBlock.gif)
53
![](dialog/InsertCode/codeimages/InBlock.gif)
54
![](dialog/InsertCode/codeimages/InBlock.gif)
55 Dim ResultSet As DataSet = RunQuery(sqlQuery)
56
![](dialog/InsertCode/codeimages/InBlock.gif)
57 If ResultSet.Tables.Count > 0 Then
58
![](dialog/InsertCode/codeimages/InBlock.gif)
59
![](dialog/InsertCode/codeimages/InBlock.gif)
60
![](dialog/InsertCode/codeimages/InBlock.gif)
61
![](dialog/InsertCode/codeimages/InBlock.gif)
62
![](dialog/InsertCode/codeimages/InBlock.gif)
63
![](dialog/InsertCode/codeimages/InBlock.gif)
64
![](dialog/InsertCode/codeimages/InBlock.gif)
65
![](dialog/InsertCode/codeimages/InBlock.gif)
66
![](dialog/InsertCode/codeimages/InBlock.gif)
67 Next
68
![](dialog/InsertCode/codeimages/InBlock.gif)
69
![](dialog/InsertCode/codeimages/ExpandedSubBlockEnd.gif)
70
![](dialog/InsertCode/codeimages/InBlock.gif)
71
![](dialog/InsertCode/codeimages/InBlock.gif)
72
73
![](dialog/InsertCode/codeimages/ExpandedSubBlockStart.gif)
74
![](dialog/InsertCode/codeimages/InBlock.gif)
75
![](dialog/InsertCode/codeimages/InBlock.gif)
76 Dim dbAdapter As New SqlDataAdapter()
77
![](dialog/InsertCode/codeimages/InBlock.gif)
78
![](dialog/InsertCode/codeimages/InBlock.gif)
79
![](dialog/InsertCode/codeimages/InBlock.gif)
80 Dim ds As DataSet = New DataSet()
81
![](dialog/InsertCode/codeimages/InBlock.gif)
82
![](dialog/InsertCode/codeimages/InBlock.gif)
83
![](dialog/InsertCode/codeimages/InBlock.gif)
84
![](dialog/InsertCode/codeimages/InBlock.gif)
85
![](dialog/InsertCode/codeimages/InBlock.gif)
86
![](dialog/InsertCode/codeimages/InBlock.gif)
87 Return ds '== 傳回一個 DataSet
88
![](dialog/InsertCode/codeimages/ExpandedBlockEnd.gif)
上面會使用到一個少見的事件
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 約 135hr) 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 線上教學 ...... 第一天課程 完整內容 "免費"讓您評估 / 試聽
![](https://dotblogsfile.blob.core.windows.net/user/mis2000lab/f1483b52-7b86-4c3e-9a7c-fc2bf0aa9efd/1536574174_96277.jpg)
[遠距教學、教學影片] ASP.NET (Web Form) 課程 上線了!MIS2000Lab.主講 事先錄好的影片,並非上課側錄! 觀看時,有如「一對一」面對面講課。
![](https://dotblogsfile.blob.core.windows.net/user/mis2000lab/ff8ecc53-3648-4066-9826-4cc3fd053a79/1454295761_0869.jpg)