js编写的树形视图使用方法

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

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='主要内容。aspx。cs“Inherits=”主内容“%！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head runat=' server ' title北京市城市轨道交通设施运行状态监测系统/title link rel='快捷图标href=' Resources/Images/iehead。ico '/link rel=' Bookmark ' href=' Resources/Images/iehead。ico '/脚本类型=' text/JavaScript '函数op() { //此函数适用于本身不打开页面的文件夹。//有关更多信息，请参见在线说明} /script/head frameset cols='250，10，* ' border=' 0 '帧间距=' 0 '帧边框=' no ' id=' tree _ frm ' frame src=' http : nav tree .aspx ' name=' tree frame ' noResize frame src=' http : tree control。htm ' name=' ctrl _ frm ' id=' ctrl _ frm ' noResize scrolling=' no ' frame src=' http : # ' name=' main GIS window ' id=' basefrm ' noResize/frame set/html 3.2 nav tree。aspx代码

“% @”页面语言=“c#”代码文件=“导航树”。aspx。cs ' Inherits=' NavTree ' % html head runat=' server ' title北京市城市轨道交通设施运行状态监测系统/title脚本src=' http : ReSoUrces/JS/Tree/ua。JS ' type=' text/JavaScript ' language=' JavaScript '/script！-树形视图的基础结构代码。请勿移除. script-src=' http : ReSoUrces/JS/Tree/fti ens 4。JS ' type=' text/JavaScript ' language=' JavaScript '/script！-定义树的脚本。请勿移除. script-src=' http : ReSoUrces/JS/Tree/xmltree。JS ' type=' text/JavaScript ' language=' JavaScript '/script %//Common .实用程序（会话，响应);字符串fileName=null//业务。登录。用户登录用户=(业务。登录。用户)会话['当前用户'];字符串department id=if(Session[' navItem ']！=null){ string item=(string)Session[' navItem ']；如果(项目ToUpper().等于('安全。ToOpper())))){ FIlename=' safety tree。XML '；//部门id=loginuser。部门。DePid} else if(项目.ToUpper().等于(' Gis ' .ToOpper())))){ FIlename=' GisTree。XML '；} else if(项目.ToUpper().等于(“数据质量”.ToOpper())))){ FIlename=' DataQualitytree。XML '；} else if(项目.ToUpper().Equals('StateAnalysis ' .ToOper())))){ FIlename=' ' StateAnalysis Tree。XML '；} else if(项目.ToUpper().equals(' synth istechnike ' .ToUpper())))){ FIlename=' synth istechniquetree。XML '；} else if(项目.ToUpper().等于('数据维护。ToOpper())))){ FIlename=' '数据维护树。XML} } %脚本类型=' text/JavaScript ' var xmlfile=' Resources/XML/Tree/' %=fileName %；部门id=' %=部门id % '；' ICONPATH='资源/图像/树/';内容框架=窗口。父母。文件。getelementbyidx _ x _ x(' basefrm ')；loadTreeFromXMl(xmlfile)；/script style BODY { background-image : URL(/ESM/Resources/Images/dapangnew。jpg)；背景-重复：次重复-x；} TD { font-size : 10ptfont-family: verdana，helvetica文本装饰：无；空白：无说唱；} A {文字装饰：无；颜色：黑色；} .特殊类{ font-family : garamondfont-size :10 pt颜色：黑色；font-weight :更轻；heat装饰：下划线}/style/head body topmargin=' 16 ' margin heat=' 16 '！- !-重要提示： -!-删除以下链接将阻止此脚本-!-从工作中。除非你购买了注册的-!-版本的树形视图，您必须包含此链接。- !-如果您对以下内容进行任何未经授权的更改-!-代码，你会违反用户协议。如果你想-!-要删除链接，请参阅在线常见问题解答以获取说明-!-关于如何获得没有链接的版本。- !- !-下面的一定不能删，删了就会有问题-DIV style=' position :绝对值；top :0 left :0 display : none ' table border=0 RTD font size=-2A style=' font-size :7 pt；文本装饰：无；颜色：银。树形菜单。net/' target=_ blank JavaScript树菜单/A/FONT/TD/TR/TABLE/DIV！-构建浏览器的对象并显示默认视图-!-树的-script initializeDocument()；/script/body/html 3.3树控件。aspx代码（它的作用就是树和右边页面的分隔栏，可以隐藏树)

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head title/title script type=' text/JavaScript ' language=' JavaScript ' var LEFT _ MENU _ VIEW=1；函数LEft MENU _ ctrl(){ if(LEft _ MENU _ VIEW==0){ parent。tree _ frm。cols=' 250，10，*；左菜单视图=1;我的箭。src=' http :/ESM/Resources/Images/topleft。gif '；//左箭头} else { parent.tree_frm.cols='0，10，*；左菜单视图=0;我的箭。src=' http :/ESM/Resources/Images/topright。gif '；//右箭头} }/script/head body style='底色： # F1F8FC'div id=' AdLayer ' style=' position : absolute；宽度：60 px高度：21pxz索引：20;可见性：可见；左侧：0%;前：40%；" div id=' OA _ tree ' onclick=' left menu _ ctrl()；"标题='隐藏工具栏style=' cursor : pointer ' img id=' my arrow ' src=' http :/ESM/Resources/Images/topleft。gif ' alt=' '//div/div/body/html[over]

这样就成了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。