MzTreeView 1.0 開發文檔

說明 MzTreeView 1.0 是數據一次性加載，客戶端節點異步展示的WEB腳本樹。MzTreeView 1.0 的理論節點數設計上限爲十萬節點，在節點數三萬的情況下頁面打開時間小於 3 秒。無限層次無限節點的數的層級組成方式：id parentId。即每個節點除本身的節點id之外還有它的父層節點id，通過這種方式就可以組合成無限層級的樹了。

在 MzTreeView 裏都有一個虛的根節點，其ID爲0，用戶可見的根節點其父節點ID皆爲0

MzTreeView 1.0在數據庫庫表裏的字段名稱：

字段名	字段的具體說明
id	節點ID（不可爲0，可以是數字或字符）
parentId	本節點的父節點ID（若本節點已爲根節點，此處填0）
text	節點的顯示文本（一般不允許爲空，不過有一種情況例外，即根節點，若根節點文本爲空，這個根節點將不會在頁面裏顯示）
hint	節點的說明註解
icon	節點的圖標，MzTreeView 1.0允許每個節點擁有不同的圖標（對應的名字在類裏的icons和iconsExpand定義）
data	節點掛的數據，格式是 param=value&param=value&... url裏?後的那串字符串格式，
url	每個節點允許擁有不同的鏈接，它爲空或者爲#時，樹裏這個節點的鏈接，點擊將無反應
target	每個節點的鏈接允許在不同的target裏打開，爲空時取類裏的默認值
method	點擊該鏈接時所想觸發的腳本語句

特注：每個字段值中不可有冒號： 不可以換行 引號酌情考慮應不與節點字符串的引號相沖突

屬性 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	集合	樹裏使用到的幾個顏色存放

MzTreeView 在客戶端的節點所擁有的屬性：

屬性名	屬性的具體說明
node.id	數字文本，節點的ID
node.parentId	數字文本，節點對應的父節點ID
node.text	文本，節點的顯示文本
node.hint	文本，節點的註釋說明
node.icon	文本，節點對應的圖標
node.path	文本，節點在樹裏的絕對路徑：0_1_10_34
node.url	文本，該節點的 URL
node.target	文本，該節點鏈接的目標框架名
node.data	文本，該節點所掛載的數據
node.method	文本，該節點的點擊對應處理語句
node.parentNode	對象，節點的父節點對象
node.childNodes	數組，包含節點下所有子節點的數組
node.sourceIndex	文本，服務器給予的數據裏對象的 parentId_nodeId 的組合字符串
node.hasChild	布爾值，指該節點是否有子節點
node.isLoad	布爾值，本節點的子節點數據是否已經在客戶端初始化
node.isExpand	布爾值，節點的展開狀態

方法 MzTreeView 類的一些方法：

方法名	方法的具體說明
MzTreeView.toString()	類的默認初始運行
MzTreeView.buildNode(id)	將該節點的所有下級子節點轉換成 HTML 並在網頁上體現出來
MzTreeView.nodeToHTML(node, AtEnd)	將 node 轉換成 HTML
MzTreeView.load(id)	從數據源里加載當前節點下的所有子節點
MzTreeView.nodeInit(sourceIndex, parentId)	節點的信息初始，從數據源到客戶端完整節點的轉化
MzTreeView.focus(id)	聚集到某個節點上
MzTreeView.expand(id[, sureExpand])	展開節點（包含下級子節點數據的加載初始化）
MzTreeView.setIconPath(path)	給節點圖片設置正確的路徑
MzTreeView.nodeClick(id)	節點鏈接點擊時同時被觸發的點擊事件處理方法
MzTreeView.upperNode()	跳轉到當前聚集節點的父級節點
MzTreeView.lowerNode()	跳轉到當前聚集節點的子級節點
MzTreeView.pervNode()	跳轉到當前聚集節點的上一節點
MzTreeView.nextNode()	跳轉到當前聚集節點的下一節點
MzTreeView.expandAll()	展開所有的樹點，在總節點量大於500時這步操作將會比較耗時

示例
<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>