js编写的treeview使用方法

本文实例为大家分享了treeview使用方法，供大家参考，具体内容如下
1.所需文件：ftiens4.js,ua.js,XMLTree.js,以及一些树上的图片（文件下载处：http://www.treeview.net/），图片名字和位置如下图

2.其他页面（MainContent.aspx,NavTree.aspx）放置位置如下图所示:

3.关键页面的代码
3.1 MainContent.aspx代码

<%@ Page Language="C#" CodeFile="MainContent.aspx.cs" Inherits="mainContent" %><！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><title>北京市城市轨道交通设施运行状态监测系统</title><link rel="Shortcut Icon" href="Resources/Images/iehead.ico" /><link rel="Bookmark" href="Resources/Images/iehead.ico" /><script type="text/javascript">function op（）{ // This function is for folders that do not open pages themselves. // See the online instructions for more information.} </script></head> <frameset cols="250,10,*" border="0" frameSpacing="0" frameBorder="no" id="tree_frm"> <frame src="navTree.Aspx" name="treeframe" noResize> <frame src="treeControl.htm" name="ctr_frm" id="ctr_frm" noResize scrolling="no"> <frame src="#" name="mainGisWindow" id="basefrm" noResize> </frameset></html>

3.2 NavTree.aspx代码

<%@ Page Language="C#" CodeFile="NavTree.aspx.cs" Inherits="navTree" %><html ><head runat="server"><title>北京市城市轨道交通设施运行状态监测系统</title><script src="Resources/JS/Tree/ua.js" type="text/javascript" language="javascript"></script> <！-- Infrastructure code for the TreeView. DO NOT REMOVE.--> <script src="Resources/JS/Tree/ftiens4.js" type="text/javascript" language="javascript"></script> <！-- Scripts that define the tree. DO NOT REMOVE.--><script src="Resources/JS/Tree/XMLTree.js" type="text/javascript" language="javascript"></script><% //Common.Utility.WebUtility.validLoning（Session, Response）; string fileName = null; //Bussiness.Login.User loginUser = （Bussiness.Login.User）Session["currentUser"]; string departmentid = ""; if （Session["navItem"] ！= null） { string item = （string）Session["navItem"]; if （item.ToUpper（）.Equals（"Safety".ToUpper（））） { fileName = ""SafetyTree.xml""; //departmentid = loginUser.department.depId; } else if （item.ToUpper（）.Equals（"Gis".ToUpper（））） { fileName = ""GisTree.xml""; } else if （item.ToUpper（）.Equals（"DataQuality".ToUpper（））） { fileName = ""DataQualityTree.xml""; } else if （item.ToUpper（）.Equals（"StateAnalysis".ToUpper（））） { fileName = ""StateAnalysisTree.xml""; } else if （item.ToUpper（）.Equals（"SynthesisTechnique".ToUpper（））） { fileName = ""SynthesisTechniqueTree.xml""; } else if （item.ToUpper（）.Equals（"DataMaintenance".ToUpper（））） { fileName = ""DataMaintenanceTree.xml""; } }%><script type="text/javascript">var xmlfile = "Resources/XML/Tree/"+<%=fileName %>;departmentid= "<%=departmentid %>";ICONPATH = "Resources/Images/tree/";contentFrame = window.parent.document.getElementByIdx_x_x（"basefrm"）;loadTreeFromXml（xmlfile）;</script><style>BODY { background-image:url（/ESM/Resources/Images/DapHangNew.jpg）;background-repeat:repeat-x; }TD { font-size: 10pt; font-family: verdana,helvetica; text-decoration: none; white-space:nowrap;}A { text-decoration: none; color: black;} .specialClass { font-family:garamond; font-size:10pt; color:Black; font-weight:lighter; text-decoration:underline } </style></head><body topmargin="16" marginheight="16"><！-------------------------------------------------------------> <！-- IMPORTANT NOTICE:--> <！-- Removing the following link will prevent this script--> <！-- from working. Unless you purchase the registered--> <！-- version of TreeView, you must include this link.--> <！-- If you make any unauthorized changes to the following--> <！-- code, you will violate the user agreement. If you want --> <！-- to remove the link, see the online FAQ for instructions --> <！-- on how to obtain a version without the link.--> <！-------------------------------------------------------------><！--下面的一定不能删，删了就会有问题--><DIV style="position:absolute; top:0; left:0; display:none;"><TABLE border=0><TR><TD><FONT size=-2><A style="font-size:7pt;text-decoration:none;color:silver" href="http://www.treemenu.net/" target=_blank>Javascript Tree Menu</A></FONT></TD></TR></TABLE></DIV> <！-- Build the browser"s objects and display default view --> <！-- of the tree. --> <script> initializeDocument（）; </script></body></html>

3.3 treeControl.aspx代码（它的作用就是树和右边页面的分隔栏，可以隐藏树）

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><script type="text/javascript" language="javascript">var LEFT_MENU_VIEW=1;function leftmenu_ctrl（）{ if（LEFT_MENU_VIEW==0） {parent.tree_frm.cols="250,10,*";LEFT_MENU_VIEW=1;myarrow.src="/ESM/Resources/Images/topleft.gif"; //左箭头 } else {parent.tree_frm.cols="0,10,*";LEFT_MENU_VIEW=0;myarrow.src="/ESM/Resources/Images/topright.gif"; //右箭头 }}</script></head><body style="background-color:#F1F8FC;"><div id="AdLayer" style="position:absolute;width:60px; height:21px; z-index:20;visibility:visible;left:0%; top:40%;"><div id="oa_tree" onclick="leftmenu_ctrl（）;" title="隐藏工具栏" style="cursor:pointer;"><img id="myarrow" src="/ESM/Resources/Images/topleft.gif" alt="" /></div></div></body></html>

[over]
这样就成了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。