一：函數

1：頁面中

tree.add(id,pid,name,url,title,target,icon,iconOpen,open);

參數說明：

id         ：節點自身的id

pid       ：節點的父節點的id

name    ：節點顯示在頁面上的名稱

url        ：節點的鏈接地址

title      ：鼠標放在節點上所出現的提示信息

target   ：節點鏈接所打開的目標frame（如框架目標mainFrame或是_blank,_self之類）

icon      ：節點關閉時的顯示圖片的路徑

iconOpen：節點打開時的顯示圖片的路徑

open    ：布爾型，節點是否打開（默認為false）

注：open項：頂級節點一般采用true，即pid是－1的節點

2：dtree.js文件中

約87－113行是一些默認圖片的路徑，注意要指對。

二：頁面中的書寫

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：樣式表

（1）：可以將dtree.css中的樣式附加到你的應用中的主css中，如a.css

（2）：也可以同時引用dtree.css與a.css兩個文件，但前提條件是兩個css文件中不能有重復的樣式

<link href="/jingjindatabase/pub/css/a.css" rel="stylesheet" type="text/css" />
<link href="/jingjindatabase/pub/css/dtree.css" rel="stylesheet" type="text/css" />

4：頁面代碼書寫的位置是：一般寫在表格的td之中

<script type="text/javascript" src="/myMobanGis/pub/js/dtree.js"></script>
<script type="text/javascript">
tree = new dTree('tree');
tree.add("1","-1","京津","","","","","",true);
tree.add("11","1","A","","","","","",true);
 tree.add("110","11","A-1","content.jsp?moduleName=XXX","","mainFrame");
 tree.add("111","11","A-2","javascript:void(0)","","鏈接在哪里顯示");
 tree.add("112","11","A-3","javascript:void(0)","","mainFrame");
 tree.add("113","11","A-4","/.jsp","","mainFrame");
 tree.add("114","11","A-5","/.jsp","","mainFrame");
 tree.add("115","11","A-6","/.jsp","","mainFrame");
 
tree.add("12","1","B","","","","","",true);
 tree.add("121","12","B-1","javascript:調用本頁內的js函數","","mainFrame");
 tree.add("122","12","B-2");

tree.add("13","1","C","","","","","",true);
 tree.add("131","13","C-1","javascript:void(0)","","mainFrame");
 tree.add("132","13","C-2","javascript:void(0)","","mainFrame");
 tree.add("133","13","C-3","javascript:void(0)","","mainFrame");

tree.add("14","1","D","","","","","",true);
 tree.add("141","14","D-1","javascript:void(0)","","mainFrame");
document.write(tree);
</script>
說明：這是靜態的代碼，動態的可用循環加入。 

三：css文件的注解

1:dtree.css

.dtree {//定義目錄樹節點的字體，字號，顏色
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #006600;
 white-space: nowrap;
}
.dtree img {//定義選用節點圖標的樣式，位置
 border: 0px;
 vertical-align: middle;
}
.dtree a {//
 color: #006600;
 text-decoration: none;
}
.dtree a.node, .dtree a.nodeSel {
 white-space: nowrap;
 padding: 0px 0px 0px 0px;
}
.dtree a.node:hover, .dtree a.nodeSel:hover {
 color: #006600;
 text-decoration: none;
}
.dtree a.nodeSel {
 background-color: #c0d2ec;
}
.dtree .clip {
 overflow: hidden;
}

a = new dTree('a');

a.config.useStatusText=true;

a.config.closeSameLevel=true;

a.config.useCookies=false;

a.add(0,-1,'Tree example','javascript: void(0);');

a.add(1, 0,'Node 1','javascript:void(0);');

a.add(2, 1,'Node 2','javascript:void(0);');

a.add(3, 1,'Node 3','javascript:void(0);');

a.add(4, 0,'Node 4','javascript:void(0);');

a.add(5, 4,'Node 5','javascript:void(0);');

a.add(6, 4,'Node 6','javascript:void(0);');

a.add(7, 2,'Node 7','javascript:void(0);');

a.add(8, 6,'Node 8','javascript:void(0);');

a.add(9, 1,'Node 9','javascript:void(0);');

a.add(10, 2,'Node 10','javascript:void(0);');

a.add(11, 8,'Node 11','javascript:void(0);');

a.add(12, 2,'Node 12','javascript:void(0);');

a.add(13, 9,'Node 13','javascript:void(0);');

a.add(14, 4,'Node 14','javascript:void(0);');

a.add(15, 2,'Node 15','javascript:void(0);');

a.add(16, 1,'Node 16','javascript:void(0);');

a.add(17, 4,'Node 17','javascript:void(0);');

a.add(18, 6,'Node 18','javascript:void(0);');

a.add(19, 7,'Node 19','javascript:void(0);');

document.write(a);