TreeView Web 服務(wù)器控件用于以樹形結(jié)構(gòu)顯示分層數(shù)據(jù)，如目錄或文件目錄。

一、TreeView 控件支持下面的功能：

• 自動數(shù)據(jù)綁定，該功能允許將控件的節(jié)點(diǎn)綁定到分層數(shù)據(jù)(如 XML 文檔)。
• 通過與 SiteMapDataSource 控件集成提供對站點(diǎn)導(dǎo)航的支持。
• 可以顯示為可選擇文本或超鏈接的節(jié)點(diǎn)文本。
• 可通過主題、用戶定義的圖像和樣式自定義外觀。
• 通過編程訪問 TreeView 對象模型，使您可以動態(tài)地創(chuàng)建樹，填充節(jié)點(diǎn)以及設(shè)置屬性等。
• 通過客戶端到服務(wù)器的回調(diào)填充節(jié)點(diǎn)(在受支持的瀏覽器中)。
• 能夠在每個節(jié)點(diǎn)旁邊顯示復(fù)選框。

二、背景

　　TreeView 控件可以顯示幾種不同類型的數(shù)據(jù)：在控件中以聲明方式指定的靜態(tài)數(shù)據(jù)、綁定到控件的數(shù)據(jù)、或作為對用戶操作的響應(yīng)通過執(zhí)行代碼添加到 TreeView  控件中的數(shù)據(jù)。

2.1、顯示靜態(tài)數(shù)據(jù)

　　可以通過創(chuàng)建 TreeNode 元素集合，這些元素是 TreeView 控件的子級，在 TreeView 控件中顯示靜態(tài)數(shù)據(jù)。這些子元素也被稱為子節(jié)點(diǎn)。

　　下面的示例演示用于 TreeView 控件的標(biāo)記，該控件包含三個節(jié)點(diǎn)，其中兩個節(jié)點(diǎn)具有子節(jié)點(diǎn)。

<asp:TreeView ID="MyTreeView&quot; Runat="server">

<Nodes>

<asp:TreeNode Value="Child1" Expanded="True" Text="1">

<asp:TreeNode Value="Grandchild1" Text="A" />

<asp:TreeNode Value="Grandchild2" Text="B"; />

</asp:TreeNode>

<asp:TreeNode Value="Child2" Text="2" />

<asp:TreeNode Value="Child3" Expanded="True" Text=&quot;3">

&lt;asp:TreeNode Value="Grandchild1" Text="A" />

</asp:TreeNode>

</Nodes>

</asp:TreeView>

2.2、將數(shù)據(jù)綁定到 TreeView 控件

　　可以將 TreeView 控件綁定到支持 IHierarchicalDataSource 接口的數(shù)據(jù)源，例如 XmlDataSource 和 SiteMapDataSource 控件。此外，在綁定數(shù)據(jù)時，還可以完全控制要從數(shù)據(jù)源填充哪些字段。

2.3、使用 TreeNodeCollection 以編程方式顯示數(shù)據(jù)

　　通過訪問 Nodes 屬性(該屬性將返回 TreeNodeCollection 類)，可以通過編程向 TreeView 控件填充數(shù)據(jù)。TreeNodeCollection 是 TreeNode 對象的強(qiáng)類型集合。TreeNode 對象含有一個名為 ChildNodes的屬性。由于該屬性可進(jìn)一步包含 TreeNode 對象，所以 TreeNodeCollection 類是一個表示 TreeView 控件的所有節(jié)點(diǎn)的分層數(shù)據(jù)結(jié)構(gòu)。

2.4、TreeView 節(jié)點(diǎn)類型

　　TreeView 控件由一個或多個節(jié)點(diǎn)構(gòu)成。樹中的每個項都被稱為一個節(jié)點(diǎn)，由 TreeNode 對象表示。下表描述了三種不同的節(jié)點(diǎn)類型。

　　節(jié)點(diǎn)類型

