曾经都是用JQuery对树的支持来实现文件夹树的，近来闲来无事就弄了下dTree，感觉其无限级文件夹还是挺好的，并且它的使用也比較方便，基本上就是先把要用的js文件即dtree.js和css文件dtree.css引入，另外就是它默认的图片。当然这些图片都是能够自己指定的，它的css样式也能够自己改变的。
关于dTree就先谈谈它的node，dTree的node的构造方法能够指定下列參数，
-
id
-
pid
-
name
-
url
-
title
-
target
-
icon
-
iconOpen
-
open
如：
-
mytree.add(1, 0, ‘My node‘, ‘node.html‘, ‘node title‘, ‘mainframe‘, ‘img/musicfolder.gif‘);
有了node以后就是构建树了
-
-
myTree = new dTree();
-
-
mytree.add(1, 0, ‘My node‘, ‘node.html‘, ‘node title‘, ‘mainframe‘, ‘img/musicfolder.gif‘);
在最后还能够指定一些配置參数：
-
target
-
folderLinks
-
useSelection
-
useCookies
-
useLines
-
useIcons
-
useStatusText
-
closeSameLevel
-
inOrder
-
-
-
mytree.config.target = "mytarget";
像这些结点的相关信息，我们一般都是要从后台来得到的，或者从数据库。或者从配置文件，假设加上复杂的权限控制就得每次都到后台取一次了，
而从后台得到这些数据的话一般经常使用的是以ajax请求取得json格式的数据。然后在页面上就能够很方便的使用了，可是使用ajax请求的时候
就会有一个问题出现了，那就是一般的ajax请求都是异步的。这时候。页面不会等ajax的请求返回就已经往以下运行了，等ajax请求返回的时候
页面已经不能再使用其返回的数据进行操作了。所以这个时候须要使用ajax的同步请求了！ajax的同步请求非常easy仅仅要在ajax的请求的时候加上一个
差别于ajax请求类型的參数即可了，一般都是async。像JQuery的使用方法就是这种：
-
$.ajax( {
-
url : "module/geneMenu",
-
async : false
-
});
使用了ajax的同步请求以后，页面在解析到ajax请求的时候就会等ajax请求返回以后再继续往以下运行，这样就能够利用
ajax的返回值来进行对dTree的node的操作了！
另一个问题就是我们经常会利用Frame来将页面进行布局成左边是menu栏，而右边是主页面，上边是一些基本信息这种结构
这样我们就须要在点击menu栏的叶子结点时，在mainFrame里面显示请求返回后的内容，事实上要实现这个要求挺简单的，仅仅须要
把node的target指定为mainFrame的name就可以
以下是一段完整的代码：
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
-
<html>
-
<head>
-
<title>menu</title>
-
-
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
-
<meta http-equiv="description" content="this is my page">
-
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
-
-
-
<link rel="stylesheet" type="text/css" href="css/dtree.css">
-
<style type="text/css">
-
html,body {
-
background:#afa;
-
}
-
</style>
-
<script type="text/javascript" src="js/dtree.js"></script>
-
<script type="text/javascript" src="js/jquery.js"></script>
-
</head>
-
-
<body>
-
<div>
-
<script type="text/javascript">
-
-
myTree = new dTree(‘myTree‘);
-
$.ajax( {
-
url : "module/geneMenu",
-
async : false,//同步，等这个请求完毕后才继续往下运行,这样myTree才干使用返回来的数据
-
dataType: "json",
-
success: function(myData) {
-
for ( var i = 0; i < myData.length; i++) {
-
var obj = myData[i];
-
//right是window.parent的一个frame的name
-
myTree.add(obj.id, obj.parentId, obj.name, obj.url, obj.name, "right");
-
}
-
document.write(myTree);
-
}
-
});
-
myTree.config.target = "right";//right是window.parent的一个frame的name
-
myTree.config.useCookies = false;
-
myTree.config.inOrder = true;
-
-
</script>
-
</div>
-
</body>
-
</html>
