JS TREE資料講解

treeHanlder //程式處理的一些公用方法
treeConfig //系統使用變數
1。TreeItem
方法：
add 添加子節點
remove 刪除節點本身
setCaption修改節點標題
unselect：不選擇單前節點
select:選擇當前節點
_root：取得頂級節點
toggle:切換節點狀態
expand:展開節點
collapse:收縮節點
collapseAll:全部收縮
collapseChildren:收縮當前節點的全部子節點
expandAll:展開所有子節點
expandChildRen:展開當前節點的子節點
getFirst:取得第一個子節點
getLast:取得當前節點遞延的最後一個節點
getPreviousSibling：取得前一個節點
getNextSibling：取得後一個節點
屬性
Text:節點文本
Action:節點行為
target:聯結架構
OpenImage:節點表徵圖
parent:上級節點
Nodes:子節點數組
id:節點id
_last：是否是父級節點的最後一個節點
rendered:HTML是否已經產生

事件
onSelected(oNode)：選中節點
onUnSelected(oNode):不選中節點
onExpand(oNode)：展開節點
onCollapse(oNode)：收縮節點
onDrag(fromNode,toNode)：拖動節點

 

rootIcon:頂級接點表徵圖
openRootIcon:頂級節點展開時候的表徵圖
folderIcon:有子節點的節點表徵圖
openFolderIcon:有子節點節點展開時候的表徵圖
fileIcon:末節點表徵圖
iIcon:I型線
lIcon:L型線
lMinusIcon:L型收縮時候表徵圖
lPlusIcon:L型展開時表徵圖
tIcon:T型線
tMinusIcon:T型收縮表徵圖
tPlusIcon:T型展開表徵圖
blankIcon:空表徵圖

defaultText:建立TreeItem時預設文字
allowDrag:Tree節點是否支援拖動（是否觸發onDrag事件)，預設不觸發

css_ItemText:正常節點的樣式
css_ItemTextHover:滑鼠移入時節點樣式
css_ItemTextSelected:節點選中時候的樣式
css_ItemTextSelectedNoFocus:節點選中但是焦點不再時候的樣式

css_ItemContainer:下級節點容器樣式
css_ItemTextContainer:節點所在行容器的樣式
註：建議不要修改這兩個
css_ItemCheckBox:在TreeCheckItem裡頭複選框的樣式
css_ItemDragTooltip:拖動的提示樣式
css_ItemDragingOver:節點拖動的時候經過的節點顯示的樣式

變數:
treeHandler
說明：
包含一些處理方法處理的實現函數，主要是完成dom 到JavaScript Object的映射，本來打算寫一個singleton，不過想想還是使用變
量簡單
詳細參數：
idCount:遞增，記錄節點數
idPrefix:HTML中id命名的首碼
getId:擷取節點ID(用於編程式控制制的）
toggle:切換node的狀態（展開或者收縮）
hover:處理滑鼠移動到節點
restore:處理還原節點狀態
select:處理選擇節點
focus:處理節點或者焦點
keycode:處理鍵盤事件
mousedown:處理滑鼠按下
mousemove:處理滑鼠移動
mouseup:處理釋放滑鼠
contextmenu:處理節點右鍵
blur:處理節點失去焦點
all:儲存所有建立的節點
selected:記錄選擇的節點
註：作為二次開發人員，完全可以不關心treeHanlder的內容，這裡的說明只是為了協助更好的理解我的處理模型
////////////////////////////////////////
//2.TreeItem
///////////////////////////////////////
說明：
這個是最重要的實作類別，也是其他類繼承實現的基礎，裡頭提供的一些方法是內部調用的，在這裡我只是提供對於二次開發人員經常
需要使用到的一些方法和事件，有興趣的可以通讀代碼之後自己研究，或者寫信和我一起探討
詳細介紹
方法
toString()：覆蓋object的預設方法，同時產生需要的html代碼
add 添加子節點
參數oItem為TreeItem的案例或者繼承類的執行個體
remove 刪除節點本身
setCaption修改節點標題
rerender:重新產生HTML，對於開發人員而言，不要去調用，如果是擴充介面，必要的情況下可以調用
unselect：不選擇單前節點
select:選擇當前節點
blur:讓其失去焦點
_root：取得頂級節點
toggle:切換節點狀態
expand:展開節點
collapse:收縮節點
collapseAll:全部收縮
collapseChildren:收縮當前節點的全部子節點
expandAll:展開所有子節點
expandChildRen:展開當前節點的子節點
getFirst:取得第一個子節點
getLast:取得當前節點遞延的最後一個節點
getPreviousSibling：取得前一個節點
getNextSibling：取得後一個節點
屬性
Text:節點文本
Action:節點行為
target:聯結架構
OpenImage:節點表徵圖
parent:上級節點
Nodes:子節點數組
id:節點id
_last：是否是父級節點的最後一個節點
rendered:HTML是否已經產生
//////////////////////////////////
//3.TreeObject
/////////////////////////////////
說明；
Tree的主節點對象，建立一個tree，必須從這個對象開始建立
詳細說明：
繼承了TreeItem的所有方法

擴充方法如下：
write:輸出html,這個是每個tree初始化必要的調用
selected:擷取tree被選中的節點
事件
onSelected(oNode)：選中節點
onUnSelected(oNode):不選中節點
onExpand(oNode)：展開節點
onCollapse(oNode)：收縮節點
onDrag(fromNode,toNode)：拖動節點
這裡的oNode都是JavaScript的TreeItem或者繼承的執行個體
///////////////////////////////////////
//4。TreeCheckItem
///////////////////////////////////////
說明：
帶有複選框的節點實現
詳細說明：
繼承所有TreeItem的方法
擴充方法
toString()這個方法重新寫了，如果有興趣的，可以調用看看具體的html
check:可以切換選擇狀態，true代碼選中，false表示非選中
如果實現了TreeCheckItem,這個時候通過你的obj._root()得到頂級節點之後，可以調用etSelectedNodes，這樣可以得到一個被選中
的TreeCheckItem的數組
註：這裡我還沒有提供oncheck這個事件，日後會考慮加入，另外對於treeItem還沒有去考慮不是全部選中子節點的介面表現，就是說只是實現
了兩個狀態，應該有3個狀態的
////////////////////////////
//5。TreeXLoadItem
///////////////////////////
說明：
通過xml源提供非同步載入資料的能力
詳細說明：
沒有提供特殊的方法，就是建立的時候參數不同
註：
我還沒有做到很好的和TreeCheckItem的結合，通過多個線程的情況下有些問題，還有可以考慮增加reload的方法
////////////////////////////
//其它說明
///////////////////////////
TreeItem.getXML，提供了將JS Nodes序列化成xml的介面，不過還沒有提供載入的功能
我個人目前認為還需要改善的有如下：
1。支援節點表徵圖的自訂
2。修改事件介面，最好能夠使用命令模式，即addListener的方式
3。修改XLoadItem的實現，最好分離出DataSource，支援多種資料格式的載入
4。修正一些運行狀態的bug
5。在IE5和Netscape下面調試通過
至於長遠的打算
1.重新修改底層的實現，載介面設計方面盡量的完善
2.使用asp.net編寫成Web Control
3.使用Java實現TagLib