TreeView Web 伺服器控制項概觀

發行項
10/22/2014

更新：2007 年 11 月

TreeView Web 伺服器控制項是用來以樹狀目錄結構顯示階層式資料，例如目錄或檔案目錄。

這個主題包含：

功能
背景
程式碼範例
類別參考

功能

TreeView 控制項支援下列功能：

自動資料繫結，可讓控制項的節點繫結至階層式資料，例如 XML 文件
網站巡覽透過與 SiteMapDataSource 控制項整合提供支援。
節點文字可以顯示為可選取的文字或超連結。
透過佈景主題、使用者定義影像、和樣式的可自訂外觀。
以程式設計方式存取 TreeView 物件模型，可讓您動態地建立樹狀目錄、填入節點、和設定屬性等等。
透過用戶端回呼伺服器填入節點 (在支援的瀏覽器上)。
在每個節點旁顯示核取方塊的功能。

回到頁首

背景

TreeView 控制項可以回應使用者動作而顯示數種不同類型的資料：在控制項中以宣告方式指定的靜態資料、繫結至控制項的資料，或是以程式方式加入 TreeView 控制項的資料。

顯示靜態資料

您可以建立 TreeView 控制項子系的 TreeNode 項目集合，在 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>

將資料繫結至 TreeView 控制項

您可以將 TreeView 控制項繫結至支援 IHierarchicalDataSource 介面的資料來源，例如 XmlDataSource 和 SiteMapDataSource 控制項。此外，當繫結資料時，您可以完全控制資料來源要填入哪些欄位。如需詳細資訊，請參閱將資料繫結至 TreeView Web 伺服器控制項。

使用 TreeNodeCollection 以程式方式顯示資料

您可以存取 Nodes 屬性，以程式方式將資料填入 TreeView 控制項，就會傳回 TreeNodeCollection 類別。TreeNodeCollection 是 TreeNode 物件的強型別集合。因為 TreeNode 物件包含稱為 ChildNodes 的屬性，其可能內含 TreeNode 物件，所以 TreeNodeCollection 類別是表示 TreeView 控制項所有節點的階層式資料結構。

如需如何周遊節點集合的範例，請參閱 Nodes。

TreeView 節點型別

TreeView 控制項是由一個或多個節點所組成。樹狀目錄中的每個項目都稱為節點，並且由 TreeNode 物件表示。下表描述三種不同的節點型別。

節點型別	描述
Root	沒有父節點但是有一個或多個子節點的節點。
Parent	有父節點以及一個或多個子節點的節點。
分葉	沒有子節點的節點。

雖然一般的樹狀目錄只有一個根節點，TreeView 控制項可讓您將多個根節點加入樹狀目錄結構。當您想要在不顯示單一主要根節點的情況下顯示項目清單，例如在產品分類清單中，這個選項就很有用。

每一個節點都有 Text 屬性和 Value 屬性。Text 屬性的值會顯示在 TreeView 控制項中，而且 Value 屬性是用以存放關於節點的任何其他資料，例如傳遞給與節點相關聯之回傳事件的資料。

當按一下 TreeView 控制項的節點時，就會引發選取範圍事件 (經由回傳) 或巡覽至其他頁面。當您並未設定 href 屬性時，按一下節點會引發 SelectedNodeChanged 事件，處理這個事件所提供的自訂功能。每個節點也都有 SelectAction 屬性，可以用來在按一下節點時判斷會發生的特定動作，例如展開或摺疊節點。請將節點的 href 屬性設定為空白字串 ("") 以外的值，而不是在按一下節點時引發巡覽至頁面的選取範圍事件。

視需要填入 TreeNode 資料

以靜態方式定義資料結構可能不太實用，因為資料可能會視您在執行階段收集到的資訊而定。若要動態地顯示資料，TreeView 控制項支援動態節點填入。當 TreeView 控制項設定為視需要填入時，控制項會在使用者展開節點時引發事件。事件處理常式會擷取適當資料，然後填入使用者所按的節點。若要視需要將資料填入 TreeNode 物件，請將節點的 PopulateOnDemand 屬性設定為 true，然後建立 TreeNodePopulate 事件處理常式將資料填入 TreeNode 物件。

用戶端 TreeView 節點填入

在瀏覽器功能組態檔中將 SupportsCallback 屬性設定為 true 的任何瀏覽器，都支援用戶端節點填入。

