一个用JS写的树状目录

最新推荐文章于 2023-11-29 15:25:08 发布

原创最新推荐文章于 2023-11-29 15:25:08 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #stylesheet #image #javascript #border #null

WEB开发专栏收录该内容

29 篇文章

订阅专栏

这个博客介绍了如何使用JavaScript（JsTree）创建一个目录树结构。JsTree通过定义图标、预加载图片和定义节点操作来实现树形目录。代码示例展示了如何添加节点、初始化节点、绘制节点及其子节点，以及实现展开、折叠、选择等交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Cls_jsTree.js
/**
名称:  js目录树
Name:  jsTree
Release: 0.01
Author:  小竹
Revision: 2005-10-29 16:30:40
Licenses: GPL(The GNU General Public License)
Descript: js目录树
*/

var Icon={
  open  :'Images/folderopen.gif',
  homepage :'Images/home.gif',
  close  :'Images/folder.gif',
  file  :'Images/file.gif',
  help  :'Images/help.gif',
  join  :'Images/T.gif',
  joinbottom :'Images/L.gif',
  plus  :'Images/Tplus.gif',
  plusbottom :'Images/Lplus.gif',
  minus  :'Images/Tminus.gif',
  minusbottom :'Images/Lminus.gif',
  blank  :'Images/blank.gif',
  line  :'Images/I.gif',
  mudule  :'Images/mudule.gif',
  root  :'Images/root.gif'
};

function PreLoad(){
for(i in Icon){
var tem=Icon[i]
Icon[i]=new Image()
Icon[i].src=tem
}
}
PreLoad()

function Cls_jsTree(obj,target,ExpandOne){
this.obj=obj;
this.Tree=new Node(0)
this.Root=null
this.Nodes=new Array()
this.target=target?target:"FrameMain";
this.ie=document.all?1:0;
this.ExpandOne=ExpandOne?1:0
}

function Node(id,pid,txt,link,title,target,xicon){
this.Index=null;
this.id=id;
this.pid=pid
this.parent=null
this.txt=txt?txt:"New Item"
this.link=link
this.title=title?title:this.txt
this.target=target
this.xicon=xicon
this.indent=""
this.hasChild=false;
this.lastNode=false;
this.open=false
}

Cls_jsTree.prototype.add=function(id,pid,txt,link,title,target,xicon){
target=target?target:this.target
var nNode=new Node(id,pid,txt,link,title,target,xicon);
if(pid==this.Tree.id)nNode.open=true;
nNode.Index=this.Nodes.length
this.Nodes[this.Nodes.length]=nNode
}

Cls_jsTree.prototype.InitNode=function(oNode){
var last;
for(i=0;i<this.Nodes.length;i++){
if(this.Nodes[i].pid==oNode.id){this.Nodes[i].parent=oNode;oNode.hasChild=true}
if(this.Nodes[i].pid==oNode.pid)last=this.Nodes[i].id
}
if(last==oNode.id)oNode.lastNode=true
}

Cls_jsTree.prototype.DrawLine=function(pNode,oNode){
oNode.indent=pNode.indent+(oNode.pid!=this.Tree.id&&oNode.pid!=this.Root.id?("<img align='absmiddle' src='"+(pNode.lastNode?Icon.blank.src:Icon.line.src)+"'>"):'')
}

Cls_jsTree.prototype.DrawNode=function(nNode,pNode){
var str=""
var indents=""
var imgFolder=""
var nid=nNode.id
var nIndex=nNode.Index;
this.DrawLine(pNode,nNode)
if(nNode.hasChild)
  indents=nNode.indent+(this.Tree.id!=nNode.pid?("<img align='absmiddle' onclick='"+this.obj+".Toggle("+nIndex+",this)' src='"+(nNode.lastNode?(nNode.open?Icon.minusbottom.src:Icon.plusbottom.src):(nNode.open?Icon.minus.src:Icon.plus.src))+"' id='icon"+nid+"' border=0>"):"")
else
  indents=nNode.indent+(nNode.pid==this.Tree.id?'':("<img align='absmiddle' src='"+(nNode.lastNode?Icon.joinbottom.src:Icon.join.src)+"'>"))
imgFolder="<img id='folder"+nid+"' align='absmiddle' src='"+(nNode.xicon?nNode.xicon:(nNode.hasChild?(nNode.open?Icon.open.src:Icon.close.src):Icon.file.src))+"'>"
str+="<div class='node'><nobr>"+indents+"<span onclick='"+this.obj+".Toggle("+nIndex+",this)'>"+imgFolder+this.DrawLink(nNode)+"</span></nobr></div>"
if(nNode.hasChild){
  str+="<div id='Child"+nid+"' style='display:"+(nNode.open?"":"none")+"'>"
  str+=this.DrawTree(nNode)
  str+="</div>"
}
return str;
}

Cls_jsTree.prototype.DrawTree=function(pNode){
var str=""
for(var i=0;i<this.Nodes.length;i++)
  if(this.Nodes[i].pid==pNode.id)
  str+=this.DrawNode(this.Nodes[i],pNode)
  return str
}

