dTree无限级文件夹树和JQuery同步Ajax请求
曾经都是用JQuery对树的支持来实现文件夹树的,近来闲来无事就弄了下dTree,感觉其无限级文件夹还是挺好的,并且它的使用也比較方便,基本上就是先把要用的js文件即dtree.js和css文件dtree.css引入,另外就是它默认的图片。当然这些图片都是能够自己指定的,它的css样式也能够自己改变的。
关于dTree就先谈谈它的node,dTree的node的构造方法能够指定下列參数,
- id //唯一标识。数字型
- pid//父节点的id,假设是根结点那就仅仅能是-1,一般来讲仅仅有一个最顶层的根结点
- name//结点的名字。字符串类型,在页面上显示出来的标签.
- url//字符串类型,表示当点击该叶子结点的时候訪问哪个URL.
- title//title,字符串类型。鼠标进入时显示的字符串.
- target//字符串类型,超链接的目标位置.
- icon //字符串类型,表示该结点图标的图片路径,不指定则使用默认的
- iconOpen//结点打开时候的图片路径。不指定则使用默认的
- open//boolean类型,表示初始状态是否是打开的
如:
- mytree.add(1, 0, 'My node', 'node.html', 'node title', 'mainframe', 'img/musicfolder.gif');
有了node以后就是构建树了
- //引入了dtree.js后,就能够使用new dTree()了
- myTree = new dTree();//这样就新建了一个dTree了,
- //新建了dTree以后就是把刚建的node给添进去了,
- , 0, 'My node', 'node.html', 'node title', 'mainframe', 'img/musicfolder.gif');
在最后还能够指定一些配置參数:
- target//全部结点的目标
- folderLinks//非叶子结点是否也是能够链接的,默认是true
- useSelection//结点能否够被选择。默认true.
- useCookies//是否使用cookies来记录当前树的状态,默认是true
- useLines//是否用线来画树。默认是true
- useIcons//是否使用图标来构建树,默认是true
- useStatusText//是否在状态栏显示结点的名字。而不是在URL的位置显示,默认是false
- closeSameLevel//是否同一时候仅仅能有一个目录处于打开状态。默觉得false。当为true的时候关闭全部的目录和打开全部的目录将不会起作用
- inOrder//是否先加入父结点再加入子节点, 默觉得false,为true能够加快载入速度
- //比如:
- mytree.config.target = "mytarget";
像这些结点的相关信息,我们一般都是要从后台来得到的,或者从数据库。或者从配置文件,假设加上复杂的权限控制就得每次都到后台取一次了,
而从后台得到这些数据的话一般经常使用的是以ajax请求取得json格式的数据。然后在页面上就能够很方便的使用了,可是使用ajax请求的时候
就会有一个问题出现了,那就是一般的ajax请求都是异步的。这时候。页面不会等ajax的请求返回就已经往以下运行了,等ajax请求返回的时候
页面已经不能再使用其返回的数据进行操作了。所以这个时候须要使用ajax的同步请求了!ajax的同步请求非常easy仅仅要在ajax的请求的时候加上一个
差别于ajax请求类型的參数即可了,一般都是async。像JQuery的使用方法就是这种:
- $.ajax( {
- url : "module/geneMenu",
- async : false//同步。等这个请求完毕后才继续往下运行,这样myTree才干使用返回来的数据
- });
使用了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="./styles.css">-->
- <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) {
- ; 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>
dTree无限级文件夹树和JQuery同步Ajax请求的更多相关文章
- 关于在vscode中以https方式请求!不是以file文件夹访问!vscode中 ajax请求
在vscode 头疼的问题是 用浏览器查看网页!会是以文件夹的方式打开的! 我遇到这个问题 我还重新配置了Apache ! 但是现在可以解决: 使用vscode ============== ...
- 使用dos的tree命令输出文件夹树
用dos的tree命令就可以实现文件夹树状图的输出,不过目前仅能输出为.txt文件 方法如下: 开始->运行 输入cmd打开命令控制台 切换到你要显示的列表文件夹 比如 输入 d: 切换到d盘 ...
- Linux下的tree命令 --Linux下文件夹树查看
Linux下的tree命令 --Linux下文件夹树查看 有时我们须要生成文件夹树结构,能够使用的有ls -R,可是实际效果并不好 这时须要用到tree命令,可是大部分Linux系统是默认不安装该命令 ...
- jQuery同步Ajax带来的UI线程阻塞问题及解决办法
俗话说不作死就不会死,今天作死了一回,写了一个比较二逼的函数,遇到了同步Ajax引起的UI线程阻塞问题,在此记录一下. 事情起因是这样的,因为页面上有多个相似的异步请求动作,本着提高代码可重用性的原则 ...
- jQuery同步Ajax带来的UI线程阻塞问题及解决方法
遇到了同步Ajax引起的UI线程阻塞问题,在此记录一下. 事情起因是这样的,因为页面上有多个相似的异步请求动作,本着提高代码可重用性的原则,我封装了一个名为getData的函数,它接收不同参数,只负责 ...
- Servlet处理(jQuery)Ajax请求
1. jQuery jQuery是一个JavaScript函数库,极大的简化了JavaScript编程,很容易学习.jQuery是目前最流行的开源js框架,并且提供了大量的扩展. 2. Aja ...
- Jquery发送ajax请求以及datatype参数为text/JSON方式
Jquery发送ajax请求以及datatype参数为text/JSON方式 1.方式一:datatype:'text' 2.方式二:datatype:'JSON' 3.使用gson-1.5.jar包 ...
- Sping MVC不使用任何注解处理(jQuery)Ajax请求(基于XML配置)
1. Spring Spring框架是一个轻量级的解决方案,是一个潜在的一站式商店,用于构建企业就绪的应用程序.Spring框架是一个Java平台,为开发Java应用程序提供全面的基础架构支持.Spr ...
- Struts2处理(jQuery)Ajax请求
1. Ajax Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)时一种创建交互式网页应用的网页开发技术,它并不是一项新的技术,其产生 ...
随机推荐
- Python类总结-析构函数和__call__方法
class Foo: def __init__(self): pass #析构函数 def __del__(self): print('解释器要销毁我了,我要做最后一次呐喊') def __call_ ...
- Android 之XML数据解析(2)—— SAX解析
(以下文章基本照抄郭霖大神的<第一行代码>) 在Android之 解析XML文件(1)—— Pull解析 中我们讲了Pull方式解析XML文件.今天讲另外一种方式,SAX解析XML文件. ...
- luogu P2107 小Z的AK计划
最近复习了一下堆,于是去luogu上找一些简单题写一写 贪心的想,小z不会到一半以后回头去Ak,因为这样从时间上想肯定是不优的,他可以早在之间经过时就AK所以我们可以将所有机房按照横坐标排序可以想到的 ...
- asp.net core集成CAP(分布式事务总线)
一.前言 感谢杨晓东大佬为社区贡献的CAP开源项目,传送门在此:.NET Core 事件总线,分布式事务解决方案:CAP 以及 如何在你的项目中集成 CAP[手把手视频教程],之前也在工作中遇到分布式 ...
- SPOJDRUIDEOI - Fata7y Ya Warda!【单调栈】
题目链接[http://www.spoj.com/problems/DRUIDEOI/en/] 题意:给出n个数,从1到n围城一个环(1和n相连),求每个数左边第一个比他大的第一个下标,右边第一个比他 ...
- 【BZOJ 2006】2006: [NOI2010]超级钢琴(RMQ+优先队列)
2006: [NOI2010]超级钢琴 Time Limit: 20 Sec Memory Limit: 552 MBSubmit: 2792 Solved: 1388 Description 小 ...
- tyvj Easy
Easy [描述 Description] 某一天WJMZBMR在打osu~~~但是他太弱逼了,有些地方完全靠运气:(我们来简化一下这个游戏的规则 有n次点击要做,成功了就是o,失败了就是x,分 ...
- 【BZOJ】1996: [Hnoi2010]chorus 合唱队【区间dp】
1996: [Hnoi2010]chorus 合唱队 Time Limit: 4 Sec Memory Limit: 64 MBSubmit: 2088 Solved: 1371[Submit][ ...
- org.apache.curator:master选举和分布式锁
1. master选举(LeaderSelector) 1)LeaderSelector构造函数 在leaderPath上建立分布式锁:mutex = new InterProcessMutex(cl ...
- HDU 5575 Discover Water Tank 并查集 树形DP
题意: 有一个水槽,边界的两块板是无穷高的,中间有n-1块隔板(有高度),现有一些条件(i,y,k),表示从左到右数的第i列中,在高度为(y+0.5)的地方是否有水(有水:k = 1),问最多能同时满 ...