ASP.NET - TreeView Web 服務器控件概述

2019-11-17 03:58:45

字體：大中小

來源：轉載

供稿：網友

TreeView Web 服務器控件用于以樹形結構顯示分層數據，如目錄或文件目錄。

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

·自動數據綁定，該功能允許將控件的節點綁定到分層數據（如 xml 文檔）。

·通過與 SiteMapDataSource 控件集成提供對站點導航的支持。

·可以顯示為可選擇文本或超鏈接的節點文本。

·可通過主題、用戶定義的圖像和樣式自定義外觀。

·通過編程訪問 TreeView 對象模型，使您可以動態地創建樹，填充節點以及設置屬性等。

·通過客戶端到服務器的回調填充節點（在受支持的瀏覽器中）。

·能夠在每個節點旁邊顯示復選框。

二、背景

      TreeView 控件可以顯示幾種不同類型的數據：在控件中以聲明方式指定的靜態數據、綁定到控件的數據、或作為對用戶操作的響應通過執行代碼添加到 TreeView 控件中的數據。

2.1、顯示靜態數據

可以通過創建 TreeNode 元素集合，這些元素是 TreeView 控件的子級，在 TreeView 控件中顯示靜態數據。這些子元素也被稱為子節點。

下面的示例演示用于 TreeView 控件的標記，該控件包含三個節點，其中兩個節點具有子節點。

<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、將數據綁定到 TreeView 控件

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

2.3、使用 TreeNodeCollection 以編程方式顯示數據

通過訪問 Nodes 屬性（該屬性將返回 TreeNodeCollection 類），可以通過編程向 TreeView 控件填充數據。TreeNodeCollection 是 TreeNode 對象的強類型集合。TreeNode 對象含有一個名為 ChildNodes的屬性。由于該屬性可進一步包含 TreeNode 對象，所以 TreeNodeCollection 類是一個表示 TreeView 控件的所有節點的分層數據結構。

2.4、TreeView 節點類型

TreeView 控件由一個或多個節點構成。樹中的每個項都被稱為一個節點，由 TreeNode 對象表示。下表描述了三種不同的節點類型。

節點類型
說明

根節點
沒有父節點、但具有一個或多個子節點的節點。

父節點
具有一個父節點，并且有一個或多個子節點的節點。

葉節點
沒有子節點的節點。

      盡管一個典型的樹結構只有一個根節點，但 TreeView 控件允許您向樹結構中添加多個根節點。當您要顯示項目列表，但不顯示單個主根節點時（例如在產品類別列表中），這一功能很有用。

每個節點都具有一個 Text 屬性和一個 Value 屬性。Text 屬性的值顯示在 TreeView 控件中，而 Value 屬性則用于存儲有關該節點的任何附加數據（例如傳遞給與節點相關聯的回發事件的數據）。

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

2.5、即需填充 TreeNode 數據

靜態定義數據結構有時是不可行的，或者數據可能會依賴運行時收集的信息。為了動態顯示數據，TreeView 控件支持動態節點填充。將 TreeView 控件配置為即需填充時，該控件將在用戶展開節點時引發事件。事件處理程序檢索相應數據，然后填充到用戶單擊的節點。若要以數據即需填充 TreeNode 對象，請將節點的 PopulateOnDemand 屬性設置為 true，并創建 TreeNodePopulate 事件處理程序以向 TreeNode 對象中填充數據。

2.6、客戶端 TreeView 節點填充

任何在瀏覽器功能配置文件中將 SupportsCallback 屬性設置為 true 的瀏覽器都支持客戶端節點填充。

借助客戶端節點填充，TreeView 控件可以通過從客戶端腳本中調用服務器的 TreeNodePopulate 事件來填充節點，而無需完全回發至服務器。

2.7、啟用客戶端腳本

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

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

2.8、TreeView 回發

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

當 TreeView 控件處于選擇模式時，每次用戶單擊節點時都將回發到服務器并引發 SelectedNodeChanged 事件。

