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 validate使用攻略 第四步
Jul 01 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 Javascript
基于jquery实现表格无刷新分页
Jan 07 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
Mar 01 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
vue组件初学_弹射小球(实例讲解)
Sep 06 Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 Javascript
javascript trie前缀树的示例
Jan 29 Javascript
详解vue为什么要求组件模板只能有一个根元素
Jul 22 Javascript
vue如何使用外部特殊字体的操作
Jul 30 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
PHP 中的一些经验积累
2006/10/09 PHP
PHP常用技巧总结(附函数代码)
2012/02/04 PHP
PHP目录操作实例总结
2016/09/27 PHP
php+mysql+jquery实现简易的检索自动补全提示功能
2017/04/15 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
2014/01/09 Javascript
18个非常棒的jQuery代码片段
2015/11/02 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2016/07/01 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
利用JavaScript阻止表单提交的两种方法
2016/08/11 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
复制粘贴功能的Python程序
2008/04/04 Python
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
python 定时器,实现每天凌晨3点执行的方法
2019/02/20 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
python协程gevent案例 爬取斗鱼图片过程解析
2019/08/27 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
大学军训感言
2014/01/10 职场文书
干部下基层实施方案
2014/03/14 职场文书
《二泉映月》教学反思
2014/04/15 职场文书
班级体育活动总结
2014/07/05 职场文书
春节超市活动方案
2014/08/14 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
离婚代理词范文
2015/05/23 职场文书
海上钢琴师观后感
2015/06/03 职场文书
生日寿星公答谢词
2015/09/29 职场文书
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