　　說明

　　根節(jié)點(diǎn)

　　沒有父節(jié)點(diǎn)、但具有一個或多個子節(jié)點(diǎn)的節(jié)點(diǎn)。

　　父節(jié)點(diǎn)

　　具有一個父節(jié)點(diǎn)，并且有一個或多個子節(jié)點(diǎn)的節(jié)點(diǎn)。

　　葉節(jié)點(diǎn)

　　沒有子節(jié)點(diǎn)的節(jié)點(diǎn)。

　　盡管一個典型的樹結(jié)構(gòu)只有一個根節(jié)點(diǎn)，但 TreeView 控件允許您向樹結(jié)構(gòu)中添加多個根節(jié)點(diǎn)。當(dāng)您要顯示項目列表，但不顯示單個主根節(jié)點(diǎn)時(例如在產(chǎn)品類別列表中)，這一功能很有用。

　　每個節(jié)點(diǎn)都具有一個 Text 屬性和一個 Value 屬性。Text 屬性的值顯示在 TreeView 控件中，而 Value 屬性則用于存儲有關(guān)該節(jié)點(diǎn)的任何附加數(shù)據(jù)(例如傳遞給與節(jié)點(diǎn)相關(guān)聯(lián)的回發(fā)事件的數(shù)據(jù))。

　　單擊 TreeView 控件的節(jié)點(diǎn)時，將引發(fā)選擇事件(通過回發(fā))或?qū)Ш街疗渌?。未設(shè)置 NavigateUrl 屬性時，單擊節(jié)點(diǎn)將引發(fā) SelectedNodeChanged 事件，您可以處理該事件，從而提供自定義的功能。每個節(jié)點(diǎn)還都具有 SelectAction 屬性，該屬性可用于確定單擊節(jié)點(diǎn)時發(fā)生的特定操作，例如展開節(jié)點(diǎn)或折疊節(jié)點(diǎn)。若要在單擊節(jié)點(diǎn)時不引發(fā)選擇事件而導(dǎo)航至其他頁，可將節(jié)點(diǎn)的 NavigateUrl 屬性設(shè)置為除空字符串 ("") 之外的值。

2.5、即需填充 TreeNode 數(shù)據(jù)

　　靜態(tài)定義數(shù)據(jù)結(jié)構(gòu)有時是不可行的，或者數(shù)據(jù)可能會依賴運(yùn)行時收集的信息。為了動態(tài)顯示數(shù)據(jù)，TreeView 控件支持動態(tài)節(jié)點(diǎn)填充。將 TreeView 控件配置為即需填充時，該控件將在用戶展開節(jié)點(diǎn)時引發(fā)事件。事件處理程序檢索相應(yīng)數(shù)據(jù)，然后填充到用戶單擊的節(jié)點(diǎn)。若要以數(shù)據(jù)即需填充 TreeNode 對象，請將節(jié)點(diǎn)的 PopulateOnDemand 屬性設(shè)置為 true，并創(chuàng)建 TreeNodePopulate 事件處理程序以向 TreeNode 對象中填充數(shù)據(jù)。

2.6、客戶端 TreeView 節(jié)點(diǎn)填充

　　任何在瀏覽器功能配置文件中將 SupportsCallback 屬性設(shè)置為 true 的瀏覽器都支持客戶端節(jié)點(diǎn)填充。

借助客戶端節(jié)點(diǎn)填充，TreeView 控件可以通過從客戶端腳本中調(diào)用服務(wù)器的 TreeNodePopulate 事件來填充節(jié)點(diǎn)，而無需完全回發(fā)至服務(wù)器。

2.7、啟用客戶端腳本

　　默認(rèn)情況下，在高級 (Up-level) 瀏覽器中，TreeView 控件上的節(jié)點(diǎn)的展開 - 折疊功能是使用客戶端腳本執(zhí)行的。由于控件不需要回發(fā)至服務(wù)器來呈現(xiàn)新配置，所以使用客戶端腳本可以提高呈現(xiàn)的效率。

