在开发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="http://www.treemenu.net/" 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