Dtree学习

Posted on 2007-04-29 14:20 flustar 阅读(2087) 评论(0)  编辑  收藏

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
 <title>Destroydrop &raquo; Javascripts &raquo; Tree</title>
 <link rel="StyleSheet" href="dtree.css" type="text/css" />
 <script type="text/javascript" src="dtree.js"></script>
</head>
<body>
<h1><a href="/">Destroydrop</a> &raquo; <a href="/javascripts/">Javascripts</a> &raquo; <a href="/javascripts/tree/">Tree</a></h1>
<h2>Example</h2>
<div class="dtree">
 <p><a 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 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>
</div>
</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
    第三个参数,节点要显示的文字
    第四个参数,点击该节点的超链接(注意也可以是某个servlet或是struts应用中的某个.do请求)
    第五个参数,鼠标移至该节点时显示的文字
    第六个参数,指定点击该节点时在哪个桢中打开超链接
    ……
9、运行应用程序。可以看到一棵漂亮的树。
原贴地址http://blog.sina.com.cn/u/4ae9618f010006y3


只有注册用户登录后才能发表评论。


网站导航:
 

posts - 146, comments - 143, trackbacks - 0, articles - 0

Copyright © flustar