通常，您應該在 TreeView 控件處于選擇模式或正在動態填充節點時處理回發事件。原因是 PopulateOnDemand 或 PopulateNodesFromClient 屬性已設置為 true。

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

UpdatePanel 控件用于通過回發更新頁面的選定區域，而不是更新整個頁面。可在 UpdatePanel 控件內使用 TreeView 控件，但具有以下限制：

·TreeView 回調必須與異步回發關聯，否則回調事件驗證將會失敗。在將 TreeNode 控件的 PopulateOnDemand 屬性設置為 true 時，即啟用了回調。可以使用以下方法之一來確保 TreeView 回調對 UpdatePanel 控件起作用：

·如果 TreeView 控件不在 UpdatePanel 控件內，則在不是異步回發的一部分的 TreeNode 控件上禁用回調。為此，需要將 PopulateOnDemand 屬性設置為 false。

·以編程方式刷新在異步回發過程中注冊回調的所有控件。例如，可以將 TreeView 控件放置在 UpdatePanel 控件內。TreeView 控件不必位于發起異步回發的 UpdatePanel 控件中，只要包含 TreeView 控件的 UpdatePanel 控件刷新即可。

·必須使用對級聯樣式表 (CSS) 類的引用來應用樣式。例如，使用屬性-CssClass（其中屬性指 PRoperty）屬性 (Attribute) 來設置樣式，而不是使用屬性-子屬性（其中屬性指 Property）屬性 (Attribute) 設置 NodeStyle 屬性 (Property)。同樣，在使用 NodeStyle 模板設置樣式時，請使用模板的 CssClass 屬性 (Attribute)。

·EnableClientScript 屬性必須為 true（默認值）。此外，如果對 TreeView 控件啟用了回調，則不能在異步回發之間更改 EnableClientScript 屬性。

2.10、TreeNode 呈現

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

2.11、TreeNode UI 元素

項
說明

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

復選框
復選框是可選的，以允許用戶選擇特定節點。

“節點”圖像
可以指定要顯示在節點文本旁邊的節點圖像。

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

      除了自身的屬性外，TreeView 控件還支持每種節點類型的 TreeNodeStyle 控件的屬性。這些樣式屬性將重寫應用于所有節點類型的 NodeStyle 屬性。

TreeView 還具有一個為所有節點指定縮進量級的 NodeIndent 屬性。節點會從呈現 TreeView 控件的一側縮進。對于從左向右呈現的區域設置而言，這是指左側，而對于從右向左呈現的區域設置而言，這是指右側。

當一個節點被選中或鼠標懸停于該節點上時，可對該節點應用不同的樣式。當某個節點的 Selected 屬性設置為 true 時，將應用 SelectedNodeStyle 屬性，對于選中的節點，該屬性將重寫任何未選擇的樣式屬性。當鼠標懸停于某個節點上時，將應用 HoverNodeStyle 屬性。下面的圖像和表描述了 TreeNodeStyle 屬性。

2.12、TreeNodeStyle 屬性

節點屬性
說明

NodeSpacing
指定整個當前節點與上下相鄰的節點之間的垂直間距。

VerticalPadding
指定在 TreeNode 文本頂部和底部呈現的間距。

HorizontalPadding
指定在 TreeNode 文本左側和右側呈現的間距。

ChildNodesPadding
指定 TreeNode 的子節點上方和下方的間距。

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

2.13、在 TreeView 節點旁顯示復選框

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

2.14、使用 ExpandDepth 屬性

默認情況下，TreeView 控件將顯示被展開的樹的所有節點。可以將 TreeView 控件配置為最初顯示到任何深度。要執行此操作，可以將 ExpandDepth 屬性設置為要顯示的節點級別所對應的數字。例如，如果將 ExpandDepth 屬性設置為 2，那么當站點最初呈現在客戶端時，將顯示節點的兩個級別或兩個子節點。

本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/dodream/archive/2009/12/18/5029917.aspx

上一篇： ASP.NET - TreeView Web 服務器控件事件

下一篇：ASP.NET - 如何：配置多個站點地圖和站點地圖提供程序