在開發B/S程序時，我們經常會使用到一些頁面級的效果控件。比如：樹形目錄，ComboBox和一些其他的控件，由于這些控件的存在使得我們的程序異常的奪目。但是在開發這些控件的時候或多或少的都會比較麻煩。而大部分的程序員是使用發布的一些開源的JS控件來減輕工作量而且也使得自己的程序健壯。下面我介紹一個在開源社區中赫赫有名的樹形控件：TreeView。
首先介紹一下TreeView，TreeView原名是FolderTree，是一款比較早就出世的樹形JS控件，當時是由個人開發的，之后由公司購買了。但是現在還可以免費使用。
TreeView 有兩個JS文件和一些資源文件組成。兩個JS文件分別是：主要實現功能的ftiens4.js和實現多瀏覽器支持的ua.js文件。只有我們在開發的頁面中加入如上兩個文件的話就可以開發如上圖所顯示的樹形目錄了。代碼如下：
<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 環境變量
BUILDALL = 0 //創建所有的節點對象 0:延時創建 1:立即創建
GLOBALTARGET = 'R' //節點觸發時的目標 'B':打開新窗口 'R':右邊的Frame 'S':當前Frame 'T':當前瀏覽器窗口
HIGHLIGHT = 0 //高亮顯示當前選中的節點 0:不高亮顯示 1:高亮顯示
HIGHLIGHT_BG = 'blue' //高亮顯示的背景顏色
HIGHLIGHT_COLOR = 'white' //高亮顯示的顏色
ICONPATH = '' //指定節點的顯示圖標，使用URL方式，而且必須用"/"結尾 如:http://www.x.com/y/
PRESERVESTATE = 0 //保存TreeView的狀態到Cookie中，當再次顯示的時候會自動的回置狀態 0:不保存 1:保存
STARTALLOPEN = 0 //默認打開所有節點 0:只打開根節點 1:打開所以節點
USEFRAMES = 1 //頁面是否使用了Frame,注意：如果未使用Frame一定要設置此參數 0:未使用 1:使用了
USEICONS = 1 //是否使用圖標 0:不顯示圖標 1:顯示圖標
USETEXTLINKS = 0 //節點文字是否為鏈接 0:否 1:是
WRAPTEXT = 0 //節點顯示超出一行時是否折行 0:不折行 1:折行
foldersTree = gFld("test", "") //創建一個名為"test"的根節點
foldersTree.treeID = "t1" //設置test節點的唯一編號為"t1"
aux1 = insFld(foldersTree, gFld("Day of the week", "b.html")) //在根節點中加入一個名為"Day of the week"的子節點,當點擊的時候打開b.html
aux1.addChildren([["1","1.html"],["2","2.html"],["3","3.html"],["4","4.html"],["5","5.html"]]) //在aux1節點中連續加入1,2,3,4,5節點，并相應的打開1.html,2.html,3.html,4.html,5.html.
aux2 = insFld(foldersTree, gLnk("R","Day of the week2", "b.html")) //在根節點中加入名為"Day of the week2"的節點，當點擊的時候在右側的frame中打開b.html
aux3 = insDoc(foldersTree, gLnk("R","<input type=\"checkbox\">Day of the week3", "c.html")) //在根節點中加入名為"Day of the week3"并帶有復選框的節點，當點擊的時候在右側的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();//構造TreeView
</script>
</body>
</html>
TreeView中主要的方法:
gFld(Title, Link);//創建節點 例：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);//創建一個帶有鏈接的節點 例：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); //在父節點中插入一個子節點 例：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); //在節點中加入一個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