一个用JS写的树状目录

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

clchun4352

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

阅读量2.8k

点赞数

分类专栏： WEB开发文章标签： function stylesheet image javascript border null

本文链接：https://blog.csdn.net/clchun4352/article/details/658962

版权

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

摘要由CSDN通过智能技术生成

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