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 相关文章推荐
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 Javascript
解析使用JS 清空File控件的路径值
Jul 08 Javascript
JavaScript prototype 使用介绍
Aug 29 Javascript
jquery中show()、hide()和toggle()用法实例
Jan 15 Javascript
基于jQuery实现收缩展开功能
Mar 18 Javascript
JavaScript中动态向表格添加数据
Jan 24 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
详解Vue中使用Axios拦截器
Apr 22 Javascript
JavaScript提升机制Hoisting详解
Oct 23 Javascript
Node.js API详解之 os模块用法实例分析
May 06 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文件读写操作之文件读取方法详解
2011/01/13 PHP
Apache2中实现多网站域名绑定的实现方法
2011/06/01 PHP
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
JavaScript中string转换成number介绍
2014/12/31 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
2016/07/05 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
jquery实现左右滑动式轮播图
2017/03/02 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
python数值基础知识浅析
2019/11/19 Python
python识别验证码的思路及解决方案
2020/09/13 Python
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
精细化工应届生求职信
2013/11/17 职场文书
运动会稿件300字
2014/02/14 职场文书
我的祖国演讲稿
2014/05/04 职场文书
机关党员公开承诺书
2014/08/30 职场文书
群众对十八届四中全会的期盼
2014/10/17 职场文书
教育见习报告范文
2014/11/03 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
综合素质评价自我评价
2015/03/06 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
初中政治教学反思
2016/02/23 职场文书
Python 数据可视化之Bokeh详解
2021/11/02 Python