1.所需文件：ftiens4.js,ua.js,XMLTree.js,以及一些树上的图片（文件下载处：），图片名字和位置如下图
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 href="https://www.jb51.net/Resources/Images/iehead.ico" /> <link href="https://www.jb51.net/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,*" frameSpacing="0" frameBorder="no"> <frame src="https://www.jb51.net/navTree.Aspx" noResize> <frame src="https://www.jb51.net/treeControl.htm" noResize scrolling="no"> <frame src="#" noResize> </frameset> </html>
3.2 NavTree.aspx代码
<%@ Page Language="C#" CodeFile="NavTree.aspx.cs" Inherits="navTree" %> <html > <head runat="server"> <title>北京市城市轨道交通设施运行状态监测系统</title> <script src="https://www.jb51.net/Resources/JS/Tree/ua.js" type="text/javascript" language="javascript"></script> <!-- Infrastructure code for the TreeView. DO NOT REMOVE. --> <script src="https://www.jb51.net/Resources/JS/Tree/ftiens4.js" type="text/javascript" language="javascript"></script> <!-- Scripts that define the tree. DO NOT REMOVE. --> <script src="https://www.jb51.net/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><TABLE border=0><TR><TD><FONT size=-2><A href="https://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代码（它的作用就是树和右边页面的分隔栏，可以隐藏树）