js編寫的treeview使用方法
本文實例為大家分享了treeview使用方法,供大家參考,具體內(nèi)容如下
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>北京市城市軌道交通設施運行狀態(tài)監(jiān)測系統(tǒng)</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>北京市城市軌道交通設施運行狀態(tài)監(jiān)測系統(tǒng)</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" 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]
這樣就成了。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- JS控制TreeView的結(jié)點選擇
- Bootstrap樹形菜單插件TreeView.js使用方法詳解
- 動態(tài)加載dtree.js樹treeview(示例代碼)
- JS控件ASP.NET的treeview控件全選或者取消(示例代碼)
- js獲取Treeview選中的節(jié)點(C#選中CheckBox項)
- js獲取TreeView控件選中節(jié)點的Text和Value值的方法
- 用js腳本控制asp.net下treeview的NodeCheck的實現(xiàn)代碼
- 選擇TreeView控件的樹狀數(shù)據(jù)節(jié)點的JS方法(jquery)
- Javascript 實現(xiàn)TreeView CheckBox全選效果
- javascript-TreeView父子聯(lián)動效果保持節(jié)點狀態(tài)一致
相關文章
JavaScript中的Error錯誤對象與自定義錯誤類型詳解
Error是JavaScript中最原始的錯誤對象,作為各種異常的基礎對象,還有多個衍生的具體的錯誤類型,這些錯誤對象類型在nodejs中也可應用,這篇文章主要介紹了JavaScript中的Error錯誤對象與自定義錯誤類型,需要的朋友可以參考下2022-12-12
js removeChild 障眼法 可能出現(xiàn)的錯誤
js removeChild 障眼法之可能出現(xiàn)的錯誤,大家看下代碼就知道了。2009-10-10
JavaScript實現(xiàn)的使用鍵盤控制人物走動實例
這篇文章主要介紹了JavaScript實現(xiàn)的使用鍵盤控制人物走動實例,也可說是一個JS實現(xiàn)的小人走動小游戲,需要的朋友可以參考下2014-08-08
淺談layui數(shù)據(jù)表格判斷問題(加入表單元素),設置單元格樣式
今天小編就為大家分享一篇淺談layui數(shù)據(jù)表格判斷問題(加入表單元素),設置單元格樣式,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
javascript溫習的一些筆記 基礎常用知識小結(jié)
在電腦上找到多年前的javascript的一些小筆記,因為要將筆記本上面的文件整理一下, 不用的刪除掉, 所以將此篇筆記再發(fā)布一下,存檔到自己的博客吧, 電腦上的文件就刪除了2011-06-06

