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

以前都是用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. 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. <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. for ( var i = 0; 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>
时间： 2024-10-12 07:01:27

dTree无限级目录树和JQuery同步Ajax请求的相关文章

dTree无限级文件夹树和JQuery同步Ajax请求

曾经都是用JQuery对树的支持来实现文件夹树的,近来闲来无事就弄了下dTree,感觉其无限级文件夹还是挺好的,并且它的使用也比較方便,基本上就是先把要用的js文件即dtree.js和css文件dtree.css引入,另外就是它默认的图片.当然这些图片都是能够自己指定的,它的css样式也能够自己改变的. 关于dTree就先谈谈它的node,dTree的node的构造方法能够指定下列參数, Js代码 id //唯一标识.数字型 pid//父节点的id,假设是根结点那就仅仅能是-1,一般来讲仅仅有一

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

原文:jQuery同步Ajax带来的UI线程阻塞问题及解决办法 俗话说不作死就不会死,今天作死了一回,写了一个比较二逼的函数,遇到了同步Ajax引起的UI线程阻塞问题,在此记录一下. 事情起因是这样的,因为页面上有多个相似的异步请求动作,本着提高代码可重用性的原则,我封装了一个名为getData的函数,它接收不同参数,只负责获取数据,然后把数据return.基本的逻辑剥离出来是这样的: function getData1(){ var result; $.ajax({ url : 'p.php'

Vue组件之无限级目录树构建

渐渐,了解Vue也有一个月了,最近遇上个无限级目录树的小功能,为了能多学习避免自己操作dom或是网上下插件,下决心用Vue来解决当下问题,毕竟毛爷爷讲过,实践出真知,本次主要运用了组件之间的相互循环引用,然后就是循环组件与父组件之间的通信, 源数据格式采用了毗邻结构转为多维数组的形式,没办法,我也暂且只能想到这样去做,学习革命任重道远....... 1 Vue.component('item',{ 2 template:'<ul> 3 <li v-for="child in m

【jquery】ajax 请求成功后新开窗口被拦截解决方法

问题: 前面开发项目时碰到一个问题,ajax 异步请求成功后需要新开窗口打开 url,使用的是 window.open() 方法,但是很可惜被浏览器给拦截了,怎么解决这个问题呢? 分析: 浏览器之所以拦截新开窗口是因为该操作并不是用户主动触发的,所以它认为这是不安全的就拦截了(不过如果是 _self 的话就不会有这个限制),即使 ajax 回调函数中模拟执行 click 或者 submit 等用户行为(trigger('click')),浏览器也会认为不是由用户主动触发的,因此不能被安全执行,所

firefox同步ajax请求报错的问题 A parameter or an operation is not supported by the underlying object

今天在测试系统时,一个很正常的功能在firefox下报错,经过验证在ie和chrome浏览器中功能这个正常.   调试后发现: 请求比其他请求的特殊点在于同步请求.   经过firefox的控制台上测试发现错误日志:   "[Exception... "A parameter or an operation is not supported by the underlying object" code: "15" nsresult: "0x805

原生js和jquery发送ajax请求及封装

原生js                                   // ajax get 五部曲function ajax_get(url,data){ // 异步对象 var ajax=new XMLHttpRequest(); // 设置url和请求方式 // url方法 如果有数据要把数据拼接到url中?name=jack&age=20 if(data){ url+=?; url+=data; }else{}; ajax.open('get',url); // 发送请求 aja

PHP服务器文件管理器开发小结（三）：使用jQuery提交AJAX请求

本节将讨论使用jQuery提交AJAX请求的基本方法,并完成显示首文件夹的基本方法. 同时,本节也将讨论使用图片链接提交请求的基本方法. jQuery是一套强大的JS库,将复杂的JS操作封装成简洁的语句,并提供对AJAX的支持.通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本.HTML.XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中.编写常规的 AJAX 代码并不容易,因为不同的浏览器对 AJAX 的实现

jQuery 中 ajax 请求数据应用的一个小demo

举一个jquery中ajax的应用小 demo 便于以后的更多项目拓展 ,这里要注意的是保存的文件名和文件图片路径问题 ... ajax01.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> ajax小例子 </title> </head> <body> <!--

Angular和jQuery的ajax请求的差别

近期项目中使用angular,结果发现后台没法获取參数,所以,略微研究了一下两者在发送ajax时的差别. 注意angular和jquery的ajax请求是不同的. 在jquery中,官方文档解释contentType默认是 application/x-www-form-urlencoded; charset=UTF-8 contentType (default: 'application/x-www-form-urlencoded; charset=UTF-8') Type: String Wh