js文件目录树_用php做的网盘网盘页面用的是js

⑴ javaScript 文件目录树

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>

/*主页面样式*/

.leftNav {

width: 20%;

height:500px;

border:#B9E0F7 1px solid;

margin-left: 1%;

margin-right: 1%;

}

#footer {

color:#808080;

line-height: 1.6em;

padding: 0 0 1em 0;

}

/*我的树样式表*/

.treeDiv {

color: #636363;

font-size: 14px;

font-weight: normal;

background-color: #fff;

color: black;

overflow: auto;

padding: 0 0 1em 0;

overflow-x: hidden;

}

.treeNode {

white-space: nowrap;

text-indent: -14px;

margin: 6px 2px 5px 14px;

}

a.treeUnselected:hover, a.treeSelected:hover {

background-color: #BFD9ED;

text-decoration: none;

}

a.treeUnselected, a.treeSelected {

color: black;

padding: 1px 3px 1px 0;

text-decoration: none;

}

a.treeSelected {

background-color: #B9E0F7;

}

a.treeUnselected {

background-color: transparent;

}

.treeSubnodes {

display: block;

}

.treeSubnodesHidden {

display: none;

}

.treeNode img.treeNoLinkImage, .treeNode img.treeLinkImage {

height: 15px;

margin-left: 5px;

margin-right: 0px;

width: 15px;

}

.treeNode img.treeLinkImage {

cursor: pointer;

}

div.treeNode a, div.treeNode span.apiRoot {

display: inline-block;

margin-left: 24px;

text-indent: 0;

white-space: normal;

width: 95%;

word-wrap: break-word;

}

div.treeNode span.category {

cursor: pointer;

}

</style>

</head>

<body>

<span onclick="expandCollapse(this.parentNode)" class="category">目录节点一 </span>

<span onclick="expandCollapse(this.parentNode)" class="category">目录节点一子目录 </span>

<a href="#" class="treeUnselected" onclick="clickAnchor(this)">二级叶子结点一</a>

</div>

<a href="#" class="treeUnselected" onclick="clickAnchor(this)">二级叶子结点二</a>

</div>

<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点一</a>

</div>

<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点二</a>

</div>

<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点三</a>

</div>

<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点四</a>

</div>

<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点五</a>

</div>

<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点六</a>

</div>

<span onclick="expandCollapse(this.parentNode)" class="category">目录节点二</span>

<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点一</a>

</div>

<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点二</a>

</div>

<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点三</a>

</div>

<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点四</a>

</div>

<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点五</a>

</div>

</div>

</div>

</div>

</div>

</div>

var treeSelected = null;//选中的树节点

var imgPlus = new Image();

imgPlus.src="../graphics/treenodeplus.gif";

var imgMinus = new Image();

imgMinus.src="../graphics/treenodeminus.gif";

//父节点展开事件

function expandCollapse(el)

