Windows資源管理器中的驅(qū)動(dòng)器和其下的文件及文件夾就是按照一種層次結(jié)構(gòu)來(lái)安排的，在這個(gè)控件集中有一個(gè)treeview控件為我們提供了一種按層次結(jié)構(gòu)顯示信息的方式。treeview控件包含了稱做“節(jié)點(diǎn)”(node)的一些條目的一個(gè)列表。每一個(gè)節(jié)點(diǎn)都可以有自己的節(jié)點(diǎn)集合，從而提供了一種更深層的數(shù)據(jù)定義。每個(gè)節(jié)點(diǎn)都可以被折疊起來(lái)，從而允許訪問(wèn)者在一個(gè)treeview控件中查找，只看他所感興趣的那一級(jí)的數(shù)據(jù)。就像Windows的資源管理器一樣。
首先得明確一點(diǎn)就是測(cè)試的環(huán)境，只要環(huán)境正確，接下來(lái)的工作就很輕松了：
要測(cè)試該控件，得有一個(gè)叫IE WebControls的文件，具體的文件可以點(diǎn)擊這里下載或到微軟的網(wǎng)站去下載。
按照他提供的方法進(jìn)行安裝。如有不清楚，請(qǐng)仔細(xì)看清楚他的readme文檔。
這里跳過(guò)下載方法，直接進(jìn)入環(huán)境的配置：
IE Web Controls
1、雙擊安裝完成，默認(rèn):系統(tǒng)盤:\program files\IE Web Controls目錄下。
2、運(yùn)行“程序——Microsoft Visual Studio.NET 2003 ——Visual Studio.NET 工具 ——Microsoft Visual Studio.NET 2003 命令提示符”，進(jìn)入到IE Web Control 安裝目錄。
3、運(yùn)行build.bat 。
4、運(yùn)行xcopy /s /i .\build\Runtime (網(wǎng)站根目錄，默認(rèn)系統(tǒng)盤):\Inetpub\wwwroot\webctrl_client\1_0 /y 。
在”工具箱——web窗體“單擊右鍵，選擇“添加/移除項(xiàng)...”,在彈出對(duì)話框中選擇.net framwork 組件，單擊“瀏覽”，找到IE WebControl.dll 文件，添加上即可。
這樣就配置好了運(yùn)行環(huán)境。接下來(lái)進(jìn)行實(shí)操作階段了。
一、定義TreeView控件
代碼拷貝框
| '導(dǎo)入名稱空間 ＜%@ import namespace="Microsoft.web.UI.webcontros"%＞ '注冊(cè)這個(gè)名稱空間并為其給定一個(gè)TagPrefix,以便于對(duì)這個(gè)控件庫(kù)中的控件進(jìn)行定義 ＜%@ register tagprefix = "iecontrols" namespace="Microsoft.web.UI.webcontrols" assembly="microsoft.web.UI.webcontrols" %＞ '設(shè)置好指令后,就可以定義下面這樣的一個(gè)treeview控件了 ＜iecontrols:treeview id="tvbasic" autoselect="false" shoplus="true" showlines="true" expandlevel=2 runat="server" ＞ ---------- ＜/idcontrols:treeview＞ |
下面來(lái)解釋一下相應(yīng)代碼:
| autoselect = "false" |
當(dāng)訪問(wèn)者在TreeView控件中對(duì)節(jié)點(diǎn)進(jìn)行定位時(shí),可以使用鍵盤上的箭頭來(lái)進(jìn)行這種定位.當(dāng)這個(gè)TreeView控件的autoselect屬性值設(shè)為TRUE時(shí),可以使用鍵盤上的鍵來(lái)在treeview控件中滾動(dòng),以選聶一個(gè)條目.如果設(shè)置為false的話,則不允許這樣做.
| showplus="true" |
當(dāng)一個(gè)treeview控件中的兩個(gè)節(jié)點(diǎn)收到一起的時(shí)候,你可以顯示一個(gè)加號(hào)(+),訪問(wèn)者就知道這個(gè)節(jié)點(diǎn)可以展開(kāi).通過(guò)設(shè)置showplus屬性,你可以控制在這個(gè)位置是否顯示加號(hào).如果這個(gè)屬性值設(shè)為true將使用加號(hào);否則不使用.
| showlines="true" |
在一個(gè)treeview控件中的兩個(gè)節(jié)點(diǎn)之間,可以顯示一些線條,通過(guò)設(shè)置showlines屬性,你可以控制是否顯示這樣的線條.
| Expandlevel=2 |
這個(gè)Treeview控件的Expandlevel屬性用來(lái)確定在默認(rèn)的情況下,沿著這個(gè)treeview控件的層次結(jié)構(gòu)展開(kāi)的級(jí)別數(shù).
| ＜iecontrols:treeview＞ --------- ＜/iecontrols:treeview＞ |
在這個(gè)treeview控件定義的開(kāi)始和結(jié)束標(biāo)記之間,可以定義一些treenode控件.
二、在treeview控件中使用treenode控件
如果你創(chuàng)建一個(gè)treeview控件的話,就需要在其中添加一些treenode控件來(lái)顯示一些信息.treenode控件顯示為treeview控件的層次結(jié)構(gòu)中的一個(gè)項(xiàng).treenode控件可以包含了treeview控件;或者,該控件本身也可以獨(dú)立存在.下面將向你展示如何在一個(gè)treeview控件中定義treenode控件.
本實(shí)例將顯示我喜歡的一些網(wǎng)站,其中每個(gè)網(wǎng)站可以是一個(gè)獨(dú)立的,或者在其下還有其它網(wǎng)站.這個(gè)treeview控件具有如下定義:
代碼拷貝框
| ＜iecontrols:treeview id="tvwebsite" autoselect ="false" showplus="true" showlines="true" expandlevel=2 runat = "server" ＞ '接下來(lái)在treeview控件的開(kāi)始和結(jié)束標(biāo)記中,定義treenode控件 ＜iecontrols:treenode text="我常去的站點(diǎn)"＞ ＜idcontrols:treenode text="設(shè)計(jì)類站點(diǎn)"＞ ＜idcontrols:treenode text="藍(lán)色理想" /＞ ＜idcontrols:treenode text="有風(fēng)的日子" /＞ ＜idcontrols:treenode text="設(shè)計(jì)聯(lián)盟" /＞ ＜/iecontrols:treenode＞ ＜iecontrols:treenode text="編程類站點(diǎn)"＞ ＜iecontrols:treenode text="ASP編程"＞ ＜iecontrols:treenode text="ASP COOL" /＞ ＜iecontrols:treenode text=""/＞ ＜/iecontrols:treenode＞ ＜iecontrols:treenode text="ASP.NET編程"＞ ＜iecontrols:treenode text="Dotnet技術(shù)網(wǎng)" /＞ ＜iecontrols:treenode text="asp.net"/＞ ＜/iecontrols:treenode＞ ＜iecontrols:treenode text="程序員大本營(yíng)" /＞ ＜/iecontrols:treenode＞ ＜/iecontrols:treenode＞ |
其中,定義了一個(gè)兩級(jí)的節(jié)點(diǎn).這個(gè)樹(shù)狀視圖中包含了"設(shè)計(jì)類站點(diǎn)"和"編程類站點(diǎn)"這二個(gè)大節(jié)點(diǎn),而"編程類站點(diǎn)"中又有兩個(gè)子節(jié)點(diǎn)"ASP編程"和"asp.net編程",其中每個(gè)子節(jié)點(diǎn)又都定義了其他的節(jié)點(diǎn).
要注意包含其他節(jié)點(diǎn)的treenode控件和獨(dú)立的treenode控件之間的差別.當(dāng)一個(gè)treenode控件中還有其它treenode控件時(shí),這些子控件在其父控件的開(kāi)始和結(jié)束標(biāo)記之間進(jìn)行定義:
| ＜iecontrols:treenode text=""＞ ＜/iecontrols:treenode＞ |
但對(duì)于一個(gè)獨(dú)立的treenode控件來(lái)說(shuō),其開(kāi)始和結(jié)束標(biāo)記是自包含的:
| ＜iecontrols:treenode text="" /＞ |
當(dāng)頁(yè)面首次加載時(shí),這就是整個(gè)視圖節(jié)點(diǎn)的展開(kāi)情況.由于這里的expandlevel屬性值設(shè)為2,因此將顯示到所有級(jí)別上的節(jié)點(diǎn).此外還要注意的是,由于showlines屬性和showplus屬性都為true,因此在所有顯示的這個(gè)視圖中,連接節(jié)點(diǎn)間的線條和連接框都顯示出來(lái).
"我常去的站點(diǎn)"是當(dāng)前選中的節(jié)點(diǎn)項(xiàng).訪問(wèn)者可以敲擊回車,或者在這個(gè)節(jié)點(diǎn)上點(diǎn)擊鼠標(biāo).然后,訪問(wèn)者可以使用鍵盤上的箭頭來(lái)沿著樹(shù)狀視圖的層次結(jié)構(gòu)進(jìn)行定位。