js编写的treeview使用方法
更新时间：2016年11月11日 09:24:24 作者：常欢jack
这篇文章主要为大家详细介绍了js编写的treeview使用方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了treeview使用方法，供大家参考，具体内容如下
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="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]
这样就成了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- JS控制TreeView的结点选择
- Bootstrap树形菜单插件TreeView.js使用方法详解
- 动态加载dtree.js树treeview(示例代码)
- JS控件ASP.NET的treeview控件全选或者取消(示例代码)
- js获取Treeview选中的节点(C#选中CheckBox项)
- js获取TreeView控件选中节点的Text和Value值的方法
- 用js脚本控制asp.net下treeview的NodeCheck的实现代码
- 选择TreeView控件的树状数据节点的JS方法(jquery)
- Javascript 实现TreeView CheckBox全选效果
- javascript-TreeView父子联动效果保持节点状态一致
相关文章
jquery的$(document).ready()和onload的加载顺序
最近在改一个嵌入在frame中的页面的时候，使用了jquery做效果，而页面本身也绑定了onload事件。改完后，Firefox下测试正常流畅，IE下就要等个十几秒jquery的效果才出现，黄花菜都凉了。2010-05-05
这篇文章主要为大家详细介绍了d3.js实现图形缩放平移效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
下面小编就为大家带来一篇基于Bootstrap模态对话框只加载一次 remote 数据的解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了让html页面不缓存js的实现方法,分析了HTML页面缓存js的原理,并由此分析实现不缓存js的方法,是非常实用的技巧,需要的朋友可以参考下2014-10-10
JavaScript如何使用Promise实现分批处理接口请求
当我们在开发时遇到需要同时发起百条接口请求怎么办呢,本文主要来和大家介绍一下JavaScript如何使用Promise实现分批处理接口请求,需要的可以参考下2024-03-03
如今ES6已经发布了有一段时间了，很多人学了ES6但是却没运行环境，下面这篇文章主要给大家介绍了关于搭建ES6运行环境的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-07-07
这篇文章主要介绍了微信小程序实现登录注册功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
table对象中的insertRow与deleteRow使用示例
本文为大家介绍下table对象insertRow deleteRow的使用示例，适合新手朋友们2014-01-01
这篇文章主要为大家详细介绍了js实现轮播图效果，图片自动切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要介绍了javaScript中this用法,实例分析了javascript中this的用途与相关的使用技巧,需要的朋友可以参考下2015-05-05
最新评论