　　說明： 如果瀏覽器中的客戶端腳本被禁用或瀏覽器不支持客戶端腳本，則 TreeView 控件將恢復(fù)到低級(Down-level)模式并在每次用戶單擊節(jié)點(diǎn)時回發(fā)到服務(wù)器。

2.8、TreeView 回發(fā)

　　默認(rèn)情況下，除非瀏覽器不支持客戶端腳本或者 EnableClientScript 屬性被設(shè)置為 false，否則 TreeView 控件將在客戶端處理展開 - 折疊功能。如果 PopulateNodesFromClient 屬性被設(shè)置為 true 并且瀏覽器支持客戶端腳本，那么 TreeView 控件將從服務(wù)器檢索數(shù)據(jù)，而不回發(fā)整頁。

　　當(dāng) TreeView 控件處于選擇模式時，每次用戶單擊節(jié)點(diǎn)時都將回發(fā)到服務(wù)器并引發(fā) SelectedNodeChanged 事件。

　　通常，您應(yīng)該在 TreeView 控件處于選擇模式或正在動態(tài)填充節(jié)點(diǎn)時處理回發(fā)事件。原因是  PopulateOnDemand 或 PopulateNodesFromClient 屬性已設(shè)置為 true。

2.9、將 TreeView 控件與 UpdatePanel 控件一起使用

　　UpdatePanel 控件用于通過回發(fā)更新頁面的選定區(qū)域，而不是更新整個頁面?？稍? UpdatePanel 控件內(nèi)使用 TreeView 控件，但具有以下限制：

• TreeView 回調(diào)必須與異步回發(fā)關(guān)聯(lián)，否則回調(diào)事件驗證將會失敗。在將 TreeNode 控件的 PopulateOnDemand 屬性設(shè)置為 true 時，即啟用了回調(diào)?？梢允褂靡韵路椒ㄖ粊泶_保 TreeView 回調(diào)對 UpdatePanel 控件起作用：
• 如果 TreeView 控件不在 UpdatePanel 控件內(nèi)，則在不是異步回發(fā)的一部分的 TreeNode 控件上禁用回調(diào)。為此，需要將 PopulateOnDemand 屬性設(shè)置為 false。
• 以編程方式刷新在異步回發(fā)過程中注冊回調(diào)的所有控件。例如，可以將 TreeView 控件放置在 UpdatePanel 控件內(nèi)。TreeView 控件不必位于發(fā)起異步回發(fā)的 UpdatePanel 控件中，只要包含 TreeView 控件的 UpdatePanel 控件刷新即可。
• 必須使用對級聯(lián)樣式表 () 類的引用來應(yīng)用樣式。例如，使用屬性-CssClass(其中屬性指 Property)屬性 (Attribute) 來設(shè)置樣式，而不是使用屬性-子屬性(其中屬性指 Property)屬性 (Attribute) 設(shè)置 NodeStyle 屬性 (Property)。同樣，在使用 NodeStyle 模板設(shè)置樣式時，請使用模板的 CssClass 屬性 (Attribute)。
• EnableClientScript 屬性必須為 true(默認(rèn)值)。此外，如果對 TreeView 控件啟用了回調(diào)，則不能在異步回發(fā)之間更改 EnableClientScript 屬性。

2.10、TreeNode 呈現(xiàn)

　　每個 TreeNode 對象包含四個 UI 元素，下面的圖像中顯示了這些元素，下面的表中還對其進(jìn)行了描述。

2.11、TreeNode UI 元素 項說明

