1-1 dtree

一、引入

  $xoTheme->addStylesheet('modules/tadtools/dtree/dtree.css');
  $xoTheme->addScript('modules/tadtools/dtree/dtree.js');

or

              <link rel="stylesheet" href="<{xoAppUrl}>modules/tadtools/dtree/dtree.css" type="text/css">
              <script src="<{xoAppUrl}>modules/tadtools/dtree/dtree.js" type="text/javascript"></script>

二、調用插件

              <script type="text/javascript"> 
                d = new dTree('d','<{xoAppUrl modules/tadtools/dtree}>');//new一个树对象 
                //设置树的节点及其相关属性 
                d.add(0,-1,'My example tree'); 
                d.add(1,0,'Node 1','example01.html'); 
                d.add(2,0,'Node 2','example01.html'); 
                d.add(3,1,'Node 1.1','example01.html'); 
                d.add(4,0,'Node 3','example01.html'); 
                d.add(5,3,'Node 1.1.1','example01.html'); 
                d.add(6,5,'Node 1.1.1.1','example01.html'); 
                d.add(7,0,'Node 4','example01.html'); 
                d.add(8,1,'Node 1.2','example01.html'); 
                d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif'); 
                d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir'); 
                d.add(11,9,'Mom\'s birthday','example01.html'); 
                d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif'); 
                //config配置，设置文件夹不能被链接，即有子节点的不能被链接。 
                d.config.folderLinks=false; 
                document.write(d); 
              </script> 
              <p>
                <a href="javascript: prod_b.openAll();">展開</a> | <a href="javascript: prod_b.closeAll();">闔起</a>
              </p>

三、說明

1. (sn,ofsn,title,url)
2. ofsn = -1 ：根目錄

四、其他

dtree主要方法介紹：
add(parameters)：添加一個樹節點，實際參數有9個add(id,pid,name,url,title,target,icon,iconOpen,open); 
位置參數別名類型功能
1 id int節點自身的id(唯一) 
2 pid int節點的父節點id 
3 name string節點顯示在頁面上的名稱
4 url string節點的鏈接地址
5 title string鼠標放在節點上顯示的提示信息
6 target string節點鏈接所打開的目標frame 
7 icon string節點關閉狀態時顯示的圖標
8 iconOpen string節點打開狀態時顯示的圖標
9 open bool節點第一次加載是否打開
注：dtree.js文件中是一些默認圖片的路徑，可以自己配置圖片和路徑，我下載的在44~57行
openAll()打開全部節點，可在樹對象創建前或創建後調用
closeAll()關閉全部節點，可在樹對象創建前或創建後調用
openTo(id,select)打開指定id的節點，可以傳兩個參數：
id指定需要打開的節點的唯一id 
　　select是否讓該節點處於選中狀態
config配置
變量類型默認值描述
target string所有節點的target 
folderLinks bool true文件夾可被鏈接
useSelection bool true節點可被選擇高亮
useCookies bool true樹可以使用cookie記住狀態
useLines bool true創建帶結構連接線的樹
useIcons bool true創建帶有圖表的樹
useStatusText bool false用節點名替代顯示在狀態欄的節點url 
closeSameLevel bool false同級節點只允許一個節點處於打開狀態
inOrder bool false加速父節點樹的顯示
例如：tree.config.closeSameLevel=true;表示打開某級節點時，該級其他處於打開狀態的同級節點會被關閉

六、範例：http://yd.ugm.com.tw/