js編寫的treeview使用方法
本文實(shí)例為大家分享了treeview使用方法,供大家參考,具體內(nèi)容如下
1.所需文件:ftiens4.js,ua.js,XMLTree.js,以及一些樹上的圖片(文件下載處:http://www.treeview.net/),圖片名字和位置如下圖
2.其他頁(yè)面(MainContent.aspx,NavTree.aspx)放置位置如下圖所示:
3.關(guān)鍵頁(yè)面的代碼
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>北京市城市軌道交通設(shè)施運(yùn)行狀態(tài)監(jiān)測(cè)系統(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>北京市城市軌道交通設(shè)施運(yùn)行狀態(tài)監(jiān)測(cè)系統(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. --> <!-------------------------------------------------------------> <!--下面的一定不能刪,刪了就會(huì)有問(wèn)題--> <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代碼(它的作用就是樹和右邊頁(yè)面的分隔欄,可以隱藏樹)
<!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]
這樣就成了。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS控制TreeView的結(jié)點(diǎn)選擇
- Bootstrap樹形菜單插件TreeView.js使用方法詳解
- 動(dòng)態(tài)加載dtree.js樹treeview(示例代碼)
- JS控件ASP.NET的treeview控件全選或者取消(示例代碼)
- js獲取Treeview選中的節(jié)點(diǎn)(C#選中CheckBox項(xiàng))
- js獲取TreeView控件選中節(jié)點(diǎn)的Text和Value值的方法
- 用js腳本控制asp.net下treeview的NodeCheck的實(shí)現(xiàn)代碼
- 選擇TreeView控件的樹狀數(shù)據(jù)節(jié)點(diǎn)的JS方法(jquery)
- Javascript 實(shí)現(xiàn)TreeView CheckBox全選效果
- javascript-TreeView父子聯(lián)動(dòng)效果保持節(jié)點(diǎn)狀態(tài)一致
相關(guān)文章
如何從零開始利用js手寫一個(gè)Promise庫(kù)詳解
ES2015 推出了JS 的 Promise ,而在沒(méi)有原生支持的時(shí)候,我們也可以使用諸如 Promises/A+ 的庫(kù)的幫助,在我們的代碼里實(shí)現(xiàn)Promise 的支持,下面這篇文章主要給大家介紹了如何從零開始利用js手寫一個(gè)Promise庫(kù)的相關(guān)資料,需要的朋友可以參考下。2018-04-04JavaScript中的Error錯(cuò)誤對(duì)象與自定義錯(cuò)誤類型詳解
Error是JavaScript中最原始的錯(cuò)誤對(duì)象,作為各種異常的基礎(chǔ)對(duì)象,還有多個(gè)衍生的具體的錯(cuò)誤類型,這些錯(cuò)誤對(duì)象類型在nodejs中也可應(yīng)用,這篇文章主要介紹了JavaScript中的Error錯(cuò)誤對(duì)象與自定義錯(cuò)誤類型,需要的朋友可以參考下2022-12-12js removeChild 障眼法 可能出現(xiàn)的錯(cuò)誤
js removeChild 障眼法之可能出現(xiàn)的錯(cuò)誤,大家看下代碼就知道了。2009-10-10js實(shí)現(xiàn)頭像上傳并且可預(yù)覽提交
這篇文章主要介紹了js如何實(shí)現(xiàn)頭像上傳并且可預(yù)覽提交,幫助大家更好的理解和使用js,感興趣的朋友可以了解下2020-12-12網(wǎng)頁(yè)廣告中JS代碼的信息監(jiān)聽示例
在一些網(wǎng)頁(yè)廣告中提供的JS代碼可以進(jìn)行代碼注入,然后監(jiān)視各種元素,下面有個(gè)示例,大家可以參考下2014-04-04JavaScript實(shí)現(xiàn)的使用鍵盤控制人物走動(dòng)實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的使用鍵盤控制人物走動(dòng)實(shí)例,也可說(shuō)是一個(gè)JS實(shí)現(xiàn)的小人走動(dòng)小游戲,需要的朋友可以參考下2014-08-08淺談layui數(shù)據(jù)表格判斷問(wèn)題(加入表單元素),設(shè)置單元格樣式
今天小編就為大家分享一篇淺談layui數(shù)據(jù)表格判斷問(wèn)題(加入表單元素),設(shè)置單元格樣式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10javascript溫習(xí)的一些筆記 基礎(chǔ)常用知識(shí)小結(jié)
在電腦上找到多年前的javascript的一些小筆記,因?yàn)橐獙⒐P記本上面的文件整理一下, 不用的刪除掉, 所以將此篇筆記再發(fā)布一下,存檔到自己的博客吧, 電腦上的文件就刪除了2011-06-06