1.创建树的一个实例。

  这里需要引入dtree.js和dtree.css，可通过修改css文件定制自己想要的样式。

  1. <script type="text/javascript"> 
  2. <!-- 
  3.   d = new dTree('d'); 
  4.   //add(id, pid, name, url, title, target, icon, iconOpen, open) 
  5.   d.add(0, -1, ''); 
  6.   d.add(2, 1, '概况', 'media/all', '概况'); 
  7. ...
  8. ...
  9.  
  10.   document.write(d); 
  11.  
  12.   d.openAll(); 
  13.  
  14.   /** 自动定位到id为2的节点 */ 
  15.   d.openTo(2, true); 
  16. //--> 
  17. </script> 

2.一些重要的配置：


  
  1. // Tree object 
  2.  
  3. //变量 类型 默认值 描述
  4. //target string 所有节点的target
  5. //folderLinks bool true 文件夹可被链接
  6. //useSelection bool true 节点可被选择高亮
  7. //useCookies bool true 树可以使用cookie记住状态
  8. //useLines bool true 创建带结构连接线的树
  9. //useIcons bool true 创建带有图表的树
  10. //useStatusText bool false 用节点名替代显示在状态栏的节点url
  11. //closeSameLevel bool false 同级节点只允许一个节点处于打开状态
  12. //inOrder bool false 加速父节点树的显示
  13.  
  14. function dTree(objName) { 
  15.     this.config = { 
  16.         target              : null, 
  17.         folderLinks         : true, 
  18.         useSelection        : true, 
  19.         useCookies          : true, 
  20.         useLines            : true, 
  21.         useIcons            : true, 
  22.         useStatusText       : false, 
  23.         closeSameLevel   : false, 
  24.         inOrder             : false 
  25.     } 
  26.     this.icon = { 
  27.         root                : './js/tree/img/base.gif', 
  28.         folder          : './js/tree/img/folder.gif', 
  29.         folderOpen  : './js/tree/img/folderopen.gif', 
  30.         node                : './js/tree/img/page.gif', 
  31.         empty               : './js/tree/img/empty.gif', 
  32.         line                : './js/tree/img/line.gif', 
  33.         join                : './js/tree/img/join.gif', 
  34.         joinBottom  : './js/tree/img/joinbottom.gif', 
  35.         plus                : './js/tree/img/plus.gif', 
  36.         plusBottom  : './js/tree/img/plusbottom.gif', 
  37.         minus               : './js/tree/img/minus.gif', 
  38.         minusBottom : './js/tree/img/minusbottom.gif', 
  39.         nlPlus          : './js/tree/img/nolines_plus.gif', 
  40.         nlMinus         : './js/tree/img/nolines_minus.gif' 
  41.     }; 
  42.     this.obj = objName; 
  43.     this.aNodes = []; 
  44.     this.aIndent = []; 
  45.     this.root = new Node(-1); 
  46.     this.selectedNode = null; 
  47.     this.selectedFound = false; 
  48.     this.completed = false; 
  49. }; 
  50.  
 
  
 
 
  
详细参考：http://www.caohaifeng.com/code/javascript/dtree-api-2.html
 
  
 3.功能
 
  
add()
 添加一个节点到树形菜单里，只有当树形菜单加载完毕后才可以执行此方法，id、pid、name不能为空
 
  

  
  1. // Node object
  2.  
  3. //位置   参数别名     类型    功能 
  4. //1     id          int     节点自身的id(唯一) 
  5. //2     pid         int     节点的父节点id 
  6. //3     name        string  节点显示在页面上的名称 
  7. //4     url         string  节点的链接地址 
  8. //5     title       string  鼠标放在节点上显示的提示信息 
  9. //6     target      string  节点链接所打开的目标frame 
  10. //7     icon        string  节点关闭状态时显示的图标 
  11. //8     iconOpen    string  节点打开状态时显示的图标 
  12. //9     open        bool    节点第一次加载是否打开 
  13.  
  14. function Node(id, pid, name, url, title, target, icon, iconOpen, open)  

  
 
  
 
 
  
openall()
 打开所有的节点，无论树是否加载完毕都可以使用该方法
 
  
closeAll()
 关闭所有的节点，无论树是否加载完毕都可以使用该方法