在開發(fā)B/S程序時，我們經(jīng)常會使用到一些頁面級的效果控件。比如：樹形目錄，ComboBox和一些其他的控件，由于這些控件的存在使得我們的程序異常的奪目。但是在開發(fā)這些控件的時候或多或少的都會比較麻煩。而大部分的程序員是使用發(fā)布的一些開源的JS控件來減輕工作量而且也使得自己的程序健壯。下面我介紹一個在開源社區(qū)中赫赫有名的樹形控件：TreeView。
首先介紹一下TreeView，TreeView原名是FolderTree，是一款比較早就出世的樹形JS控件，當(dāng)時是由個人開發(fā)的，之后由公司購買了。但是現(xiàn)在還可以免費使用。
TreeView 有兩個JS文件和一些資源文件組成。兩個JS文件分別是：主要實現(xiàn)功能的ftiens4.js和實現(xiàn)多瀏覽器支持的ua.js文件。只有我們在開發(fā)的頁面中加入如上兩個文件的話就可以開發(fā)如上圖所顯示的樹形目錄了。代碼如下：
<html>
<head>
<script type="text/javascript" src="../treeview/ftiens4.js" ></script>
<script type="text/javascript" src="../treeview/ua.js" ></script>
<script type="text/javascript">
//TreeView 環(huán)境變量
BUILDALL = 0 //創(chuàng)建所有的節(jié)點對象 0:延時創(chuàng)建 1:立即創(chuàng)建
GLOBALTARGET = 'R' //節(jié)點觸發(fā)時的目標(biāo) 'B':打開新窗口 'R':右邊的Frame 'S':當(dāng)前Frame 'T':當(dāng)前瀏覽器窗口
HIGHLIGHT = 0 //高亮顯示當(dāng)前選中的節(jié)點 0:不高亮顯示 1:高亮顯示
HIGHLIGHT_BG = 'blue' //高亮顯示的背景顏色
HIGHLIGHT_COLOR = 'white' //高亮顯示的顏色
ICONPATH = '' //指定節(jié)點的顯示圖標(biāo)，使用URL方式，而且必須用"/"結(jié)尾 如:http://www.x.com/y/
PRESERVESTATE = 0 //保存TreeView的狀態(tài)到Cookie中，當(dāng)再次顯示的時候會自動的回置狀態(tài) 0:不保存 1:保存
STARTALLOPEN = 0 //默認(rèn)打開所有節(jié)點 0:只打開根節(jié)點 1:打開所以節(jié)點
USEFRAMES = 1 //頁面是否使用了Frame,注意：如果未使用Frame一定要設(shè)置此參數(shù) 0:未使用 1:使用了
USEICONS = 1 //是否使用圖標(biāo) 0:不顯示圖標(biāo) 1:顯示圖標(biāo)
USETEXTLINKS = 0 //節(jié)點文字是否為鏈接 0:否 1:是
WRAPTEXT = 0 //節(jié)點顯示超出一行時是否折行 0:不折行 1:折行
foldersTree = gFld("test", "") //創(chuàng)建一個名為"test"的根節(jié)點
foldersTree.treeID = "t1" //設(shè)置test節(jié)點的唯一編號為"t1"
aux1 = insFld(foldersTree, gFld("Day of the week", "b.html")) //在根節(jié)點中加入一個名為"Day of the week"的子節(jié)點,當(dāng)點擊的時候打開b.html
aux1.addChildren([["1","1.html"],["2","2.html"],["3","3.html"],["4","4.html"],["5","5.html"]]) //在aux1節(jié)點中連續(xù)加入1,2,3,4,5節(jié)點，并相應(yīng)的打開1.html,2.html,3.html,4.html,5.html.
aux2 = insFld(foldersTree, gLnk("R","Day of the week2", "b.html")) //在根節(jié)點中加入名為"Day of the week2"的節(jié)點，當(dāng)點擊的時候在右側(cè)的frame中打開b.html
aux3 = insDoc(foldersTree, gLnk("R","<input type=\"checkbox\">Day of the week3", "c.html")) //在根節(jié)點中加入名為"Day of the week3"并帶有復(fù)選框的節(jié)點，當(dāng)點擊的時候在右側(cè)的frame中打開c.html
</script>
</head>
<body>
<A style="font-size:7pt;text-decoration:none;color:silver" href=" target=_blank>Javascript Tree Menu</A> <script type="text/javascript">
initializeDocument();//構(gòu)造TreeView
</script>
</body>
</html>
TreeView中主要的方法:
gFld(Title, Link);//創(chuàng)建節(jié)點 例：gFld("Test A", "javascript:parent.op()")
Argument
Title
Specifies the text that appears in the folder name. This text can include simple HTML tags, such as enclosing formatting tags (i, b, div, and so on). It can even include an img tag if you want to place a small icon in the node name, such as a "new!" icon for example.
Link
Specifies an optional URL. The URL can be a simple file name like demoFramesetRightFrame.html or a string with protocol, domain, path, and file name like http://www.treeview.net/treemenu/demopics/beenthere_europe.gif.
gLnk(Target, Title, Link);//創(chuàng)建一個帶有鏈接的節(jié)點 例：gLnk("B", "My File", http://www.mysite.com/MyFile.doc)
Argument
Target
Configures the target location for the link. Specify one of the following values:
"R": Open the document in the right frame (a frame named basefrm)
"B": Open the document in a new window
"T": Open the document in the current browser window, replacing the frameset if one exists
"S": Open the document in the current frame, replacing the tree
Note: This argument is case sensitive; make sure to use uppercase letters.
Title
Specifies the text that appears in the link. This text can include simple HTML tags, such as enclosing formatting tags (i, b, div, and so on). It can even include an img tag if you want to place a small icon in the node name, such as a "new!" icon for example.
Link
Specifies the URL of the document. This can be an absolute URL or a relative URL. Do not enter any other information in this string; adding a target parameter or an event handler will not work.
insFld(Parent Folder, Child Folder); //在父節(jié)點中插入一個子節(jié)點 例：aux1 = insFld(foldersTree, gFld("Europe", "http..."))
Argument
Parent Folder
Specifies the parent folder. That is, this argument specifies the folder node in which you want to place the other folder node.
Child Folder
Specifies the child folder. That is, this argument specifies the folder node that you want to place under the parent folder node.
insDoc(Parent Folder, Document Node); //在節(jié)點中加入一個Dom對象 例：insDoc(aux2, gLnk("S", "Boston", "..."))
Argument
Parent Folder
Specifies the parent folder. That is, this argument specifies the folder node in which you want to place the document node.
Document Node
Specifies the document node. That is, this argument specifies the document node that you want to place in the parent folder node
更多的參考信息到 http://www.treeview.net/tv/instructions.asp