dtree动态树.doc

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中的代码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN /TR/xhtml1/DTD/xhtml1-strict.dtd html head?titleDestroydrop raquo; Javascripts raquo; Tree/title ?link rel=StyleSheet href=dtree.css type=text/css /?script type=text/javascript src=dtree.js/script /head body h1a href=/Destroydrop/a raquo; a href=/javascripts/Javascripts/a raquo; a href=/javascripts/tree/Tree/a/h1 h2Example/h2 div class=dtree ?pa href=javascript: d.openAll();open all/a | a href=javascript: d.closeAll();close all/a/p ?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 ,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 /div pa href=mailto#58;drop#64;destroydrop#46;comcopy;2002-2003 Geir Landrouml;/a/p /body /html ? 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 ??? 第三个参数，节点要显示的文字 ??