Dtree的用法总结

痛定思痛。 2024-02-17 15:10 72阅读 0赞

最近用到了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文件

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

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

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

生成树 节点的代码：

type="text/javascript">

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文件.rar][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.  targetString true 所有节点的target  
     folderLinks Booleantrue文件夹可链接  
     useSelectionBooleantrue节点可被选择(高亮)  
     useCookiesBooleantrue树可以使用cookies记住状态  
     useLinesBooleantrue创建带线的树  
     useIconsBooleantrue创建带有图标的树  
     useStatusTextBooleanfalse用节点名替代显示在状态栏的节点url  
     closeSameLevelBooleanfalse只有一个有父级的节点可以被展开,当这个函数可用时openAll() 和 closeAll() 函数将不可用  
     inOrderBooleanfalse如果父级节点总是添加在子级节点之前,使用这个参数可以加速菜单显示.

[DTree_.rar]: http://jinhuer168.qjwm.com/down_4434935.html