{

//如果父节点有字节点（class 属性为treeSubnodesHidden），展开所有子节点

if (el.className!= "treeNode"){

return; //判断父节点是否为一个树节点，如果树节点不能展开，请检查是否节点的class属性是否为treeNode

}

var child;

var imgEl;//图片子节点，在树展开时更换图片

for(var i=0; i < el.childNodes.length; i++)

{

child = el.childNodes[i];

if (child.src)

{

imgEl = child;

}

else if (child.className == "treeSubnodesHidden")

{

child.className = "treeSubnodes";//原来若隐藏，则展开

imgEl.src = imgMinus.src;//更换图片

break;

}

else if (child.className == "treeSubnodes")

{

child.className = "treeSubnodesHidden";//原来若展开，则隐藏

imgEl.src = imgPlus.src;//更换图片

break;

}

//子节点点击事件，设置选中节点的样式

function clickAnchor(el)

{

selectNode(el.parentNode);

el.blur();

}

function selectNode(el)

{

if (treeSelected != null)

{

setSubNodeClass(treeSelected, 'A', 'treeUnselected');

}

setSubNodeClass(el, 'A', 'treeSelected');

treeSelected = el;

}

function setSubNodeClass(el, nodeName, className)

{

var child;

for (var i=0; i < el.childNodes.length; i++)

{

child = el.childNodes[i];

if (child.nodeName == nodeName)

{

child.className = className;

break;

}

</script>

</body>

</html>

运行效果：

⑵ js树结构数据的遍历

title: JS树结构数据的遍历
date: 2022-04-14
description: 针对项目中出现树形结构数据的时候，我们怎样去操作他

项目中我们会经常出现对树形结构的遍历、查找和转换的场景，比如说DOM树、族谱、社会机构、组织架构、权限、菜单、省市区、路由、标签等等。那针对这些场景和数据，我们又如何去遍历和操作，有什么方式或者技巧可以简化我们的实现思路。下面我们将针对常规出现的场景去总结一下我们的遍历方式

树的特点
1、每个节点都只有有限个子节点或无子节点；
2、没有父节点的节点称为根节点；
3、每一个非根节点有且只有一个父节点；
4、除了根节点外，每个子节点可以分为多个不相交的子树；
5、树里面没有环路

下面的图片表示一颗树

在下面的JS中我们由多棵树组成我们的数据

在这数据中我们如何评判数据是否为叶节点（也就是最后一级），我们每个节点都会存在children属性，如果不存在children属性或者children不是一个数组或者children为数组且长度为0我们则认为他是一个叶节点

我们针对树结构的操作离不开遍历，遍历的话又分为广度优先遍历、深度优先遍历。其中深度优先遍历可以通过递归和循环的方式实现，而广度优先遍历的话是非递归的

从上往下对每一层依次访问，在每一层中，从左往右（也可以从右往左）访问结点，访问完一层就进入下一层，直到没有结点可以访问为止。即访问树结构的第n+1层前必须先访问完第n层。

简单的说，BFS是从根节点开始，沿着树的宽度遍历树的节点。如果所有节点均被访问，则算法中止。

所以我们的实现思路是，维护一个队列，队列的初始值为树结构根节点组成的列表，重复执行以下步骤直到队列为空：
取出队列中的第一个元素，进行访问相关操作，然后将其后代元素（如果有）全部追加到队列最后。

深度优先搜索算法（英语：Depth-First-Search，DFS）是一种用于遍历或搜索树或图的算法。这个算法会尽可能深的搜索树的分支。当节点v的所在边都己被探寻过，搜索将回溯到发现节点v的那条边的起始节点。这一过程一直进行到已发现从源节点可达的所有节点为止。如果还存在未被发现的节点，则选择其中一个作为源节点并重复以上过程，整个进程反复进行直到所有节点都被访问为止

1、先序遍历
访问子树的时候，先访问根再访问根的子树

2、后序遍历
访问子树的时候，先访问子树再访问根

1、先序遍历
先序遍历与广度优先循环实现类似，要维护一个队列，不同的是子节点不追加到队列最后，而是加到队列最前面

2、后序遍历
后序遍历就略微复杂一点，我们需要不断将子树扩展到根节点前面去，执行列表遍历，并且通过一个临时对象维护一个id列表，当遍历到某个节点如羡大果它没有子节点或者它本身已经存在于我们的临时id列表，则执行访问操笑高作，否则继续扩展子节点到当前节点前面

对于树结构的遍历操作，其实递归是最基础，也是最容易理解的。递归本身就是循环的思想，所以可以用循环来改写递碰派尺归,以上的方式在项目中已经廊括了大部分的场景了，我们在日常开发中可以根据场景或者需要去选择我们的遍历方式，或者基于此对他进行调整和优化，至于每种方式的空间复杂度和时间复杂度我们在这个地方就不去尝试了，各位感兴趣可以自己去验证。

广度优先搜索

树的遍历

深度优先搜索

图文详解两种算法：深度优先遍历（DFS）和广度优先遍历（BFS）

二叉树遍历（前序，后序，中序，层次）递归与迭代实现JavaScript

JS树结构操作:查找、遍历、筛选、树和列表相互转换

⑶ JSP网页中中那种目录树是怎么实现的

用dtree很方便，我最近也是做这种目录树

JS创建
var tree = new dTree('tree');
tree.add(10,0,'空间信息管理','goto(10)','','_c');
tree.add(11,10,'翠苑1区','goto(2)','单击查看该群组的信息','k');
tree.add(12,10,'翠苑2区','goto(2)','单击查看该群组的信息','FRAME_LIST');
tree.add(13,12,'第1栋','goto(3)','单击查看该群组的信息','FRAME_LIST');
tree.add(19,13,'第1单元','goto(3)','单击查看该群组的信息','FRAME_LIST');
tree.add(14,19,'第1层','goto(3)','单击查看该群组的信息','FRAME_LIST');
tree.add(15,14,'1号房','goto(1)','单击查看该群组的信息','FRAME_LIST');
tree.add(17,11,'第1栋','goto(3)','单击查看该群组的信息','FRAME_LIST');
tree.add(18,11,'第2栋','goto(3)','单击查看该群组的信息','FRAME_LIST');
tree.add(20,17,'第1单元','goto(3)','单击查看该群组的信息','FRAME_LIST');
tree.add(21,17,'第2单元','goto(3)','单击查看该群组的信息','FRAME_LIST');
tree.add(22,18,'第1单元','goto(3)','单击查看该群组的信息','FRAME_LIST');
tree.add(23,18,'第2单元','goto(3)','单击查看该群组的信息','FRAME_LIST');
tree.add(16,10,'嘉绿名苑','goto(2)','单击查看该群组的信息','FRAME_LIST');

然后在需要的位置这样调用<script type="text/javascript">document.write(tree);</script>

⑷ 用php做的网盘，网盘页面用的是js,但是登陆上之后，页面的目录树总是不显示，请高手指教啊！

JS是客户端解释执行的，不存在跨平台问题，只跟浏览器相关。
检查一下文件拷贝完整没有，还有调用路径是否正确

⑸ jsp 和 html 怎么实现树型目录结构

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>制作简单的树形菜单</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">


<style type="text/css">
body{font-size:13px;
line-height:20px;
}
a{font-size: 13px;
color:blue;
text-decoration: none;
}
a:hover{font-size:13px;
color:red;
}

.no_circle{list-style-type:none; /*设置列表项标志的类型为无*/
display:none;
}
</style>
<script type="text/javascript">
function show(){
if(document.getElementById("a").style.display=='block'){
document.getElementById("a").style.display='none'; //触动的ul如果处于显示状态，即隐藏
}
else{
document.getElementById("a").style.display='block'; //触动的ul如果处于隐藏状态，即显示
}
}
</script>
</head>

<body>
<b>树形菜单：</b>
<ul><a href="javascript:onclick=show() ">网络</a></ul>
<ul id="a" class="no_circle">
<li>新闻</li>
<li>网页</li>
<li>图片</li>
<li>贴吧</li>
<li>知道</li>
</ul>
</body>
</html>

⑹ 求js高手做个的输入框的目录树

我随便的编写了一个思路，其它的你去搞定！
<span style="display:inline-block;background:#FF0000">共<input name="A" type="text" style="width:40px;" onkeyup="createInput(this)"/>年级</span>
<script>
function getPosition(obj){
var left=0;if(obj){while (obj.offsetParent){left += obj.offsetLeft;obj = obj.offsetParent;}}return left;
}
function createInput(obj){
var ml=getPosition(obj.parentNode)
var div=document.createElement("div");
div.style.marginLeft=ml+obj.parentNode.clientWidth;
div.style.tableLayout="fixed";
div.style.whiteSpace="nowrap";
var str="";
for(var i=1;i<=obj.value;i++){
str+="<span><input type='text' style='width:80px'><input type='text' style='width:40px' onkeyup='createInput(this)'></span><br>"
}
div.innerHTML=str;
obj.parentNode.insertAdjacentElement("afterEnd",div);
}
</script>
相信你懂得！

⑺ JS中的二叉树遍历

栈、队列、链表等数据结构，都是顺序数据结构。而树是非顺序数据结构。树型结构是一类非常重要的非线性结构。直观地，树型结构是以分支关系定义的层次结构。

二叉树（Binary Tree）是另一种树型结构，它的特点是每个结点至多只有两棵子树（即二叉树中不存在度大于2的结点），并且，二叉树的子树有左右之分（其次序不能任意颠倒。）

遍历二叉树(Traversing Binary Tree)：是指按指定的规律对二叉树中的每个结点访问一次且仅访问一次。

二叉树有深度遍历和广度遍历，深度遍历有前序、中序和后序三种遍历方法。二叉树的前序遍历可以用来袭告显示目录结构等；中序遍历可以实现表达式树，在编译器扰禅链底层很有用；后序遍历可以用来实现计算目录内的文件及其信息等。

上述二叉树(a+b*c)-d/e在js中可以用对象的形式表示出来：

先递归遍历左子树，从最左的一个左子树存入数组；然后回溯遍历双亲结点，再是右子树，这样递归循环。

将当前结点压入栈，然后将左子树当做当前结点，如果当前结点为空，将双亲结点取出来，将值保存进数组，然后将右子树当做当前结点，进行循环。

先走左子树，缓孙当左子树没有孩子结点时，将此结点的值放入数组中，然后回溯遍历双亲结点的右结点，递归遍历。

广度优先遍历二叉树(层序遍历)是用队列来实现的，广度遍历是从二叉树的根结点开始，自上而下逐层遍历；在同一层中，按照从左到右的顺序对结点逐一访问。

js 中二叉树的深度遍历与广度遍历(递归实现与非递归实现)
二叉树与JavaScript

⑻ 怎么用javascript获取本地硬盘的目录树，然后在html页面中显示硬盘目录树

为了安全性，现在的浏览器厂商已经禁用了对本地磁盘文件操作的API。
最多可以写点cookie到客户端，而且限制还很多
所以只要是浏览器里面的类似js这样的脚本语言都是不能对客户端的本地文件进行操控的

导航:首页 > 文件教程 > js文件目录树

js文件目录树

与js文件目录树相关的资料

友情链接