dtree的使用方法

1.建立树的一个实例。

  这里须要引入dtree.js和dtree.css，可经过修改css文件定制本身想要的样式。

<script type="text/javascript">
<!--
  d = new dTree('d');
  //add(id, pid, name, url, title, target, icon, iconOpen, open)
  d.add(0, -1, '');
  d.add(2, 1, '概况', 'media/all', '概况');
...
...

  document.write(d);

  d.openAll();

  /** 自动定位到id为2的节点 */
  d.openTo(2, true);
//-->
</script>

2.一些重要的配置：

// Tree object

//变量 类型 默认值 描述
//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 加速父节点树的显示

function dTree(objName) {
    this.config = {
        target              : null,
        folderLinks         : true,
        useSelection        : true,
        useCookies          : true,
        useLines            : true,
        useIcons            : true,
        useStatusText       : false,
        closeSameLevel   : false,
        inOrder             : false
    }
    this.icon = {
        root                : './js/tree/img/base.gif',
        folder          : './js/tree/img/folder.gif',
        folderOpen  : './js/tree/img/folderopen.gif',
        node                : './js/tree/img/page.gif',
        empty               : './js/tree/img/empty.gif',
        line                : './js/tree/img/line.gif',
        join                : './js/tree/img/join.gif',
        joinBottom  : './js/tree/img/joinbottom.gif',
        plus                : './js/tree/img/plus.gif',
        plusBottom  : './js/tree/img/plusbottom.gif',
        minus               : './js/tree/img/minus.gif',
        minusBottom : './js/tree/img/minusbottom.gif',
        nlPlus          : './js/tree/img/nolines_plus.gif',
        nlMinus         : './js/tree/img/nolines_minus.gif'
    };
    this.obj = objName;
    this.aNodes = [];
    this.aIndent = [];
    this.root = new Node(-1);
    this.selectedNode = null;
    this.selectedFound = false;
    this.completed = false;
};

 

详细参考：http://www.caohaifeng.com/code/javascript/dtree-api-2.html

 3.功能

add()
添加一个节点到树形菜单里，只有当树形菜单加载完毕后才能够执行此方法，id、pid、name不能为空

// Node object

//位置   参数别名     类型    功能
//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    节点第一次加载是否打开

function Node(id, pid, name, url, title, target, icon, iconOpen, open)

 

openall()
打开全部的节点，不管树是否加载完毕均可以使用该方法

closeAll()
关闭全部的节点，不管树是否加载完毕均可以使用该方法