dtree基础

最近用到了dtree来建立树，纠结过好久后，终于有了些门道，下面的总结希望对咪咪们有些帮助：
 dtree用来建立静态树或者动态树都是很方便的，老外给提供了整个的JS，然后我们只是操心这个树中存放的元素以及这些元素链接地址就可以了，其他的实现过程完全是由老外的代码实现的，我们不必深究。
 有关Dtree的所有文件我已经打包发到网盘，且里面有一些范例等，包括了一个网友的PPT介绍，很牛的。
    解压缩dtree.zip 包。

dtree目录下包括这些文件：example01.html 、 dtree.js 、 api.html 、 dtree.css 和img目录  注意：除了api.html之外，其它的文件都是必须拷贝的。api.html是dtree的函数介绍。

1. dtree.js : dtree功能脚本

2. dtree.css : 样式文件

3. img文件夹 : 存放dtree使用的图标

其中 打开example01.html文件

<link rel="StyleSheet" href="css/dtree.css" type="text/css" />

<script type="text/javascript" src="js/dtree.js"></script>

这里的这两行代码，懂IT的都应该知道放到哪里，example01.html里面也有这个代码，放到head中就可以了，注意指定路径。

生成树 节点的代码：

<script type="text/javascript">

<!--

d = new dTree(’d’);//创建一个树对象

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’);

document.write(d);

//-->

</script>

d.add(0,-1,’My example tree’);

这一句为树添加了一个根节点，显示名称为’My example tree’     d.add(1,0,’Node 1’,’example01.html’);

这一句在树的根节点下面添加了一个子节点。（d.add（）方法的参数具体含义可参见api.html文件）

更详细的内容，感觉自我总结不如看看附件中，网友的PPT，我是按照PPT学会的，建立静态表简单，但是建立动态树的时候，就需要用一些循环，来依次读取数据库或者文件内容，循环中add ，然后再提交画出树，这样比较简单。在这个建树过程中需要注意dtree.js里面的那些代码，尤其是this.icon 部分是指定的图片位置，这个地方可能需要按需修改，其他地方基本不需要。

如果对dtree不懂，可以直接找我联系。

[email protected]

[email protected] 这是我的gmail邮箱+gtalk

我经常用Gtalk+163邮箱

下载：DTree文件.rar

附录：

1. 打开关闭节点:tree.toggle()
2. 打开节点:tree.expand();
3. 关闭节点:tree.collapse();
4. 打开所有节点:tree.expandAll();
5. 关闭所有节点:tree.collapseAll();
6. 打开子节点:tree.expandChildren();
7. 关闭子节点:tree.collapseChildren();
8. 显示当前节点的id:if (tree.getSelected()) { alert(tree.getSelected().id); }
9. 增加节点:addNode()
10. 增加多个节点:addNodes()
11. 删除节点:delNode()
12. 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          如果父级节点总是添加在子级节点之前,使用这个参数可以加速菜单显示.

摘自http://blog.sina.com.cn/s/blog_6aa1784101019h8t.html