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

    TreeView Web 服務器控件用於以樹形結構顯示分層數據如目錄或文件目錄
    一TreeView 控件支持下面的功能
    ·自動數據綁定該功能允許將控件的節點綁定到分層數據(如 XML 文檔)
    ·通過與 SiteMapDataSource 控件集成提供對站點導航的支持
    ·可以顯示為可選擇文本或超鏈接的節點文本
    ·可通過主題用戶定義的圖像和樣式自定義外觀
    ·通過編程訪問 TreeView 對象模型使您可以動態地創建樹填充節點以及設置屬性等
    ·通過客戶端到服務器的回調填充節點(在受支持的浏覽器中)
    ·能夠在每個節點旁邊顯示復選框
    二背景
    TreeView 控件可以顯示幾種不同類型的數據在控件中以聲明方式指定的靜態數據綁定到控件的數據或作為對用戶操作的響應通過執行代碼添加到 TreeView 控件中的數據
    顯示靜態數據
    可以通過創建 TreeNode 元素集合這些元素是 TreeView 控件的子級在 TreeView 控件中顯示靜態數據這些子元素也被稱為子節點
    下面的示例演示用於 TreeView 控件的標記該控件包含三個節點其中兩個節點具有子節點
    <asp:TreeView ID=MyTreeView Runat=server>
    <Nodes>
    <asp:TreeNode Value=Child Expanded=True Text=>
    <asp:TreeNode Value=Grandchild Text=A />
    <asp:TreeNode Value=Grandchild Text=B />
    </asp:TreeNode>
    <asp:TreeNode Value=Child Text= />
    <asp:TreeNode Value=Child Expanded=True Text=>
    <asp:TreeNode Value=Grandchild Text=A />
    </asp:TreeNode>
    </Nodes>
    </asp:TreeView>
    將數據綁定到 TreeView 控件
    可以將 TreeView 控件綁定到支持 IHierarchicalDataSource 接口的數據源例如 XmlDataSource 和 SiteMapDataSource 控件此外在綁定數據時還可以完全控制要從數據源填充哪些字段
    使用 TreeNodeCollection 以編程方式顯示數據
    通過訪問 Nodes 屬性(該屬性將返回 TreeNodeCollection 類)可以通過編程向 TreeView 控件填充數據TreeNodeCollection 是 TreeNode 對象的強類型集合TreeNode 對象含有一個名為 ChildNodes的屬性由於該屬性可進一步包含 TreeNode 對象所以 TreeNodeCollection 類是一個表示 TreeView 控件的所有節點的分層數據結構
    TreeView 節點類型
    TreeView 控件由一個或多個節點構成樹中的每個項都被稱為一個節點由 TreeNode 對象表示下表描述了三種不同的節點類型
    節點類型
    說明
    根節點
    沒有父節點但具有一個或多個子節點的節點
    父節點
    具有一個父節點並且有一個或多個子節點的節點
    葉節點
    沒有子節點的節點
    盡管一個典型的樹結構只有一個根節點但 TreeView 控件允許您向樹結構中添加多個根節點當您要顯示項目列表但不顯示單個主根節點時(例如在產品類別列表中)這一功能很有用
    每個節點都具有一個 Text 屬性和一個 Value 屬性Text 屬性的值顯示在 TreeView 控件中而 Value 屬性則用於存儲有關該節點的任何附加數據(例如傳遞給與節點相關聯的回發事件的數據)
    單擊 TreeView 控件的節點時將引發選擇事件(通過回發)或導航至其他頁未設置 NavigateUrl 屬性時單擊節點將引發 SelectedNodeChanged 事件您可以處理該事件從而提供自定義的功能每個節點還都具有 SelectAction 屬性該屬性可用於確定單擊節點時發生的特定操作例如展開節點或折疊節點若要在單擊節點時不引發選擇事件而導航至其他頁可將節點的 NavigateUrl 屬性設置為除空字符串 () 之外的值
    即需填充 TreeNode 數據
    靜態定義數據結構有時是不可行的或者數據可能會依賴運行時收集的信息為了動態顯示數據TreeView 控件支持動態節點填充將 TreeView 控件配置為即需填充時該控件將在用戶展開節點時引發事件事件處理程序檢索相應數據然後填充到用戶單擊的節點若要以數據即需填充 TreeNode 對象請將節點的 PopulateOnDemand 屬性設置為 true並創建 TreeNodePopulate 事件處理程序以向 TreeNode 對象中填充數據
    客戶端 TreeView 節點填充
    任何在浏覽器功能配置文件中將 SupportsCallback 屬性設置為 true 的浏覽器都支持客戶端節點填充
    借助客戶端節點填充TreeView 控件可以通過從客戶端腳本中調用服務器的 TreeNodePopulate 事件來填充節點而無需完全回發至服務器

    啟用客戶端腳本
    默認情況下在高級 (Uplevel) 浏覽器中TreeView 控件上的節點的展開 折疊功能是使用客戶端腳本執行的由於控件不需要回發至服務器來呈現新配置所以使用客戶端腳本可以提高呈現的效率
    說明 如果浏覽器中的客戶端腳本被禁用或浏覽器不支持客戶端腳本則 TreeView 控件將恢復到低級(Downlevel)模式並在每次用戶單擊節點時回發到服務器
    TreeView 回發
    默認情況下除非浏覽器不支持客戶端腳本或者 EnableClientScript 屬性被設置為 false否則 TreeView 控件將在客戶端處理展開 折疊功能如果 PopulateNodesFromClient 屬性被設置為 true 並且浏覽器支持客戶端腳本那麼 TreeView 控件將從服務器檢索數據而不回發整頁
    當 TreeView 控件處於選擇模式時每次用戶單擊節點時都將回發到服務器並引發 SelectedNodeChanged 事件
    通常您應該在 TreeView 控件處於選擇模式或正在動態填充節點時處理回發事件原因是 PopulateOnDemand 或 PopulateNodesFromClient 屬性已設置為 true
    將 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 屬性
    TreeNode 呈現
    每個 TreeNode 對象包含四個 UI 元素下面的圖像中顯示了這些元素下面的表中還對其進行了描述
    TreeNode UI 元素
    項 說明
    展開/折疊圖像 一個可選圖像指示是否可以展開節點以顯示子節點默認情況下如果節點可以展開此圖像將為加號 [+]如果此節點可以折疊則圖像為減號 []
    復選框 復選框是可選的以允許用戶選擇特定節點
    節點圖像 可以指定要顯示在節點文本旁邊的節點圖像
    節點文本 節點文本是在 TreeNode 對象上顯示的實際文本節點文本的作用類似於導航模式中的超鏈接或選擇模式中的按鈕
    除了自身的屬性外TreeView 控件還支持每種節點類型的 TreeNodeStyle 控件的屬性這些樣式屬性將重寫應用於所有節點類型的 NodeStyle 屬性
    TreeView 還具有一個為所有節點指定縮進量級的 NodeIndent 屬性節點會從呈現 TreeView 控件的一側縮進對於從左向右呈現的區域設置而言這是指左側而對於從右向左呈現的區域設置而言這是指右側
    當一個節點被選中或鼠標懸停於該節點上時可對該節點應用不同的樣式當某個節點的 Selected 屬性設置為 true 時將應用 SelectedNodeStyle 屬性對於選中的節點該屬性將重寫任何未選擇的樣式屬性當鼠標懸停於某個節點上時將應用 HoverNodeStyle 屬性下面的圖像和表描述了 TreeNodeStyle 屬性
    TreeNodeStyle 屬性
    節點屬性 說明
    NodeSpacing 指定整個當前節點與上下相鄰的節點之間的垂直間距
    VerticalPadding 指定在 TreeNode 文本頂部和底部呈現的間距
    HorizontalPadding 指定在 TreeNode 文本左側和右側呈現的間距
    ChildNodesPadding 指定 TreeNode 的子節點上方和下方的間距
    ImageUrl 指定在 TreeNode 旁顯示的圖像的路徑
    在 TreeView 節點旁顯示復選框
    TreeView 控件的另一個自定義呈現功能是它可以通過使用 ShowCheckBoxes 屬性在節點文本和圖像之間顯示復選框顯示復選框允許用戶一次選擇多個節點這對於類似新聞組樹結構的界面特別有用這樣用戶可以一次選擇並訂閱多個新聞組
    使用 ExpandDepth 屬性
    默認情況下TreeView 控件將顯示被展開的樹的所有節點可以將 TreeView 控件配置為最初顯示到任何深度要執行此操作可以將 ExpandDepth 屬性設置為要顯示的節點級別所對應的數字例如如果將 ExpandDepth 屬性設置為 那麼當站點最初呈現在客戶端時將顯示節點的兩個級別或兩個子節點

From:http://tw.wingwit.com/Article/program/net/201311/12973.html