用戶端節點填入讓 TreeView 控制項能夠從用戶端指令碼呼叫伺服器的 TreeNodePopulate 事件，而不需完全回傳至伺服器，即可填入節點。如需用戶端節點填入的詳細資訊，請參閱 PopulateNodesFromClient。

啟用用戶端指令碼

根據預設，在上層瀏覽器中，TreeView 控制項上的展開/摺疊節點功能是使用用戶端指令碼所執行。使用用戶端指令碼會增加呈現效率，因為控制項不需要回傳伺服器以呈現新的組態。

注意事項：
如果瀏覽器停用用戶端指令碼，或是瀏覽器不支援用戶端指令碼，則 TreeView 控制項會還原至下層模式，並且每次使用者按一下節點時都會回傳伺服器。

TreeView 回傳

根據預設，TreeView 控制項會處理用戶端上的展開/摺疊功能，除非瀏覽器不支援用戶端指令碼，或是 EnableClientScript 屬性設定為 false。如果 PopulateNodesFromClient 屬性設定為 true 且瀏覽器支援用戶端指令碼，則 TreeView 控制項會從伺服器擷取資料，而不需回傳整個網頁。

TreeView 控制項處於選取範圍模式時，每當使用者按一下節點，就會回傳伺服器並且引發 SelectedNodeChanged 事件。

通常，當 TreeView 控制項處於選取範圍模式，或是節點以動態方式填入時，您應該處理回傳事件。這是因為 PopulateOnDemand 或 PopulateNodesFromClient 屬性設定為 true。

使用 TreeView 控制項搭配 UpdatePanel 控制項

UpdatePanel 控制項用來更新選取的網頁區域，而非使用回傳來更新整個網頁。TreeView 控制項可以使用於 UpdatePanel 控制項中，但有下列限制：

TreeView 回呼必須與非同步回傳相關聯，否則回呼事件驗證就會失敗。當您將 TreeNode 控制項的 PopulateOnDemand 屬性設定為 true 時，就會啟用回呼。您可以使用下列其中一個方法，以確定 TreeView 回呼使用 UpdatePanel 控制項：
- 如果 TreeView 控制項不在 UpdatePanel 控制項中，請停用 TreeNode 控制項上不屬於非同步回傳的回呼。若要這樣做，請將 PopulateOnDemand 屬性設定為 false。
- 以程式設計方式重新整理在非同步回傳期間登錄回呼的所有控制項。例如，您可以將 TreeView 控制項放在 UpdatePanel 控制項中。TreeView 控制項不一定要在非同步回傳的來源 UpdatePanel 控制項中，只要重新整理內含 TreeView 控制項的 UpdatePanel 控制項即可。
您必須使用階層式樣式表 (CSS) 類別的參考，套用樣式。例如，不使用 property-subproperty 屬性 (Attribute) 來設定 NodeStyle 屬性 (Property )，而是使用 property-CssClass 屬性 (Attribute) 來設定樣式。同樣地當您使用 NodeStyle 範本來設定樣式時，請使用範本的 CssClass 屬性。
EnableClientScript 屬性必須為 true (預設值)。此外，如果 TreeView 控制項啟用了回呼，您就不能在非同步回傳之間變更 EnableClientScript 屬性。

如需使用 UpdatePanel 控制項的詳細資訊，請參閱 UpdatePanel 控制項概觀和網頁局部呈現概觀。

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 Web 伺服器控制項的外觀。

顯示 TreeView 節點旁的核取方塊

TreeView 控制項的另一個自訂呈現功能是使用 ShowCheckBoxes 屬性，呈現節點文字和影像之間的核取方塊。顯示核取方塊可讓使用者一次選取多個節點，在像是新聞群組樹狀目錄結構的介面上特別有用，其中使用者可以一次選取和訂閱多個新聞群組。如需使用核取方塊的詳細資訊，請參閱 TreeView Web 伺服器控制項中的選取、巡覽和核取方塊。

使用 ExpandDepth 屬性

根據預設，TreeView 控制項會顯示樹狀目錄已展開的所有節點。您可以設定 TreeView 控制項一開始顯示至任意深度。若要執行這項操作，您可以將 ExpandDepth 屬性設定為一望顯示的節點層級數。例如，如果您將 ExpandDepth 屬性設定為 2，當站台一開始呈現在用戶端時，就會顯示兩層節點或是兩個子節點。