dtree详细资料
Posted 旁听1
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了dtree详细资料相关的知识，希望对你有一定的参考价值。
目录视图
摘要视图
订阅
分类：作者：diaoyf | 文章来源：http://programmerdigest.cn
dTree是一个免费的JavaScript树形菜单，使用简单，界面制作的也很专业。
dtree树形菜单
所谓“兵无常势，水无常形”，不同的项目需求，造成菜单树的各种变化，因此在介绍dTree的同时，本文着重讲述如何改造dTree，以达到为不同项目所用的目的。
dTree 分析
dTree的使用非常简单，在下载的dTree压缩文件中（2.05），要用的只有三个：
1. dtree.js : dtree功能脚本
2. dtree.css : 样式文件
3. img文件夹 : 存放dtree使用的图标，参看下图：
dtree图标
很容易就可以编写出类似上面的dtree菜单树，源代码如下：
-
<html>
-
<head>
-
<link rel="StyleSheet" href="dtree.css" type="text/css" />
-
<script type="text/javascript" src="dtree.js"></script>
-
</head>
-
<body>
-
<script type="text/javascript">
-
<!–
-
d = new dTree(‘d’); //创建树，名称为’d‘（注意和树的对象变量名称要一致）
-
d.add(0,-1,‘My example tree’); //在树中增加节点。节点id是0，父节点是-1(根节点)，节点文字’My example tree’
-
d.add(1,0,‘Node 1′,‘default.html’); //根节点的子节点(父节点是0)，’default.html’表示节点链接(鼠标点击页面跳转url)
-
d.add(2,0,‘Node 2′,‘default.html’);
-
d.add(3,1,‘Node 1.1′,‘default.html’);
-
d.add(4,0,‘Node 3′,‘default.html’);
-
d.add(5,3,‘Node 1.1.1′,‘default.html’);
-
d.add(6,5,‘Node 1.1.1.1′,‘default.html’);
-
d.add(7,0,‘Node 4′,‘default.html’);
-
d.add(8,1,‘Node 1.2′,‘default.html’);
-
d.add(9,0,‘My Pictures’,‘default.html’,‘Pictures I/’ve taken over the years’,”,”,‘img/imgfolder.gif’); //’Pictures I/’ve taken over the years’是链接title，指定图标
-
d.add(10,9,‘The trip to Iceland’,‘default.html’,‘Pictures of Gullfoss and Geysir’);
-
d.add(11,9,‘Mom/’s birthday’,‘default.html’);
-
d.add(12,0,‘Recycle Bin’,‘default.html’,”,”,‘img/trash.gif’);
-
document.write(d); //输出dtree的html（显示）
-
//–>
-
</script>
-
</body>
-
</html>
分析dtree.js，在dTree中只有两个结构：”节点”和”树”，dTree的所有功能和构造都在于这两个结构的属性和行为中，Node比较简单，只包含节点的基本属性和一个构造方法，所以对dTree的分析和研究的重点可放在dTree结构中。
<!--#uml-class{width:450px;background:#FFFFCE;border-collapse:collapse;}#uml-class th{border:1px solid #000;font-size:14pt;}#uml-class td{border:1px solid #000;font-size:10pt;}#uml-class td ul{list-style-type:circle;}#uml-class td ul li{margin:0px 0px 0px -10px;font-family:Monospace;}#uml-class td ul li a{text-decoration:none;color:#000;}#uml-class td ul li a:hover{border-bottom:1px dotted;}#uml-class td ul li span{display:none;color:#666;border:1px dotted #000;}-->
| Node |
|---|
|
Attributes(属性)
|
|
Operations(行为)
|
节点类图
| dTree |
|---|
|
Attributes(属性)
|
|
Operations(行为)
|
树类图
提示：
鼠标移动到类图中的属性或方法上时，会显示详细信息。
dTree的工作原理
类似dTree这样的动态的客户端web插件，实现起来基本离不开xhtml和javascript，用一段简单的代码来探索一下dTree的工作原理：
-
<html>
-
<head>
-
<link rel="StyleSheet" href="dtree.css" type="text/css" />
-
<script type="text/javascript" src="dtree.js"></script>
-
</head>
-
<body>
-
<script type="text/javascript">
-
<!--
-
d = new dTree(‘d‘); //创建树，名称为‘d‘
-
d.add(0,-1,‘根节点‘);
-
d.add(1,0,‘节点 1‘,‘node1.html‘);
-
d.add(2,0,‘节点 2‘,‘node2.html‘);
-
d.add(3,1,‘节点 1.1‘,‘node1_1.html‘);
-
d.add(4,3,‘节点 1.1.1‘,‘node1_1_1.html‘);
-
document.write(d);
-
-
function show()
-
{
-
alert(d);
-
}
-
//-->
-
</script>
-
-
<input type="button" value="显示html" onclick="show()">
-
</body>
-
</html>
显示的“树”如下图：
点击下方的“显示html”按钮，会在alert对话框中显示整个树的html代码，整理后如下：
-
<div class="dtree">
-
<div class="dTreeNode">
-
<img id="id0" src="img/base.gif" alt="" />根节点</a>
-
</div>
-
<div id="dd0" class="clip" style="display:block;">
-
<div class="dTreeNode">
-
<a href="javascript: d.o(1);"><img id="jd1" src="img/minus.gif" alt="" /></a>
-
<img id="id1" src="img/folderopen.gif" alt="" />
-
<a href="javascript: d.o(1);" class="node">节点 1</a>
-
</div>
-
<div id="dd1" class="clip" style="display:block;">
-
<div class="dTreeNode">
-
<img src="img/line.gif" alt="" />
-
<a href="javascript: d.o(3);"><img id="jd3" src="img/minusbottom.gif" alt="" /></a>
-
<img id="id3" src="img/folderopen.gif" alt="" />
-
<a href="javascript: d.o(3);" class="node">节点 1.1</a>
-
</div>
-
<div id="dd3" class="clip" style="display:block;">
-
<div class="dTreeNode">
-
<img src="img/line.gif" alt="" />
-
<img src="img/empty.gif" alt="" />
-
<img src="img/joinbottom.gif" alt="" />
-
<img id="id4" src="img/page.gif" alt="" />
-
<a id="sd4" class="node" href="node1_1_1.html" onclick="javascript: d.s(4);">节点 1.1.1</a>
-
</div>
-
</div>
-
</div>
-
<div class="dTreeNode">
-
<img src="img/joinbottom.gif" alt="" />
-
<img id="id2" src="img/page.gif" alt="" />
-
<a id="sd2" class="node" href="node2.html" onclick="javascript: d.s(2);">节点 2</a>
-
</div>
-
</div>
-
</div>
仔细观察，树中每个节点的html构造是相似的：
-
<!-- 根节点 -->
-
<div class="dTreeNode">
-
<img id="id0" src="img/base.gif" alt="" />根节点</a>
-
</div>
-
<div id="dd0" class="clip" style="display:block;">
-
......
-
</div>
-
<!-- 节点 1 -->
-
<div class="dTreeNode">
-
<a href="javascript: d.o(1);"><img id="jd1" src="img/minus.gif" alt="" /></a>
-
<img id="id1" src="img/folderopen.gif" alt="" />
-
<a href="javascript: d.o(1);" class="node">节点 1</a>
-
</div>
-
<div id="dd1" class="clip" style="display:block;">
-
......
-
</div>
-
<!-- 节点 1.1 -->
-
<div class="dTreeNode">
-
<img src="img/line.gif" alt="" />
-
<a href="javascript: d.o(3);"><img id="jd3" src="img/minusbottom.gif" alt="" /></a>
-
<img id="id3" src="img/folderopen.gif" alt="" />
-
<a href="javascript: d.o(3);" class="node">节点 1.1</a>
-
</div>
-
<div id="dd3" class="clip" style="display:block;">
-
......
-
</div>
-
<!-- 节点 1.1.1 -->
-
<div class="dTreeNode">
-
<img src="img/line.gif" alt="" />
-
<img src="img/empty.gif" alt="" />
-
<img src="img/joinbottom.gif" alt="" />
-
<img id="id4" src="img/page.gif" alt="" />
-
<a id="sd4" class="node" href="node1_1_1.html" onclick="javascript: d.s(4);">节点 1.1.1</a>
-
</div>
-
<!-- 节点 2 -->
-
<div class="dTreeNode">
-
<img src="img/joinbottom.gif" alt="" />
-
<img id="id2" src="img/page.gif" alt="" />
-
<a id="sd2" class="node" href="node2.html" onclick="javascript: d.s(2);">节点 2</a>
-
</div>
每个节点由两个<div>组成，第一个div (class="dTreeNode")描述当前节点，如节点显示文字、节点图标、图标前的加减号、连线等；第二个div （class="clip"）描述当前节点的子节点（包括子节点的子节点），注意div的样式 style="display:block;"，"block"表示显示div，也就是显示子节点，如果样式为 style="display:none;"，则隐藏div，也就隐藏了子节点，d.o()函数控制display样式的变换，也就相应实现了子节点的打开和关闭。
"节点 1.1.1" 和 "节点 2" 没有子节点，所以没有第二个<div>。
作者：diaoyf | 文章来源：http://programmerdigest.cn
在dTree中，树中的节点是一次生成的，但在一些应用场景中，节点数非常大，比如我国的行政区划中省、市县两级的数量就超千个，一次性的生成dTree树非常耗资源，速度也慢。针对这种情况需要“异步”构建树，比如在页面上先生成省、自治区的一级节点，当用鼠标点开某个“省”节点时，实时从后台获得该省下级的市县节点。
下面就一步步的完成这个对dTree的改造需求。
改造原则
我在这里要说明的是：不建议对dTree大改，因为改的越多风险越大，毕竟我们只是dTree的使用者，而不是开发者，特别在项目时间紧、压力大的环境中，迅速打造一个能用、稳定的控件尤其重要。
创建一级节点
这里的行政区划不规范，和国家规定的有出入，但作为示例程序比较好理解，从我所在的省份“陕西省”开始，省的下级有“陕北”、“关中”、“陕南”三个子集。
-
d = new dTree(’d‘); //创建树，名称为’d’
-
d.add(0,-1,’陕西省’);
-
d.add(1,0,’陕北’);
-
d.add(2,0,’关中’);
-
d.add(3,0,’陕南’);
-
document.write(d);
生成的页面显示：
在dTree中，如果一个节点没有子集，它的前面不会出现“＋”图标，我们希望在红色标记处形有“＋”或“－”图标，这样就可以动态的从后台获取他们的子集。查看d.add()函数的实现代码：
-
dTree.prototype.add = function(id, pid, name, url, title, target, icon, iconOpen, open) {
-
//增加到节点数组的末尾
-
this.aNodes[this.aNodes.length] = new Node(id, pid, name, url, title, target, icon, iconOpen, open);
-
};
在add函数中，new了一个节点对象，aNodes是dTree中的节点数组，下标“this.aNodes.length”是数组末尾的下一个，表示在数组最后增加一个节点。将上面的代码改动一下：
-
d = new dTree(’d‘);
-
d.add(0,-1,’陕西省’);
-
-
//陕北
-
var shanbei = new Node(1,0,’<input type=/"checkbox/" name=/"where/" value=/"1/">陕北’);
-
shanbei._hc = true; //有子节点
-
d.aNodes[d.aNodes.length] = shanbei; //加入到树
-
//关中
-
var guanzhong = new Node(2,0,’<input type=/"checkbox/" name=/"where/" value=/"2/">关中’);
-
guanzhong._hc = true;
-
d.aNodes[d.aNodes.length] = guanzhong;
-
//陕南
-
var shannan = new Node(3,0,’<input type=/"checkbox/" name=/"where/" value=/"3/">陕南’);
-
shannan._hc = true;
-
d.aNodes[d.aNodes.length] = shannan;
-
-
document.write(d);
先new出节点对象，将对象的”_hc”属性置为true，表示有子节点，形成的页面显示如下（手工点开了“关中”节点）：
点击“显示html”按钮，观察一下树的html结构：
-
<div class="dtree">
-
<div class="dTreeNode">
-
<img id="id0" src="img/base.gif" alt="" />陕西省</a>
-
</div>
-
<div id="dd0" class="clip" style="display:block;">
-
<div class="dTreeNode">
-
<a href="javascript: d.o(1);"><img id="jd1" src="img/plus.gif" alt="" /></a>
-
<img id="id1" src="img/folder.gif" alt="" />
-
<a href="javascript: d.o(1);" class="node"><input type="checkbox" name="where" value="1">陕北</a>
-
</div>
-
<div id="dd1" class="clip" style="display:none;"></div>
-
<div class="dTreeNode"><a href="javascript: d.o(2);">
-
<img id="jd2" src="img/minus.gif" alt="" /></a>
-
<img id="id2" src="img/folderopen.gif" alt="" />
-
<a href="javascript: d.o(2);" class="node"><input type="checkbox" name="where" value="2">关中</a>
-
</div>
-
<div id="dd2" class="clip" style="display:block;"></div>
-
<div class="dTreeNode">
-
<a href="javascript: d.o(3);"><img id="jd3" src="img/plusbottom.gif" alt="" /></a>
-
<img id="id3" src="img/folder.gif" alt="" />
-
<a href="javascript: d.o(3);" class="node"><input type="checkbox" name="where" value="3">陕南</a>
-
</div>
-
<div id="dd3" class="clip" style="display:none;"></div>
-
</div>
-
</div>
“关中”有子节点div标签，<div id=”dd2″ class=”clip” style=”display:block;”></div>，但没有内部子节点内容。
动态获取下级节点
节点的打开和关闭是由d.o()函数控制的，下来需要对d.o()函数做点小改动，先观察o函数的原始代码（我加上了注释）：
-
//———————————
-
// dTree对象的o()方法
-
// 打开或关闭指定节点
-
// 参数id： 节点ID
-
//———————————
-
dTree.prototype.o = function(id) {
-
//id对应的节点对象
-
var cn = this.aNodes[id];
-
//html变化
-
this.nodeStatus(!cn._io, id, cn._ls);
-
//open状态反转
-
cn._io = !cn._io;
-
//关闭同级别节点
-
if (this.config.closeSameLevel) this.closeLevel(cn);
-
//状态更新保存在cookies
-
if (this.config.useCookies) this.updateCookie();
-
};
下面是改动后的代码：
-
//———————————
-
// dTree对象的o()方法
-
// 打开或关闭指定节点
-
// 参数id： 节点ID
-
//———————————
-
dTree.prototype.o = function(id) {
-
//示例程序只处理“关中”的子集
-
if (id == 2){
-
//子节点标签, “关中”子节点div的id是"dd2"
-
var subDIV = document.getElementById("dd" + id);
-
-
//判断子节点标签是否有内容，如果没有内容就从“后台”动态获取，
-
//如果有内容则跳过，这样只在第一次打开节点时获取“后台”数据。
-
if(subDIV != null && !subDIV.hasChildNodes())
-
{
-
//一般通过Ajax从后台获取子集信息，示例程序省略了。
-
//假定从后台获取“关中”的子节点信息为：
-
// 有两个子节点：“西安”节点id=5，有子节点；“咸阳”id=6，无子节点（叶子节点）
-
-
//构造西安节点
-
var xian = new Node(5,id,’<input type=/"checkbox/" name=/"where/" value=/"5/">西 安’);
-
xian._hc = true; //有子节点
-
this.aNodes[this.aNodes.length] = xian; //加入到树
-
-
//构造咸阳节点
-
var xianyang = new Node(6,id,’<input type=/"checkbox/" name=/"where/" value=/"6/">咸阳’);
-
xianyang._hc = false; //无子节点
-
this.aNodes[this.aNodes.length] = xianyang; //加入到树
-
}
-
}
-
-
//id对应的节点对象
-
var cn = this.aNodes[id];
-
//html变化
-
this.nodeStatus(!cn._io, id, cn._ls);
-
//open状态反转
-
cn._io = !cn._io;
-
//关闭同级别节点
-
if (this.config.closeSameLevel) this.closeLevel(cn);
-
//状态更新保存在cookies
-
if (this.config.useCookies) this.updateCookie();
-
};
o函数中增加的的代码模拟了从后台获得“关中”子节点，在一般的应用中通常是通过Ajax技术来获取动态内容，Ajax的实现种类很多，所以这里只模拟而不演示具体的。
不论从后台通过何种技术来动态获取，获取信息必须要包括：
1. 子节点的ID
2. 子节点的名称
3. 子节点是否有下级
20－28行，根据从“后台”获得的子节点信息，在树中添加“西安”和“咸阳”两个节点，但遗憾的是，点开“关中”节点时并没有出现预想的状况，和o函数修改前没什么变化。
同步更新DOM
点击“显示html”按钮，在alret对话框中“关中”子节点的<div>中已经出现了“西安”和“咸阳”的标签代码，页面不响应是因为dTree的实现是基于html的，而不是基于DOM的，当语句 document.write(d); 将树html输出给浏览器后，再去改变”d”的内容，浏览器是不响应的，要达到我们的目的，需要一点技巧：
-
<html>
-
<head>
-
<link rel="StyleSheet" href="dtree.css" type="text/css" />
-
<script type="text/javascript" src="dtree.js"></script>
-
<script type="text/javascript">
-
<!–
-
function show()
-
{
-
alert(d.toString());
-
}
-
//–>
-
</script>
-
</head>
-
<body>
-
<div id="mydTree">
-
<script type="text/javascript">
-
<!–
-
d = new dTree(‘d’);
-
d.add(0,-1,‘陕西省’,null,null,null,‘img/globe.gif’);
-
-
//陕北
-
var shanbei = new Node(1,0,‘<input type=/”checkbox/” name=/”where/” value=/”1/”>陕北’);
-
shanbei._hc = true; //有子节点
-
d.aNodes[d.aNodes.length] = shanbei; //加入到树
-
//关中
-
var guanzhong = new Node(2,0,‘<input type=/”checkbox/” name=/”where/” value=/”2/”>关中’);
-
guanzhong._hc = true;
-
d.aNodes[d.aNodes.length] = guanzhong;
-
//陕南
-
var shannan = new Node(3,0,‘<input type=/”checkbox/” name=/”where/” value=/”3/”>陕南’);
-
shannan._hc = true;
-
d.aNodes[d.aNodes.length] = shannan;
-
-
document.write(d);
-
-
//–>
-
</script>
-
</div>
-
-
<input type="button" value="显示html" onclick="show()">
-
</body>
在dTree输出的外面包了一层div标签，就是那个 id=”mydTree” 的div标签，然后在o函数中增加一句：
-
……
-
//构造咸阳节点
-
var xianyang = new Node(6,id,’<input type=/"checkbox/" name=/"where/" value=/"6/">咸阳’);
-
xianyang._hc = false; //无子节点
-
this.aNodes[this.aNodes.length] = xianyang; //加入到树
-
-
//同步修改DOM
-
document.getElementById("mydTree").innerHTML = this.toString();
-
}
-
}
-
-
//id对应的节点对象
-
-
var cn = this.aNodes[id];
-
……
-
至此，完成“异步”dTree树的改造，页面显示效果如下：
以上代码，通过了Firefox3.5和IE8.0的测试。
原文的网址见：http://programmerdigest.cn/2009/12/607.html
- 顶
- 1
- 踩
- 0
- 猜你在找
关闭
查看评论
- 2楼 lq421102 2010-10-23 20:34发表 [回复]
- 很详细 真心感谢！
- 1楼 ScarStone 2010-10-20 14:38发表 [回复]
- [e01]在么？？请问当选中后 单击改成双击怎么改啊！！！？？急！！谢啦！
您还没有登录,请[登录]或[注册]
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
核心技术类目
全部主题
Hadoop
AWS
移动游戏
Java
Android
iOS
Swift
智能硬件
Docker
OpenStack
VPN
Spark
ERP
IE10
Eclipse
CRM
JavaScript
数据库
Ubuntu
NFC
WAP
jQuery
BI
HTML5
Spring
Apache
.NET
API
HTML
SDK
IIS
Fedora
XML
LBS
Unity
Splashtop
UML
components
Windows Mobile
Rails
QEMU
KDE
Cassandra
CloudStack
FTC
coremail
OPhone
CouchBase
云计算
iOS6
Rackspace
Web App
SpringSide
Maemo
Compuware
大数据
aptech
Perl
Tornado
Ruby
Hibernate
ThinkPHP
HBase
Pure
Solr
Angular
Cloud Foundry
Redis
Scala
Django
Bootstrap
- 文章搜索
- 文章分类
- Ajax(7)
- hibernate(6)
- java 基础(24)
- javaScript(23)
- ldap(11)
- servlet and jsp(12)
- spring(3)
- struts2(6)
- webservice(6)
- XML(3)
- 开发工具(3)
- 数据库相关(14)
- 第三方工具、 插件的使用(17)
- css样式 页面布局(7)
- 开发工具 CVS eclipse myeclipse(1)
- sso(1)
- ibatis(mybatis)(4)
- maven(2)
- android(5)
- 项目管理(3)
- linux(3)
- 缓存框架(1)
- HTML5(0)
- IOS(1)
-
阅读排行
- Quartz中时间表达式的设置-----corn表达式(28713)
- ldap 身份验证的通用步骤(22370)
- Maven下使用Jetty进行Debug(21346)
- java.lang.IllegalStateException 解决办法(20310)
- Android 代码设置RelativeLayout元素居中(13414)
- 解決BufferedReader BufferedWrite 读写UTF-8文件中文乱码(12047)
- java.lang.IllegalStateException: STREAM错误的理解(11760)
- firefox uploadify http 302 error(10565)
- 导入开源项目后报：1 Caused by: java.lang.ClassNotFoundException: Didn‘t find class "net.oschina.app.AppContex(9923)
- spring 通过配置向quartz 注入service(9190)
- 评论排行
- firefox uploadify http 302 error(4)
- 解决 struts2 配置文件不自动提示(4)
- ldap 身份验证的通用步骤(3)
- 导入开源项目后报：1 Caused by: java.lang.ClassNotFoundException: Didn‘t find class "net.oschina.app.AppContex(3)
- dtree详细资料(2)
- java.lang.IllegalStateException: STREAM错误的理解(2)
- SpringLDAP-Reference （中文文档五）(2)
- Quartz中时间表达式的设置-----corn表达式(2)
- Maven下使用Jetty进行Debug(2)
- java.lang.IllegalStateException 解决办法(2)
- 推荐文章
- 最新评论
-
Quartz中时间表达式的设置-----corn表达式
luoqinglong850102: 确定是“corn表达式”，不是"cron 表达式"？？？
-
java.lang.IllegalStateException 解决办法
caizr: 加了return但是还是有错误
-
Windows下安装使用OpenLDAP
a734098339: 哎，7年前的东西了，好多都失效了
-
firefox uploadify http 302 error
nijiejintianbuzaijia: 我用的springMVC 不好使，各地方都看了，都说这样写，可就是不行……………………
-
java.lang.IllegalStateException: STREAM错误的理解
r131303: 为啥我的response.getWriter没有out.clear()这个函数？
-
java.lang.IllegalStateException: STREAM错误的理解
qq_33245075: 问题解决了，多谢
-
ldap 身份验证的通用步骤
qq_23399975: 您好，为什么不用用户名和密码直接去检索呢，是密码加密只有绑定时LDAP才去加密验证，检索是不会加密后...
- 导入开源项目后报：1 Caused by: java.lang.ClassNotFoundException: Didn‘t find class "net.oschina.app.AppContex
-
TabHost、RadioGroup实现底部菜单导航
baidu_33372335: 我想问下，点击到最后一个RadioGroup 后，tabhost为什么不见了
-
Quartz中时间表达式的设置-----corn表达式
fhcgogo: **************************************************...
- 网站客服杂志客服微博客服[email protected]400-660-0108|北京创新乐知信息技术有限公司 版权所有|江苏知之为计算机有限公司|江苏乐知网络技术有限公司
- 京 ICP 证 09002463 号|Copyright ? 1999-2017, CSDN.NET, All Rights Reserved
分类：作者：diaoyf | 文章来源：http://programmerdigest.cn
dTree是一个免费的JavaScript树形菜单，使用简单，界面制作的也很专业。
dtree树形菜单
所谓“兵无常势，水无常形”，不同的项目需求，造成菜单树的各种变化，因此在介绍dTree的同时，本文着重讲述如何改造dTree，以达到为不同项目所用的目的。
dTree 分析
dTree的使用非常简单，在下载的dTree压缩文件中（2.05），要用的只有三个：
1. dtree.js : dtree功能脚本
2. dtree.css : 样式文件
3. img文件夹 : 存放dtree使用的图标，参看下图：
dtree图标
很容易就可以编写出类似上面的dtree菜单树，源代码如下：
-
<html>
-
<head>
-
<link rel="StyleSheet" href="dtree.css" type="text/css" />
-
<script type="text/javascript" src="dtree.js"></script>
-
</head>
-
<body>
-
<script type="text/javascript">
-
<!–
-
d = new dTree(‘d’); //创建树，名称为’d‘（注意和树的对象变量名称要一致）
-
d.add(0,-1,‘My example tree’); //在树中增加节点。节点id是0，父节点是-1(根节点)，节点文字’My example tree’
-
d.add(1,0,‘Node 1′,‘default.html’); //根节点的子节点(父节点是0)，’default.html’表示节点链接(鼠标点击页面跳转url)
-
d.add(2,0,‘Node 2′,‘default.html’);
-
d.add(3,1,‘Node 1.1′,‘default.html’);
-
d.add(4,0,‘Node 3′,‘default.html’);
-
d.add(5,3,‘Node 1.1.1′,‘default.html’);
-
d.add(6,5,‘Node 1.1.1.1′,‘default.html’);
-
d.add(7,0,‘Node 4′,‘default.html’);
-
d.add(8,1,‘Node 1.2′,‘default.html’);
-
d.add(9,0,‘My Pictures’,‘default.html’,‘Pictures I/’ve taken over the years’,”,”,‘img/imgfolder.gif’); //’Pictures I/’ve taken over the years’是链接title，指定图标
-
d.add(10,9,‘The trip to Iceland’,‘default.html’,‘Pictures of Gullfoss and Geysir’);
-
d.add(11,9,‘Mom/’s birthday’,‘default.html’);
-
d.add(12,0,‘Recycle Bin’,‘default.html’,”,”,‘img/trash.gif’);
-
document.write(d); //输出dtree的html（显示）
-
//–>
-
</script>
-
</body>
-
</html>
分析dtree.js，在dTree中只有两个结构：”节点”和”树”，dTree的所有功能和构造都在于这两个结构的属性和行为中，Node比较简单，只包含节点的基本属性和一个构造方法，所以对dTree的分析和研究的重点可放在dTree结构中。
<!--#uml-class{width:450px;background:#FFFFCE;border-collapse:collapse;}#uml-class th{border:1px solid #000;font-size:14pt;}#uml-class td{border:1px solid #000;font-size:10pt;}#uml-class td ul{list-style-type:circle;}#uml-class td ul li{margin:0px 0px 0px -10px;font-family:Monospace;}#uml-class td ul li a{text-decoration:none;color:#000;}#uml-class td ul li a:hover{border-bottom:1px dotted;}#uml-class td ul li span{display:none;color:#666;border:1px dotted #000;}-->
| Node |
|---|
|
Attributes(属性)
|
|
Operations(行为)
|
节点类图
| dTree |
|---|
|
Attributes(属性)
|
|
Operations(行为)
|
树类图
提示：
鼠标移动到类图中的属性或方法上时，会显示详细信息。
dTree的工作原理
类似dTree这样的动态的客户端web插件，实现起来基本离不开xhtml和javascript，用一段简单的代码来探索一下dTree的工作原理：
-
<html>
-
<head>
-
<link rel="StyleSheet" href="dtree.css" type="text/css" />
-
<script type="text/javascript" src="dtree.js"></script>
-
</head>
-
<body>
-
<script type="text/javascript">
-
<!--
-
d = new dTree(‘d‘); //创建树，名称为‘d‘
-
d.add(0,-1,‘根节点‘);
-
d.add(1,0,‘节点 1‘,‘node1.html‘);
-
d.add(2,0,‘节点 2‘,‘node2.html‘);
-
d.add(3,1,‘节点 1.1‘,‘node1_1.html‘);
-
d.add(4,3,‘节点 1.1.1‘,‘node1_1_1.html‘);
-
document.write(d);
-
-
function show()
-
{
-
alert(d);
-
}
-
//-->
-
</script>
-
-
<input type="button" value="显示html" onclick="show()">
-
</body>
-
</html>
显示的“树”如下图：
点击下方的“显示html”按钮，会在alert对话框中显示整个树的html代码，整理后如下：
-
<div class="dtree">
-
<div class="dTreeNode">
-
<img id="id0" src="img/base.gif" alt="" />根节点</a>
-
</div>
-
<div id="dd0" class="clip" style="display:block;">
-
<div class="dTreeNode">
-
<a href="javascript: d.o(1);"><img id="jd1" src="img/minus.gif" alt="" /></a>
-
<img id="id1" src="img/folderopen.gif" alt="" />
-
<a href="javascript: d.o(1);" class="node">节点 1</a>
-
</div>
-
<div id="dd1" class="clip" style="display:block;">
-
<div class="dTreeNode">
-
<img src="img/line.gif" alt="" />
-
<a href="javascript: d.o(3);"><img id="jd3" src="img/minusbottom.gif" alt="" /></a>
-
<img id="id3" src="img/folderopen.gif" alt="" />
-
<a href="javascript: d.o(3);" class="node">节点 1.1</a>
-
</div>
-
<div id="dd3" class="clip" style="display:block;">
-
<div class="dTreeNode">
-
<img src="img/line.gif" alt="" />
-
<img src="img/empty.gif" alt="" />
-
<img src="img/joinbottom.gif" alt="" />
-
<img id="id4" src="img/page.gif" alt="" />
-
<a id="sd4" class="node" href="node1_1_1.html" onclick="javascript: d.s(4);">节点 1.1.1</a>
-
</div>
-
</div>
-
</div>
-
<div class="dTreeNode">
-
<img src="img/joinbottom.gif" alt="" />
-
<img id="id2" src="img/page.gif" alt="" />
-
<a id="sd2" class="node" href="node2.html" onclick="javascript: d.s(2);">节点 2</a>
-
</div>
-
</div>
-
</div>
仔细观察，树中每个节点的html构造是相似的：
-
<!-- 根节点 -->
-
<div class="dTreeNode">
-
<img id="id0" src="img/base.gif" alt="" />根节点</a>
-
</div>
-
<div id="dd0" class="clip" style="display:block;">
-
......
-
</div>
-
<!-- 节点 1 -->
-
<div class="dTreeNode">
-
<a href="javascript: d.o(1);"><img id="jd1" src="img/minus.gif" alt="" /></a>
-
<img id="id1" src="img/folderopen.gif" alt="" />
-
<a href="javascript: d.o(1);" class="node">节点 1</a>
-
</div>
-
<div id="dd1" class="clip" style="display:block;">
-
......
-
</div>
-
<!-- 节点 1.1 -->
-
<div class="dTreeNode">
-
<img src="img/line.gif" alt="" />
-
<a href="javascript: d.o(3);"><img id="jd3" src="img/minusbottom.gif" alt="" /></a>
-
<img id="id3" src="img/folderopen.gif" alt="" />
-
<a href="javascript: d.o(3);" class="node">节点 1.1</a>
-
</div>
-
<div id="dd3" class="clip" style="display:block;">
-
......
-
</div>
-
<!-- 节点 1.1.1 -->
-
<div class="dTreeNode">
-
<img src="img/line.gif" alt="" />
-
<img src="img/empty.gif" alt="" />
-
<img src="img/joinbottom.gif" alt="" />
-
<img id="id4" src="img/page.gif" alt="" />
-
<a id="sd4" class="node" href="node1_1_1.html" onclick="javascript: d.s(4);">节点 1.1.1</a>
-
</div>
-
<!-- 节点 2 -->
-
<div class="dTreeNode">
-
<img src="img/joinbottom.gif" alt="" />
-
<img id="id2" src="img/page.gif" alt="" />
-
<a id="sd2" class="node" href="node2.html" onclick="javascript: d.s(2);">节点 2</a>
-
</div>
每个节点由两个<div>组成，第一个div (class="dTreeNode")描述当前节点，如节点显示文字、节点图标、图标前的加减号、连线等；第二个div （class="clip"）描述当前节点的子节点（包括子节点的子节点），注意div的样式 style="display:block;"，"block"表示显示div，也就是显示子节点，如果样式为 style="display:none;"，则隐藏div，也就隐藏了子节点，d.o()函数控制display样式的变换，也就相应实现了子节点的打开和关闭。
"节点 1.1.1" 和 "节点 2" 没有子节点，所以没有第二个<div>。
作者：diaoyf | 文章来源：http://programmerdigest.cn
在dTree中，树中的节点是一次生成的，但在一些应用场景中，节点数非常大，比如我国的行政区划中省、市县两级的数量就超千个，一次性的生成dTree树非常耗资源，速度也慢。针对这种情况需要“异步”构建树，比如在页面上先生成省、自治区的一级节点，当用鼠标点开某个“省”节点时，实时从后台获得该省下级的市县节点。
下面就一步步的完成这个对dTree的改造需求。
改造原则
我在这里要说明的是：不建议对dTree大改，因为改的越多风险越大，毕竟我们只是dTree的使用者，而不是开发者，特别在项目时间紧、压力大的环境中，迅速打造一个能用、稳定的控件尤其重要。
创建一级节点
这里的行政区划不规范，和国家规定的有出入，但作为示例程序比较好理解，从我所在的省份“陕西省”开始，省的下级有“陕北”、“关中”、“陕南”三个子集。
-
d = new dTree(’d‘); //创建树，名称为’d’
-
d.add(0,-1,’陕西省’);
-
d.add(1,0,’陕北’);
-
d.add(2,0,’关中’);
-
d.add(3,0,’陕南’);
-
document.write(d);
生成的页面显示：
在dTree中，如果一个节点没有子集，它的前面不会出现“＋”图标，我们希望在红色标记处形有“＋”或“－”图标，这样就可以动态的从后台获取他们的子集。查看d.add()函数的实现代码：
-
dTree.prototype.add = function(id, pid, name, url, title, target, icon, iconOpen, open) {
-
//增加到节点数组的末尾
-
this.aNodes[this.aNodes.length] = new Node(id, pid, name, url, title, target, icon, iconOpen, open);
-
};
在add函数中，new了一个节点对象，aNodes是dTree中的节点数组，下标“this.aNodes.length”是数组末尾的下一个，表示在数组最后增加一个节点。将上面的代码改动一下：
-
d = new dTree(’d‘);
-
d.add(0,-1,’陕西省’);
-
-
//陕北
-
var shanbei = new Node(1,0,’<input type=/"checkbox/" name=/"where/" value=/"1/">陕北’);
-
shanbei._hc = true; //有子节点
-
d.aNodes[d.aNodes.length] = shanbei; //加入到树
-
//关中
-
var guanzhong = new Node(2,0,’<input type=/"checkbox/" name=/"where/" value=/"2/">关中’);
-
guanzhong._hc = true;
-
d.aNodes[d.aNodes.length] = guanzhong;
-
//陕南
-
var shannan = new Node(3,0,’<input type=/"checkbox/" name=/"where/" value=/"3/">陕南’);
-
shannan._hc = true;
-
d.aNodes[d.aNodes.length] = shannan;
-
-
document.write(d);
先new出节点对象，将对象的”_hc”属性置为true，表示有子节点，形成的页面显示如下（手工点开了“关中”节点）：
点击“显示html”按钮，观察一下树的html结构：
-
<div class="dtree">
-
<div class="dTreeNode">
-
<img id="id0" src="img/base.gif" alt="" />陕西省</a>
-
</div>
-
<div id="dd0" class="clip" style="display:block;">
-
<div class="dTreeNode">
-
<a href="javascript: d.o(1);"><img id="jd1" src="img/plus.gif" alt="" /></a>
-
<img id="id1" src="img/folder.gif" alt="" />
-
<a href="javascript: d.o(1);" class="node"><input type="checkbox" name="where" value="1">陕北</a>
-
</div>
-
<div id="dd1" class="clip" style="display:none;"></div>
-
<div class="dTreeNode"><a href="javascript: d.o(2);">
-
<img id="jd2" src="img/minus.gif" alt="" /></a>
-
<img id="id2" src="img/folderopen.gif" alt="" />
-
<a href="javascript: d.o(2);" class="node"><input type="checkbox" name="where" value="2">关中</a>
-
</div>
-
<div id="dd2" class="clip" style="display:block;"></div>
-
<div class="dTreeNode">
-
<a href="javascript: d.o(3);"><img id="jd3" src="img/plusbottom.gif" alt="" /></a>
-
<img id="id3" src="img/folder.gif" alt="" />
-
<a href="javascript: d.o(3);" class="node"><input type="checkbox" name="where" value="3">陕南</a>
-
</div>
-
<div id="dd3" class="clip" style="display:none;"></div>
-
</div>
-
</div>
“关中”有子节点div标签，<div id=”dd2″ class=”clip” style=”display:block;”></div>，但没有内部子节点内容。
动态获取下级节点
节点的打开和关闭是由d.o()函数控制的，下来需要对d.o()函数做点小改动，先观察o函数的原始代码（我加上了注释）：
-
//———————————
-
// dTree对象的o()方法
-
// 打开或关闭指定节点
-
// 参数id： 节点ID
-
//———————————
-
dTree.prototype.o = function(id) {
-
//id对应的节点对象
-
var cn = this.aNodes[id];
-
//html变化
-
this.nodeStatus(!cn._io, id, cn._ls);
-
//open状态反转
-
cn._io = !cn._io;
-
//关闭同级别节点
-
if (this.config.closeSameLevel) this.closeLevel(cn);
-
//状态更新保存在cookies
-
if (this.config.useCookies) this.updateCookie();
-
};
下面是改动后的代码：
-
//———————————
-
// dTree对象的o()方法
-
// 打开或关闭指定节点
-
// 参数id： 节点ID
-
//———————————
-
dTree.prototype.o = function(id) {
-
//示例程序只处理“关中”的子集
-
if (id == 2){
-
//子节点标签, “关中”子节点div的id是"dd2"
-
var subDIV = document.getElementById("dd" + id);
-
-
//判断子节点标签是否有内容，如果没有内容就从“后台”动态获取，
-
//如果有内容则跳过，这样只在第一次打开节点时获取“后台”数据。
-
if(subDIV != null && !subDIV.hasChildNodes())
-
{
-
//一般通过Ajax从后台获取子集信息，示例程序省略了。
-
//假定从后台获取“关中”的子节点信息为：
-
// 有两个子节点：“西安”节点id=5，有子节点；“咸阳”id=6，无子节点（叶子节点）
-
-
//构造西安节点
-
var xian = new Node(5,id,’<input type=/"checkbox/" name=/"where/" value=/"5/">西 安’);
-
xian._hc = true; //有子节点
-
this.aNodes[this.aNodes.length] = xian; //加入到树
-
-
//构造咸阳节点
-
var xianyang = new Node(6,id,’<input type=/"checkbox/" name=/"where/" value=/"6/">咸阳’);
-
xianyang._hc = false; //无子节点
-
this.aNodes[this.aNodes.length] = xianyang; //加入到树
-
}
-
}
-
-
//id对应的节点对象
-
var cn = this.aNodes[id];
-
//html变化
-
this.nodeStatus(!cn._io, id, cn._ls);
-
//open状态反转
-
cn._io = !cn._io;
-
//关闭同级别节点
-
if (this.config.closeSameLevel) this.closeLevel(cn);
-
//状态更新保存在cookies
-
if (this.config.useCookies) this.updateCookie();
-
};
o函数中增加的的代码模拟了从后台获得“关中”子节点，在一般的应用中通常是通过Ajax技术来获取动态内容，Ajax的实现种类很多，所以这里只模拟而不演示具体的。
不论从后台通过何种技术来动态获取，获取信息必须要包括：
1. 子节点的ID
2. 子节点的名称
3. 子节点是否有下级
20－28行，根据从“后台”获得的子节点信息，在树中添加“西安”和“咸阳”两个节点，但遗憾的是，点开“关中”节点时并没有出现预想的状况，和o函数修改前没什么变化。
同步更新DOM
点击“显示html”按钮，在alret对话框中“关中”子节点的<div>中已经出现了“西安”和“咸阳”的标签代码，页面不响应是因为dTree的实现是基于html的，而不是基于DOM的，当语句 document.write(d); 将树html输出给浏览器后，再去改变”d”的内容，浏览器是不响应的，要达到我们的目的，需要一点技巧：
-
<html>
-
<head>
-
<link rel="StyleSheet" href="dtree.css" type="text/css" />
-
<script type="text/javascript" src="dtree.js"></script>
-
<script type="text/javascript">
-
<!–
-
function show()
-
{
-
alert(d.toString());
-
}
-
//–>
-
</script>
-
</head>
-
<body>
-
<div id="mydTree">
-
<script type="text/javascript">
-
<!–
-
d = new dTree(‘d’);
-
d.add(0,-1,‘陕西省’,null,null,null,‘img/globe.gif’);
-
-
//陕北
-
var shanbei = new Node(1,0,‘<input type=/”checkbox/” name=/”where/” value=/”1/”>陕北’);
-
shanbei._hc = true; //有子节点
-
d.aNodes[d.aNodes.length] = shanbei; //加入到树
-
//关中
-
var guanzhong = new Node(2,0,‘<input type=/”checkbox/” name=/”where/” value=/”2/”>关中’);
-
guanzhong._hc = true;
-
d.aNodes[d.aNodes.length] = guanzhong;
-
//陕南
-
var shannan = new Node(3,0,‘<input type=/”checkbox/” name=/”where/” value=/”3/”>陕南’);
-
shannan._hc = true;
-
d.aNodes[d.aNodes.length] = shannan;
-
-
document.write(d);
-
-
//–>
-
</script>
-
</div>
-
-
<input type="button" value="显示html" onclick="show()">
-
</body>
在dTree输出的外面包了一层div标签，就是那个 id=”mydTree” 的div标签，然后在o函数中增加一句：
-
……
-
//构造咸阳节点
-
var xianyang = new Node(6,id,’<input type=/"checkbox/" name=/"where/" value=/"6/">咸阳’);
-
xianyang._hc = false; //无子节点
-
this.aNodes[this.aNodes.length] = xianyang; //加入到树
-
-
//同步修改DOM
-
document.getElementById("mydTree").innerHTML = this.toString();
-
}
-
}
-
-
//id对应的节点对象
-
-
var cn = this.aNodes[id];
-
……
-
至此，完成“异步”dTree树的改造，页面显示效果如下：
以上代码，通过了Firefox3.5和IE8.0的测试。
原文的网址见：http://programmerdigest.cn/2009/12/607.html
- 顶
- 1
- 踩
- 0
- 猜你在找