js编写的treeview使用方法


Posted in Javascript onNovember 11, 2016

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

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

 js编写的treeview使用方法

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

js编写的treeview使用方法

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]

这样就成了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
详谈 Jquery Ajax异步处理Json数据.
Sep 09 Javascript
jquery使用append(content)方法注意事项分享
Jan 06 Javascript
js控制鼠标事件移动及移出效果显示
Oct 19 Javascript
探讨JavaScript语句的执行过程
Jan 28 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
bootstrap输入框组使用方法
Feb 07 Javascript
获取url中用&amp;隔开的参数实例(分享)
May 28 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
vue+elementUI实现表格关键字筛选高亮
Oct 26 Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 Javascript
Vue.js教程之计算属性
Nov 11 #Javascript
JS控制TreeView的结点选择
Nov 11 #Javascript
node+express制作爬虫教程
Nov 11 #Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 #Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 #Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 #Javascript
通过扫描二维码打开app的实现代码
Nov 10 #Javascript
You might like
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
2019/04/26 Javascript
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
Python正则表达式学习小例子
2020/03/03 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
解释一下钝化(Swap out)
2016/12/26 面试题
电信专业应届生自荐信
2013/09/28 职场文书
澳大利亚商务邀请函
2014/01/17 职场文书
企业法人代表证明书
2014/09/27 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server