随笔 - 147  文章 - 71  trackbacks - 0
<2009年3月>
22232425262728
1234567
891011121314
15161718192021
22232425262728
2930311234

常用链接

留言簿(1)

随笔分类(146)

随笔档案(147)

文章分类(28)

文章档案(28)

喜欢的Blog

搜索

  •  

最新评论

阅读排行榜

评论排行榜

 

1.         从网上下载dtree控件。

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.         运行应用程序。可以看到一棵漂亮的树。


存储目录的改进

 dTreeimg目录必须和使用dTree的文件放在同一目录下,这样很容易打乱网站的目录结构,对dTree做了一个微小的改动,增加了一个实例化参数,实例化dTree时可以指定img目录,打开dtree.js文件。

注意保持路径的一致,可以这样实例化。 

// url图片目录路径

function dTree(objName, url) {

    this.config = {

       target : null,

       folderLinks : true,

       useSelection : true,

       useCookies : true,

       useLines : true,

       useIcons : true,

       useStatusText : false,

       closeSameLevel : false,

       inOrder : false

    }

    this.icon = {

       root : url + "/img/base.gif",

       folder : url + "/img/folder.gif",

       folderOpen : url + "/img/folderopen.gif",

       node : url + "/img/page.gif",

       empty : url + "/img/empty.gif",

       line : url + "/img/line.gif",

       join : url + "/img/join.gif",

       joinBottom : url + "/img/joinbottom.gif",

       plus : url + "/img/plus.gif",

       plusBottom : url + "/img/plusbottom.gif",

       minus : url + "/img/minus.gif",

       minusBottom : url + "/img/minusbottom.gif",

       nlPlus : url + "/img/nolines_plus.gif",

       nlMinus : url + "/img/nolines_minus.gif"

    };

    this.obj = objName;

    this.aNodes = [];

    this.aIndent = [];

    this.root = new Node(-1);

    this.selectedNode = null;

    this.selectedFound = false;

    this.completed = false;

}; 

调用方法:d = new dTree('d','dtree');

修改之后img目录可以集中放在一处,网站目录的结构化应该会更好。 


api翻译

属性菜单使用说明

函数

add()

向树里添加一个节点,只能在树被创建之前调用,必须含有id, pid, name 

参数: 

名字

类型    

描述

id

Number

唯一的ID

pid

Number

判定父节点的数字,根节点的值为 -1

name

String    

节点的文本标签 

url

String

节点的Url

title

String

节点的Title

target

String    

节点的target 

icon

String

用做节点的图标,节点没有指定图标时使用默认值

iconOpen

String    

用做节点打开的图标,节点没有指定图标时使用默认值

open

Boolean 

判断节点是否打开 

例子:mytree.add(1, 0, ’My node’, ’node.html’, ’node title’, ’mainframe’, ’img/musicfolder.gif’);
openAll() 

打开所有节点 ,可在树被创建以前或以后调用。

例子:mytree.openAll();
closeAll()

关闭所有节点,可在树被创建以前或以后调用。

例子:mytree.closeAll(); 

openTo()

Opens the tree to a certain node and can also select the node,只能在树被创建以后调用。

参数: 

名字

类型

描述

id 

Number

节点唯一的ID

select

Boolean

判断节点是否被选择

例子:mytree.openTo(4, true); 
 

配置 

变量

类型

默认值

描述

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    

如果父级节点总是添加在子级节点之前,使用这个参数可以加速菜单显示

例子:mytree.config.target = "mytarget";  

posted on 2009-03-25 16:19 飞翔天使 阅读(5830) 评论(1)  编辑  收藏 所属分类: ajax

FeedBack:
# re: dtree的使用[未登录] 2010-08-03 16:20 aa
<input type="button">  回复  更多评论
  

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


网站导航: