首页 > 代码库 > dTree无限级目录树和JQuery同步Ajax请求

dTree无限级目录树和JQuery同步Ajax请求

2024-07-29 23:39:24   220人阅读

以前都是用JQuery对树的支持来实现目录树的，近来闲来无事就弄了下dTree，感觉其无限级目录还是挺好的，而且它的使用也比较方便，基本上就是先把要用的js文件即dtree.js和css文件dtree.css引入，另外就是它默认的图片，当然这些图片都是可以自己指定的，它的css样式也可以自己改变的！

 

关于dTree就先谈谈它的node，dTree的node的构造方法可以指定下列参数，

Js代码
 收藏代码
  1. id //唯一标识，数字型  
  2. pid//父节点的id，如果是根结点那就只能是-1，一般来讲只有一个最顶层的根结点   
  3. name//结点的名字，字符串类型，在页面上显示出来的标签.   
  4. url//字符串类型，表示当点击该叶子结点的时候访问哪个URL.   
  5. title//title,字符串类型，鼠标进入时显示的字符串.   
  6. target//字符串类型，超链接的目标位置.   
  7. icon //字符串类型，表示该结点图标的图片路径，不指定则使用默认的  
  8. iconOpen//结点打开时候的图片路径，不指定则使用默认的   
  9. open//boolean类型，表示初始状态是否是打开的   

 如：

Js代码
 收藏代码
  1. mytree.add(1, 0, ‘My node‘, ‘node.html‘, ‘node title‘, ‘mainframe‘, ‘img/musicfolder.gif‘);  

 

 

有了node以后就是构建树了

Java代码
 收藏代码
  1. //引入了dtree.js后，就可以使用new dTree()了  
  2. myTree = new dTree();//这样就新建了一个dTree了，  
  3. //新建了dTree以后就是把刚建的node给添进去了，  
  4. mytree.add(1, 0, ‘My node‘, ‘node.html‘, ‘node title‘, ‘mainframe‘, ‘img/musicfolder.gif‘);  

 

在最后还可以指定一些配置参数：

 

Js代码
 收藏代码
  1. target//所有结点的目标   
  2. folderLinks//非叶子结点是否也是可以链接的，默认是true   
  3. useSelection//结点是否可以被选择，默认true.   
  4. useCookies//是否使用cookies来记录当前树的状态，默认是true   
  5. useLines//是否用线来画树，默认是true   
  6. useIcons//是否使用图标来构建树，默认是true   
  7. useStatusText//是否在状态栏显示结点的名字，而不是在URL的位置显示，默认是false  
  8. closeSameLevel//是否同时只能有一个文件夹处于打开状态，默认为false，当为true的时候关闭所有的文件夹和打开所有的文件夹将不会起作用  
  9. inOrder//是否先添加父结点再添加子节点，  默认为false，为true可以加快加载速度  
  10.   
  11. //例如:  
  12. mytree.config.target = "mytarget";  

 

像这些结点的相关信息，我们一般都是要从后台来得到的，或者从数据库，或者从配置文件，如果加上复杂的权限控制就得每次都到后台取一次了，
  而从后台得到这些数据的话一般常用的是以ajax请求取得json格式的数据，然后在页面上就可以非常方便的使用了，但是使用ajax请求的时候
  就会有一个问题出现了，那就是一般的ajax请求都是异步的，这时候，页面不会等ajax的请求返回就已经往下面执行了，等ajax请求返回的时候
  页面已经不能再使用其返回的数据进行操作了，所以这个时候需要使用ajax的同步请求了！ajax的同步请求很简单只要在ajax的请求的时候加上一个
  区别于ajax请求类型的参数就行了，一般都是async，像JQuery的用法就是这样的：

Java代码
 收藏代码
  1. $.ajax( {  
  2.                 url : "module/geneMenu",  
  3.                 async : false//同步，等这个请求完成后才继续往下执行,这样myTree才能使用返回来的数据  
  4.             });  

 使用了ajax的同步请求以后，页面在解析到ajax请求的时候就会等ajax请求返回以后再继续往下面执行，这样就可以利用
  ajax的返回值来进行对dTree的node的操作了！

 

还有一个问题就是我们常常会利用Frame来将页面进行布局成左边是menu栏，而右边是主页面，上边是一些基本信息这样的结构
  这样我们就需要在点击menu栏的叶子结点时，在mainFrame里面显示请求返回后的内容，其实要实现这个要求挺简单的，只需要
  把node的target指定为mainFrame的name即可

 

下面是一段完整的代码：

Html代码
 收藏代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.     <head>  
  4.         <title>menu</title>  
  5.   
  6.         <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  7.         <meta http-equiv="description" content="this is my page">  
  8.         <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  9.   
  10.         <!--<link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"./styles.css">-->  
  11.         <link rel="stylesheet" type="text/css" href="css/dtree.css">  
  12.         <style type="text/css">  
  13.             html,body {  
  14.                 background:#afa;  
  15.             }  
  16.         </style>  
  17.         <script type="text/javascript" src="js/dtree.js"></script>  
  18.         <script type="text/javascript" src="js/jquery.js"></script>  
  19.     </head>  
  20.   
  21.     <body>  
  22.         <div>  
  23.         <script type="text/javascript">  
  24.           
  25.             myTree = new dTree(‘myTree‘);  
  26.             $.ajax( {  
  27.                 url : "module/geneMenu",  
  28.                 async : false,//同步，等这个请求完成后才继续往下执行,这样myTree才能使用返回来的数据  
  29.                 dataType: "json",  
  30.                 success: function(myData) {  
  31.                     for ( var i = 0; i < myData.length; i++) {  
  32.                         var obj = myData[i];  
  33.                         //right是window.parent的一个frame的name  
  34.                         myTree.add(obj.id, obj.parentId, obj.name, obj.url, obj.name, "right");  
  35.                     }  
  36.                     document.write(myTree);  
  37.                 }  
  38.             });  
  39.             myTree.config.target = "right";//right是window.parent的一个frame的name  
  40.             myTree.config.useCookies = false;  
  41.             myTree.config.inOrder = true;  
  42.               
  43.         </script>  
  44.         </div>  
  45.     </body>  
  46. </html>  

 

dTree无限级目录树和JQuery同步Ajax请求


联系
我们