Cls_jsTree.prototype.DrawLink=function(oNode){
var str=""
sArray=oNode.txt.split('|');
dispTxt=sArray[0];
dispTitle=sArray[1];
if(oNode.txt.indexOf("|",0)==-1){dispTitle=""}
str+=" <span id='NodeItem"+oNode.id+"' tabindex='1' onclick='"+this.obj+".Select(this)' onMOver='"+dispTitle+"'>"+(oNode.link?("<a href='"+oNode.link+"' target='"+oNode.target+"' onMOver='"+dispTitle+"'>"+dispTxt+"</a>"):dispTxt)+"</span>"
return str
}

Cls_jsTree.prototype.toString=function(){
var str=""
for(var i=0;i<this.Nodes.length;i++){
  if(!this.Root)
  if(this.Nodes[i].pid==this.Tree.id)this.Root=this.Nodes[i]
  this.InitNode(this.Nodes[i])
}
str+=this.DrawTree(this.Tree)
return str
}

Cls_jsTree.prototype.Toggle=function(nIndex,o){
var nNode=this.Nodes[nIndex]
//o.blur();
if(!nNode.hasChild)return;
if(nNode.open)this.Collapse(nNode)
else this.Expand(nNode)
}

Cls_jsTree.prototype.Expand=function(nNode){
var nid=nNode.id
var node=this.GetElm('Child'+nid)
var oicon=this.GetElm('icon'+nid)
node.style.display=''
var img1=new Image()
img1.src=(nNode.lastNode?Icon.minusbottom.src:Icon.minus.src)
if(oicon)oicon.src=img1.src
if(!nNode.xicon){
  var img2=new Image()
  img2.src=Icon.open.src
  this.GetElm("folder"+nid).src=img2.src
}
if(this.ExpandOne)this.CloseOtherItem(nNode);
nNode.open=true
}

Cls_jsTree.prototype.Collapse=function(nNode){
var nid=nNode.id
var node=this.GetElm('Child'+nid)
var oicon=this.GetElm('icon'+nid)
node.style.display='none'
var img1=new Image()
img1.src=(nNode.lastNode?Icon.plusbottom.src:Icon.plus.src)
if(oicon)oicon.src=img1.src
if(!nNode.xicon){
  var img2=new Image()
  img2.src=Icon.close.src
  this.GetElm("folder"+nid).src=img2.src
}
nNode.open=false
}

Cls_jsTree.prototype.ExpandAll=function(){
for(i=0;i<this.Nodes.length;i++)
if(this.Nodes[i].hasChild)this.Expand(this.Nodes[i])
}

Cls_jsTree.prototype.CollapseAll=function(){
for(i=0;i<this.Nodes.length;i++)
if(this.Nodes[i].hasChild&&this.Nodes[i].pid!=this.Tree.id&&this.Nodes[i]!=this.Root)this.Collapse(this.Nodes[i])
}

Cls_jsTree.prototype.CloseOtherItem=function(nNode){
for(var i=0;i<this.Nodes.length;i++)
if(this.Nodes[i].pid==nNode.pid&&this.Nodes[i].open){this.Collapse(this.Nodes[i]);break}
}
Cls_jsTree.prototype.Select=function(objNode,flag){
if(!this.current)this.current=objNode
this.current.className=""
objNode.className="highlight"
this.current=objNode
var a=objNode.getElementsByTagName("A")
if(a.length!=0&&flag)window.open(a[0].href,a[0].target);
if(this.ie)objNode.focus()
}

Cls_jsTree.prototype.openTo=function(nIndex){
if(nIndex<0||nIndex>=this.Nodes.length)return;
var nNode=this.Nodes[nIndex]
while(nNode){
if(!nNode.open&&nNode.hasChild)this.Expand(nNode)
nNode=nNode.parent
}
this.Select(this.GetElm("NodeItem"+this.Nodes[nIndex].id),true)
}

Cls_jsTree.prototype.GetElm=function(uid){
return document.getElementById(uid)
}

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<link href=../css.css rel=stylesheet>
<style type="text/css">

</style>
<script language="javascript" src="Cls_jsTree.js"></script>
<link href="../../lib/css/text.css" rel="stylesheet" type="text/css">
</head>

<body scroll=auto topmargin="0" leftmargin="0" onLoad="a.openTo(1)" style="overflow-x:hidden">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">


<tr><td width="5%" valign="top"> </td><td width="45%" valign="top"><div id=b>
       </p>
       <p> </p>

         <script language="JavaScript">
<!--
var a=new Cls_jsTree("a")
a.add(1,0,"主菜单","","","_self",Icon.homepage.src)
a.add(101,1,"子目录一")
a.add(10101,101,"链接一","http://www.sina.com.cn","","_Blank")
a.add(10101,101,"链接二","http://www.yahoo.com.cn","","_Blank")
a.add(102,1,"子目录二")
a.add(10201,102,"链接三","http://www.163.com","","_Blank")

document.write(a);

--!>

</script>
</body>
</html>