MzTreeViewJS 樹形控件

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

在 MzTreeView 里都有一個虛的根節(jié)點(diǎn)，其ID為0，用戶可見的根節(jié)點(diǎn)其父節(jié)點(diǎn)ID皆為0

屬性

MzTreeView 類的一些屬性：

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

MzTreeView.nodes
集合
服務(wù)器端給樹指定數(shù)據(jù)源時數(shù)據(jù)存放的對象，具體存放格式如：
MzTreeViewHandle.nodes["parentId_nodeId"] = "text: nodeText; icon: nodeIcon; url: nodeURL; ...";

MzTreeView.url
地址字符串
可讀寫，樹缺省的URL，默認(rèn)值是 #

MzTreeView.target
目標(biāo)框架名
可讀寫，樹缺省的鏈接target，默認(rèn)值是 _self

MzTreeView.name
字符
只讀，樹的實(shí)例名，同樹實(shí)例化時作為參數(shù)傳入(大小寫敏感)：
var Tree = new MzTreeView("Tree");

MzTreeView.currentNode
樹節(jié)點(diǎn)
只讀，樹當(dāng)前得到焦點(diǎn)的節(jié)點(diǎn)對象

MzTreeView.icons
集合
樹所使用的所有圖標(biāo)存放

MzTreeView.iconsExpand
集合
樹里展開狀態(tài)的圖標(biāo)存放

MzTreeView.colors
集合
樹里使用到的幾個顏色存放

MzTreeView 在客戶端的節(jié)點(diǎn)所擁有的屬性：

屬性名
屬性的具體說明

node.id
數(shù)字文本，節(jié)點(diǎn)的ID

node.parentId
數(shù)字文本，節(jié)點(diǎn)對應(yīng)的父節(jié)點(diǎn)ID

node.text
文本，節(jié)點(diǎn)的顯示文本

node.hint
文本，節(jié)點(diǎn)的注釋說明

node.icon
文本，節(jié)點(diǎn)對應(yīng)的圖標(biāo)

node.path
文本，節(jié)點(diǎn)在樹里的絕對路徑：0_1_10_34

node.url
文本，該節(jié)點(diǎn)的 URL

node.target
文本，該節(jié)點(diǎn)鏈接的目標(biāo)框架名

node.data
文本，該節(jié)點(diǎn)所掛載的數(shù)據(jù)

node.method
文本，該節(jié)點(diǎn)的點(diǎn)擊對應(yīng)處理語句

node.parentNode
對象，節(jié)點(diǎn)的父節(jié)點(diǎn)對象

node.childNodes
數(shù)組，包含節(jié)點(diǎn)下所有子節(jié)點(diǎn)的數(shù)組

node.sourceIndex
文本，服務(wù)器給予的數(shù)據(jù)里對象的 parentId_nodeId 的組合字符串

node.hasChild
布爾值，指該節(jié)點(diǎn)是否有子節(jié)點(diǎn)

node.isLoad
布爾值，本節(jié)點(diǎn)的子節(jié)點(diǎn)數(shù)據(jù)是否已經(jīng)在客戶端初始化

node.isExpand
布爾值，節(jié)點(diǎn)的展開狀態(tài)

方法

MzTreeView 類的一些方法：

方法名
方法的具體說明

MzTreeView.toString()
類的默認(rèn)初始運(yùn)行

MzTreeView.buildNode(id)
將該節(jié)點(diǎn)的所有下級子節(jié)點(diǎn)轉(zhuǎn)換成 HTML 并在網(wǎng)頁上體現(xiàn)出來

MzTreeView.nodeToHTML(node, AtEnd)
將 node 轉(zhuǎn)換成 HTML

MzTreeView.load(id)
從數(shù)據(jù)源里加載當(dāng)前節(jié)點(diǎn)下的所有子節(jié)點(diǎn)

MzTreeView.nodeInit(sourceIndex, parentId)
節(jié)點(diǎn)的信息初始，從數(shù)據(jù)源到客戶端完整節(jié)點(diǎn)的轉(zhuǎn)化

MzTreeView.focus(id)
聚集到某個節(jié)點(diǎn)上

MzTreeView.expand(id[, sureExpand])
展開節(jié)點(diǎn)（包含下級子節(jié)點(diǎn)數(shù)據(jù)的加載初始化）

MzTreeView.setIconPath(path)
給節(jié)點(diǎn)圖片設(shè)置正確的路徑

MzTreeView.nodeClick(id)
節(jié)點(diǎn)鏈接點(diǎn)擊時同時被觸發(fā)的點(diǎn)擊事件處理方法

MzTreeView.upperNode()
跳轉(zhuǎn)到當(dāng)前聚集節(jié)點(diǎn)的父級節(jié)點(diǎn)

MzTreeView.lowerNode()
跳轉(zhuǎn)到當(dāng)前聚集節(jié)點(diǎn)的子級節(jié)點(diǎn)

MzTreeView.pervNode()
跳轉(zhuǎn)到當(dāng)前聚集節(jié)點(diǎn)的上一節(jié)點(diǎn)

MzTreeView.nextNode()
跳轉(zhuǎn)到當(dāng)前聚集節(jié)點(diǎn)的下一節(jié)點(diǎn)

MzTreeView.expandAll()
展開所有的樹點(diǎn)，在總節(jié)點(diǎn)量大于500時這步操作將會比較耗時