強大的Js樹型控件Dtree使用詳解


http://www.lmwlove.com/ac/ID868

在學習文章之前,要學會看官方網站http://destroydrop.com/javascripts/tree。從官方頁面你能知道:dtree是什么、它的特性、它的源代碼、它的幫助文檔以及它的版本歷史等等

常用方法
add(parameters):添加節點信息

Index Name Type Discription
1 id Number 當前節點的ID
2 preId Number 當前節點的父節點ID,根節點的值為 -1 
3 name String 當前節點要顯示的文字 
4 url String 點擊當前節點跳轉到的URL
5 title String 鼠標移至該節點時節點顯示的標題提示
6 target String 節點鏈接所打開的目標frame
7 icon String 節點顯示的圖標,無設置則使用默認圖標
8 iconOpen String 打開該節點后顯示的圖標,無設置則使用默認圖標
9 open Boolean 指定當前節點是否打開


【例】mytree.add(1, 0, 'My node', 'node.html', 'node title', 'mainframe', 'img/musicfolder.gif');
【注】dtree.js文件中約87-113行是一些默認圖片的路徑,可以自己配置圖片

openAll():打開所有節點,可在樹被創建以前或以后調用
【例】mytree.openAll();

closeAll():關閉所有節點,可在樹被創建以前或以后調用
【例】mytree.closeAll();

oAll(bool):打開或關閉所有節點參數為true則打開所有節點,false則關閉所有節點

isOpen(id):指定節點是否處於打開狀態如果處於打開狀態則返回true,反之false

openTo(parameters)打開指定節點可在樹被創建以前或以后調用

Index Name Type Description
1 id Number 需要打開的節點的ID號
2 select Boolean 判斷節點是否被選擇

o(index) 打開/關閉指定節點,如果節點處於關閉狀態則打開,反之則關閉
openTo()方法體內調用的就是o()方法

OPENTO(ID)O(ID)比較

方法名 相同點 缺點 優勢
openTo(id) 都是打開某個節點 isOpen方法不能判斷該節點是否打開 子節點打開的話,父節點也會相應打開
O(index) 除根節點外,其余id必須從1開始而且不能空缺,反正少用 1)能實現打開/關閉操作 2)ipOpen方法能判斷該節點是否打開


下面分別用兩種方法打開’MacBookPro系列’節點
1,openTo()直接打開
dtree
2,o()表面看起來沒反應,只有點開“蘋果”節點才能看到
dtree

dtree的配置CONFIG
配置干嘛用的?其實配置就是在樹初始化時對某些效果進行一些必要的設置,比如config.useIcons=false
意思就是所有節點不顯示圖片了;

變量 類型 默認值 描述
target String   true 所有節點的target 
folderLinks Boolean  true 文件夾可鏈接
useSelection Boolean  true 節點可被選擇(高亮)  
useCookies Boolean  true 樹可以使用cookies記住狀態  
useLines Boolean  true 創建帶線的樹
useIcons Boolean  true 創建帶有圖標的樹
useStatusText Boolean  false 用節點名替代顯示在狀態欄的節點url
closeSameLevel Boolean  false 只有一個有父級的節點可以被展開,當這個函數可用時openAll() 和 closeAll() 函數將不可用
inOrder Boolean  false 如果父級節點總是添加在子級節點之前,使用這個參數可以加速菜單顯示


【例子】mytree.config.target = "mytarget";

 

頁面中的書寫規范
1,參數可以不寫完,有默認值(從左至右,依次省略),例tree.add(id,pid,name,url);后面5個參數就可以省略
2,有間隔時的默認值(如存在第6個參數,但第5個參數想用默認值),即tree.add(id,pid,name,url,"",target);必須這樣寫tree.add(id,pid,name,url,"","","","",true);
3,特殊:如果需要顯示title(參數5)必須設定相應鏈接地址(參數4),tree.add(2,0,‘照明控制系統’,‘a.jsp’,‘這是第四個參數title’);?//如果第四個參數為空則無法顯示

高手進階
1,JS創建類對象
JS對象是一種復合類型,它允許你通過變量名存儲和訪問,換一種思路,對象是一個無序的屬性集合,集合中的每一項都由名稱和值組成(聽起來是不是很像我們常聽說的HASH表、字典、健/值對?),而其中的值類型可能是內置類型(如number,string),也可能是對象。

2,Js的prototype(原型)是什么
用來返回對象類型原型的引用,我們使用prototype屬性提供對象的類的一組基本功能。並且對象的新實例會"繼承"賦予該對象原型的操作。

3,了解一些DTRR.JS內的屬性
Node類:
1,this._io = open || false;? //is open? 
2, this._is = false;? //is selected? 
3, this._ls = false;? //last sibling? 
4, this._hc = false;? //has child?

dtree類:
1, this.obj = objName; //對象別名,new dtree時可用
2, this.aNodes = []; //節點數組,每個下標存一個節點

一些可能使用的方法
1,closeLevel(node)關閉當前node節點同級的節點,假設與a節點同級的有b和c節點,而且a、b、c節點都打開了子節點,此時調用closeLevel(a),b、c節點會收攏起來,但a節點不會收攏。例:closeLevel(tree.aNodes[1]) –假設下標1是a

2,getSelected()返回你選擇的節點的信息,返回的是一個node對象。例:getSelected().id就能返回選擇的節點的id

3,setCS(node)查看節點是否有子節點或者是最后一個節點,方法體內存有’_hc’表示是否有子節點,而’_ls’表示最后的葉子節點

特別注意:aNodes[1]和o(1)等這里的下標絕對不是指add(id,pid..)里的節點id,而是根據整個樹形結構按層次遞加分配的。
dtree

O(2)以后結果會怎么樣?
dtree


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM