地址:http://www.meizz.com/Web/Web.asp

<script language="JavaScript"
? src="http://www.meizz.com/Web/Plugs/MzTreeView10.js"></script>
<base href="http://www.meizz.com/Web/">
<style>
A.MzTreeview
{
? font-size: 9pt;
? padding-left: 3px;
}
</style>
<script language="JavaScript">
? var tree = new MzTreeView("tree");

? tree.icons["property"] = "property.gif";
? tree.icons["css"] = "collection.gif";
? tree.icons["book"]? = "book.gif";
? tree.iconsExpand["book"] = "bookopen.gif"; //展開時對應的圖片

? tree.setIconPath("http://www.meizz.com/Icons/TreeView/"); //可用相對路徑

? tree.nodes["0_1"] = "text:WEB 編程";
? tree.nodes["1_100"] = "text:代碼示例; data:id=100";
? tree.nodes["1_200"] = "text:梅花雪腳本控件集; data:id=200";
? tree.nodes["1_310"] = "text:CSS; icon:css; data:id=310";
? tree.nodes["1_320"] = "text:DHTML; data:id=320";
? tree.nodes["1_300"] = "text:HTML; data:id=300";
? tree.nodes["1_400"] = "text:JavaScript; icon:book; data:id=400";
? tree.nodes["320_322"] = "text:屬性; icon: property; data:id=322";
? tree.nodes["320_323"] = "text:方法; data:id=323";
? tree.nodes["320_324"] = "text:事件; icon:event; data:id=324";
? tree.nodes["320_325"] = "text:集合; data:id=325";
? tree.nodes["400_407"] = "text:對象; data:id=407";
? tree.nodes["400_406"] = "text:方法; data:id=406";
? tree.nodes["400_408"] = "text:運算符; data:id=408";
? tree.nodes["400_409"] = "text:屬性; data:id=409";
? tree.nodes["407_1140"] = "text:Date; url:Article.asp; data:id=140";
? tree.nodes["406_1127"] = "text:toString; url:Article.asp; data:id=127";
? tree.nodes["408_1239"] = "text:||; url:Article.asp; data:id=239";
? tree.nodes["409_1163"] = "text:E;? url:Article.asp; data:id=163";

? tree.setURL("Catalog.asp");
? tree.setTarget("MzMain");
? document.write(tree.toString());??? //亦可用 obj.innerHTML = tree.toString();
</script>

?

MzTreeView 類的一些屬性：

屬性名類型屬性的具體說明

MzTreeView.nodes	集合	服務器端給樹指定數據源時數據存放的對象，具體存放格式如： MzTreeViewHandle.nodes["parentId_nodeId"] = "text: nodeText; icon: nodeIcon; url: nodeURL; ...";
MzTreeView.url	地址字符串	可讀寫，樹缺省的URL，默認值是 #
MzTreeView.target	目標框架名	可讀寫，樹缺省的鏈接target，默認值是 _self
MzTreeView.name	字符	只讀，樹的實例名，同樹實例化時作為參數傳入(大小寫敏感)： var Tree = new MzTreeView("Tree");
MzTreeView.currentNode	樹節點	只讀，樹當前得到焦點的節點對象
MzTreeView.icons	集合	樹所使用的所有圖標存放
MzTreeView.iconsExpand	集合	樹里展開狀態的圖標存放
MzTreeView.colors	集合	樹里使用到的幾個顏色存放

使用：
1.下載控件,MzTreeView10
2.把MzTreeView10整個目錄放置在web工程下(圖片,js)
3.在后臺建一個java類（生成字符串返回給前臺）
格式如下：

tree.nodes["408_1239"]=" text:顯示文本; data:id=自己的ID;URL=轉向的URl method:alert('');";

！注意分號和“”號也都要，自己寫方法取得數據庫要生存樹的表所有記錄，然后拼湊，一條記錄生成一個這樣的節點字符串給JS解析

tree是可以指定的樹的名稱
408 是數據庫的父節點id
1239 是自己的id
text 是顯示在頁面的節點名稱
data 跟URL 配和，當點擊轉向另外地址是 后面自動帶參數id=自己的ID;如url.jsp?id=5;
mehod 點擊后觸發的js方法，可自定義執行

總結

以上是生活随笔為你收集整理的js Tree(梅花雪)最简单的例子(来字MEIZZ)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。