轉(zhuǎn)帖|其它|編輯:郝浩|2011-04-12 16:48:02.000|閱讀 821 次
概述:TreeView Web 服務(wù)器控件用于以樹形結(jié)構(gòu)顯示分層數(shù)據(jù),如目錄或文件目錄。本文主要介紹TreeView Web 服務(wù)器控件相關(guān)功能,希望對(duì)大家有幫助。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
TreeView Web 服務(wù)器控件用于以樹形結(jié)構(gòu)顯示分層數(shù)據(jù),如目錄或文件目錄。
一、TreeView 控件支持下面的功能:
二、背景
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ū)Ш街疗渌摗N丛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 控件,但具有以下限制:
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)。
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自:網(wǎng)絡(luò)轉(zhuǎn)載