js编写的treeview使用方法_Javascript教程-查字典教程网

本文实例为大家分享了treeview使用方法，供大家参考，具体内容如下

1.所需文件：ftiens4.js,ua.js,XMLTree.js,以及一些树上的图片（文件下载处：http://www.treeview.net/），图片名字和位置如下图

js编写的treeview使用方法1

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

js编写的treeview使用方法2

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> <> <script src="Resources/JS/Tree/ftiens4.js" type="text/javascript" language="javascript"></script> <> <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"> <---------------------------------------------------------> <> <> <> <> <> <> <> <> <---------------------------------------------------------> <> <DIV><TABLE border=0><TR><TD><FONT size=-2><A href="http://www.treemenu.net/" target=_blank>Javascript Tree Menu</A></FONT></TD></TR></TABLE></DIV> <> <> <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> <div id="AdLayer"> <div id="oa_tree" title="隐藏工具栏"><img id="myarrow" src="http://www.jb51.netESM/Resources/Images/topleft.gif" alt="" /></div> </div> </body> </html>

[over]

这样就成了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持查字典教程网。