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()直接打開
2,o()表面看起來沒反應,只有點開“蘋果”節點才能看到
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,而是根據整個樹形結構按層次遞加分配的。
O(2)以后結果會怎么樣?
