Dtree学习

dtree动态树+Javascript右键菜单（一）
1、从网上下载dtree控件。（好多地方都有的哦：P）
2、在Jbuilder中新建Web应用，命名为TreeLearing
3、解压缩dtree.rar包。
    把dtree目录拷贝至TreeLearing应用中。
    dtree目录下包括这些文件：example01.html 、 dtree.js 、 api.html 、 dtree.css 和img目录
    注意：除了api.html之外，其它的文件都是必须拷贝的。只有这个api.html是对dtree控件的函数介绍。
4、复制example01.html，并把粘贴后的文件重命名为Tree.jsp
：）  （保留原来的文件，以备参考是个好习惯哦~~）
注意dtree目录下的文件结构不要改变，否则树就不会正常显示
 
5、在Web应用中指定首页为Tree.jsp页面。
6、Tree.jsp中的代码如下：



 
 
 

Destroydrop » Javascripts » Tree

Example

 

open all | close all

 

 
7、删除紫红色部分的代码，因为不需要哦。
8、注意看绿色和蓝色部分的代码，这才是真正为树添加节点的部分。
    d.add(0,-1,'My example tree');
    这一句为树添加了一个根节点，显示名称为'My example tree'
    d.add(1,0,'Node 1','example01.html');
    这一句在树的根节点下面添加了一个子节点。（d.add（）方法的参数具体含义可参见api.html文件）
    常用的：
    第一个参数，表示当前节点的ID
    第二个参数，表示当前节点的父节点的ID
    第三个参数，节点要显示的文字
    第四个参数，点击该节点的超链接（注意也可以是某个servlet或是struts应用中的某个.do请求）
    第五个参数，鼠标移至该节点时显示的文字
    第六个参数，指定点击该节点时在哪个桢中打开超链接
    ……
9、运行应用程序。可以看到一棵漂亮的树。
原贴地址http://blog.sina.com.cn/u/4ae9618f010006y3