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