　　 “展開/折疊”圖像 一個可選圖像，指示是否可以展開節(jié)點(diǎn)以顯示子節(jié)點(diǎn)。默認(rèn)情況下，如果節(jié)點(diǎn)可以展開，此圖像將為加號 [+]，如果此節(jié)點(diǎn)可以折疊，則圖像為減號 [-]。

   　 復(fù)選框 復(fù)選框是可選的，以允許用戶選擇特定節(jié)點(diǎn)。

   　 “節(jié)點(diǎn)”圖像 可以指定要顯示在節(jié)點(diǎn)文本旁邊的節(jié)點(diǎn)圖像。

   　 “節(jié)點(diǎn)”文本 節(jié)點(diǎn)文本是在 TreeNode 對象上顯示的實際文本。節(jié)點(diǎn)文本的作用類似于導(dǎo)航模式中的超鏈接或選擇模式中的按鈕。

   　 除了自身的屬性外，TreeView 控件還支持每種節(jié)點(diǎn)類型的 TreeNodeStyle 控件的屬性。這些樣式屬性將重寫應(yīng)用于所有節(jié)點(diǎn)類型的 NodeStyle 屬性。

   ;　 TreeView 還具有一個為所有節(jié)點(diǎn)指定縮進(jìn)量級的 NodeIndent 屬性。節(jié)點(diǎn)會從呈現(xiàn) TreeView 控件的一側(cè)縮進(jìn)。對于從左向右呈現(xiàn)的區(qū)域設(shè)置而言，這是指左側(cè)，而對于從右向左呈現(xiàn)的區(qū)域設(shè)置而言，這是指右側(cè)。

   　 當(dāng)一個節(jié)點(diǎn)被選中或鼠標(biāo)懸停于該節(jié)點(diǎn)上時，可對該節(jié)點(diǎn)應(yīng)用不同的樣式。當(dāng)某個節(jié)點(diǎn)的 Selected 屬性設(shè)置為 true 時，將應(yīng)用 SelectedNodeStyle 屬性，對于選中的節(jié)點(diǎn)，該屬性將重寫任何未選擇的樣式屬性。當(dāng)鼠標(biāo)懸停于某個節(jié)點(diǎn)上時，將應(yīng)用 HoverNodeStyle 屬性。下面的圖像和表描述了 TreeNodeStyle 屬性。

2.12、TreeNodeStyle 屬性

    　節(jié)點(diǎn)屬性 說明

    　NodeSpacing 指定整個當(dāng)前節(jié)點(diǎn)與上下相鄰的節(jié)點(diǎn)之間的垂直間距。

 &nbsp;  　VerticalPadding 指定在  TreeNode 文本頂部和底部呈現(xiàn)的間距。

   　 HorizontalPadding 指定在 TreeNode 文本左側(cè)和右側(cè)呈現(xiàn)的間距。

   　 ChildNodesPadding 指定 TreeNode 的子節(jié)點(diǎn)上方和下方的間距。

 ;   　ImageUrl 指定在 TreeNode 旁顯示的圖像的路徑。

2.13、在 TreeView 節(jié)點(diǎn)旁顯示復(fù)選框

　　TreeView 控件的另一個自定義呈現(xiàn)功能是它可以通過使用 ShowCheckBoxes 屬性在節(jié)點(diǎn)文本和圖像之間顯示復(fù)選框。顯示復(fù)選框允許用戶一次選擇多個節(jié)點(diǎn)，這對于類似新聞組樹結(jié)構(gòu)的界面特別有用，這樣用戶可以一次選擇并訂閱多個新聞組。

2.14、使用 ExpandDepth 屬性

　　默認(rèn)情況下，TreeView 控件將顯示被展開的樹的所有節(jié)點(diǎn)?？梢詫?TreeView 控件配置為最初顯示到任何深度。要執(zhí)行此操作，可以將 ExpandDepth 屬性設(shè)置為要顯示的節(jié)點(diǎn)級別所對應(yīng)的數(shù)字。例如，如果將 ExpandDepth 屬性設(shè)置為 2，那么當(dāng)站點(diǎn)最初呈現(xiàn)在客戶端時，將顯示節(jié)點(diǎn)的兩個級別或兩個子節(jié)點(diǎn)。