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

关于dTree就先谈谈它的node，dTree的node的构造方法能够指定下列參数，

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

如：

  1. mytree.add(1, 0, 'My node', 'node.html', 'node title', 'mainframe', 'img/musicfolder.gif');

有了node以后就是构建树了

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

在最后还能够指定一些配置參数：

  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. mytree.config.target = "mytarget";

像这些结点的相关信息，我们一般都是要从后台来得到的，或者从数据库。或者从配置文件，假设加上复杂的权限控制就得每次都到后台取一次了，

  而从后台得到这些数据的话一般经常使用的是以ajax请求取得json格式的数据。然后在页面上就能够很方便的使用了，可是使用ajax请求的时候

  就会有一个问题出现了，那就是一般的ajax请求都是异步的。这时候。页面不会等ajax的请求返回就已经往以下运行了，等ajax请求返回的时候

  页面已经不能再使用其返回的数据进行操作了。所以这个时候须要使用ajax的同步请求了！ajax的同步请求非常easy仅仅要在ajax的请求的时候加上一个

  差别于ajax请求类型的參数即可了，一般都是async。像JQuery的使用方法就是这种：

  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就可以

以下是一段完整的代码：

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

dTree无限级文件夹树和JQuery同步Ajax请求的更多相关文章

  1. 关于在vscode中以https方式请求！不是以file文件夹访问！vscode中 ajax请求

    在vscode 头疼的问题是 用浏览器查看网页!会是以文件夹的方式打开的!  我遇到这个问题 我还重新配置了Apache    ! 但是现在可以解决: 使用vscode  ============== ...

  2. 使用dos的tree命令输出文件夹树

    用dos的tree命令就可以实现文件夹树状图的输出,不过目前仅能输出为.txt文件 方法如下: 开始->运行 输入cmd打开命令控制台 切换到你要显示的列表文件夹 比如 输入 d: 切换到d盘 ...

  3. Linux下的tree命令 --Linux下文件夹树查看

    Linux下的tree命令 --Linux下文件夹树查看 有时我们须要生成文件夹树结构,能够使用的有ls -R,可是实际效果并不好 这时须要用到tree命令,可是大部分Linux系统是默认不安装该命令 ...

  4. jQuery同步Ajax带来的UI线程阻塞问题及解决办法

    俗话说不作死就不会死,今天作死了一回,写了一个比较二逼的函数,遇到了同步Ajax引起的UI线程阻塞问题,在此记录一下. 事情起因是这样的,因为页面上有多个相似的异步请求动作,本着提高代码可重用性的原则 ...

  5. jQuery同步Ajax带来的UI线程阻塞问题及解决方法

    遇到了同步Ajax引起的UI线程阻塞问题,在此记录一下. 事情起因是这样的,因为页面上有多个相似的异步请求动作,本着提高代码可重用性的原则,我封装了一个名为getData的函数,它接收不同参数,只负责 ...

  6. Servlet处理（jQuery）Ajax请求

    1. jQuery     jQuery是一个JavaScript函数库,极大的简化了JavaScript编程,很容易学习.jQuery是目前最流行的开源js框架,并且提供了大量的扩展. 2. Aja ...

  7. Jquery发送ajax请求以及datatype参数为text/JSON方式

    Jquery发送ajax请求以及datatype参数为text/JSON方式 1.方式一:datatype:'text' 2.方式二:datatype:'JSON' 3.使用gson-1.5.jar包 ...

  8. Sping MVC不使用任何注解处理（jQuery）Ajax请求（基于XML配置）

    1. Spring Spring框架是一个轻量级的解决方案,是一个潜在的一站式商店,用于构建企业就绪的应用程序.Spring框架是一个Java平台,为开发Java应用程序提供全面的基础架构支持.Spr ...

  9. Struts2处理（jQuery）Ajax请求

    1. Ajax     Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)时一种创建交互式网页应用的网页开发技术,它并不是一项新的技术,其产生 ...

随机推荐

  1. set集合玩法、三目运算

    set是无序的,无法用下标获取值 创建set二种方式 1.第一种 s1=set()   #创建一个空的set,看下面就知道为什么要这么创建一个空的集合 2.第二种 s2={11,22,33,44} # ...

  2. Sublime Text的使用技巧

    来到腾讯之后,基本上整个团队都在使用Sublime Text这款编辑神器.虽说自己以前在写python的时候略有接触过,但只是把它当做简单的文本编辑器.来到这边后,才逐渐的体会到这款神作的牛逼之处. ...

  3. POJ2955【区间DP】

    题目链接[http://poj.org/problem?id=2955] 题意:[].()的匹配问题,问一个[]()串中匹配的字符数,匹配方式为[X],(X),X为一个串,问一个长度为N(N<= ...

  4. 【最小点覆盖】POJ3041-Asteroids

    [题目大意] 在n*n的网格上有n个点,每次删除一行或者一列,问至少要删除几次才能删除完全部的这些店? [思路] 在国庆最后一天到来前,把二分图的三个基本情况[最小点覆盖][DAG图的最小路径覆盖]和 ...

  5. 【期望DP】BZOJ4008- [HNOI2015]亚瑟王

    题目大意 有\(n\)张卡牌,\(r\)轮游戏.每张卡牌只能用至多一次,每张卡牌被用到的概率为\(p_i\).现在从左往右轮,直到最右一张卡片或者某张卡片被用到.如果某张卡牌被用到,产生\(d_i\) ...

  6. 【洛谷】P1063 能量项链【区间DP】

    P1063 能量项链 题目描述 在Mars星球上,每个Mars人都随身佩带着一串能量项链.在项链上有N颗能量珠.能量珠是一颗有头标记与尾标记的珠子,这些标记对应着某个正整数.并且,对于相邻的两颗珠子, ...

  7. python开发_counter()

    在python的API中,提到了Counter,它具有统计的功能 下面是我做的demo: 1.统计自定义字符串中每个字符出现的次数 2.读取一个文件,把文件中的内容转化为字符串,统计该字符串中每个字符 ...

  8. MYSQL学习笔记 （六）explain分析查询

    使用EXPLAIN可以模拟优化器执行SQL语句,从而知道MYSQL是如何处理你的SQL,从而分析查询语句或者表结构的瓶颈.

  9. Linux下简单分析请求有没有进到本机的工具tcpdump（网络接口的数据包的头信息）

    可以通过这个工具快速分析出一个请求到底有没有进入到本机.信息有点简单,对于前期的分析比较有帮助.而对于详细的分析可以借助iptables的raw表进行日志分析. 参考: http://man.linu ...

  10. iOS开发读取plist文件、iphone中plist文件的

    在Xcode中建立一个iOS项目后,会自己产生一个.plist文件,点击时会看见它显示的是类似于excel表格: 但是,如果打开方式选择Source Code,你会看见它其实是一个xml文件. 我们会 ...