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参考实例2.0 用jQuery选择元素
Apr 07 Javascript
javascript操纵OGNL标签示例代码
Jun 16 Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
JavaScript结合AJAX_stream实现流式显示
Jan 08 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
Jun 07 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
关于vue.js组件数据流的问题
Jul 26 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 Javascript
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
Aug 17 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对象类型判断
2008/08/27 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
php英文单词统计器
2016/06/23 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
javascript self对象使用详解
2016/10/18 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
2018/07/07 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
Python学习之用pygal画世界地图实例
2017/12/07 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
Python装饰器用法实例总结
2018/05/26 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
为什么说python更适合树莓派编程
2020/07/20 Python
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
夏威夷咖啡公司:Hawaii Coffee Company
2019/09/19 全球购物
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
旷课检讨书2000字
2014/01/14 职场文书
会计与出纳自荐书范文
2014/03/16 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
模具设计与制造专业求职信
2014/07/19 职场文书
领导干部作风建设总结
2014/10/23 职场文书
个人维稳承诺书
2015/05/04 职场文书
年会主持人开场白台词
2015/05/29 职场文书
初中班长竞选稿
2015/11/20 职场文书
《秋思》教学反思
2016/02/23 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python