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

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

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

二、背景

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

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

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

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

<asp:TreeView ID="MyTreeView" 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="3">

<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í)，還可以完全控制要從數(shù)據(jù)源填充哪些字段。

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

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

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

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

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

　　說明

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

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

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

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

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

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

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

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

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

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

　　靜態(tài)定義數(shù)據(jù)結(jié)構(gòu)有時(shí)是不可行的，或者數(shù)據(jù)可能會(huì)依賴運(yùn)行時(shí)收集的信息。為了動(dòng)態(tài)顯示數(shù)據(jù)，TreeView 控件支持動(dòng)態(tài)節(jié)點(diǎn)填充。將 TreeView 控件配置為即需填充時(shí)，該控件將在用戶展開節(jié)點(diǎn)時(shí)引發(fā)事件。事件處理程序檢索相應(yīng)數(shù)據(jù)，然后填充到用戶單擊的節(jié)點(diǎn)。若要以數(shù)據(jù)即需填充 TreeNode 對(duì)象，請(qǐng)將節(jié)點(diǎn)的 PopulateOnDemand 屬性設(shè)置為 true，并創(chuàng)建 TreeNodePopulate 事件處理程序以向 TreeNode 對(duì)象中填充數(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)情況下，在高級(jí) (Up-level) 瀏覽器中，TreeView 控件上的節(jié)點(diǎn)的展開 - 折疊功能是使用客戶端腳本執(zhí)行的。由于控件不需要回發(fā)至服務(wù)器來呈現(xiàn)新配置，所以使用客戶端腳本可以提高呈現(xiàn)的效率。

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

2.8、TreeView 回發(fā)

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

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

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

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

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

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

2.10、TreeNode 呈現(xiàn)

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

2.11、TreeNode UI 元素 項(xiàng)說明

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

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

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

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

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

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

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

2.12、TreeNodeStyle 屬性

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

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

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

2.14、使用 ExpandDepth 屬性

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