JavaScript 树型目录
[size=medium]
这棵树属于本人原创，我正在修改中，另外图片的样式也还没有加上，大家帮帮忙，水平有限，初学js，图片应该怎么来堆放呢？/* * list[id] 是保存每个节点信息的数组 * author wcjy5128@126.com * 2010-4-8 */var list = [];var tree = function(objName) {this.title = objName;this.liNode = [];this.ulNode = [];this.str = document.createElement("div");this.str.innerHTML = this.title;//将各个图片的路径封装成json格式this.imgs = {folderClose:"img/folderclose.gif",folderOpen:"img/folderopen.gif",rootFolder:"img/imgfolder.gif",line:"img/line.gif",join:"img/join.gif",joinButtom:"img/joinbottom.gif",emty:"img/empty.gif",minus:"img/minus.gif",noLine_minus:"img/nolines_minus.gif",noLine_plus:"img/nolines_plus.gif",plus:"img/plus.gif",plusBottom:"img/plusbottom.gif",line:"img/line.gif",joinButtom:"img/joinbottom.gif",page:"img/page.gif"};};//节点ID，父节点ID，节点名字，链接，目标 --->节点信息tree.prototype.node = function(id,parentId,nodeName,url,target) {this.id = id;this.parentId = parentId;this.nodeName = nodeName;this.url = (url==null?"javascript:void(0)":url);this.target = (target==null?"":target);this.idLength = id.length;//ID的长度this.hasChild = false;//是否有子节点this.hasparent = false;//是否有父节点this.parentNode;//记录该节点的父节点this.childNode;//记录该节点的子节点this.isLast = false;//是否是最后一个节点this.isTop = false;//是否是顶层节点};//增加节点tree.prototype.add = function(id,parentId,nodeName,url,target) {var node = new this.node(id,parentId,nodeName,url,target);list.push(node);this.createTree(node); };//产生一棵树tree.prototype.createTree = function(node) {//判断如果它的父节点的ID是0 则表示是一个父节点 则创建一个li列表 所有的父节点是0的节点都是兄弟节点this.HasParent(node);if(!node.hasparent) {node.isTop = true;//该节点是顶层节点 即根节点this.formatNode(node);} if(node.hasparent) {//node是子节点，有父节点 则为该父节点的子节点创建一个div 该节点的所有子节点均在该div中this.findParent(node);this.appendChild(node.parentNode,node);//将父节点和子节点一并传入到子节点中 获取相应的信息} else {this.formatNode(node);}};//找到父节点tree.prototype.findParent = function(node) {var parent;for(var i=0;i<list.length;i++) {if(list[i].id == node.parentId) {//表示该node是属于某个节点的子节点node.parentNode = list[i];//找到父节点位置}}};//格式化兄弟节点tree.prototype.formatNode = function(node) {var div1 = document.createElement("div");var img = document.createElement("img");img.src = this.imgs.line;var div2 = document.createElement("div");div2.className = "parent";div2.id = node.id;div2.innerHTML = "<img id='img"+node.id+"' onclick='expandChild(this.parentNode.id)' src='"+this.imgs.plus+"'/><img src='"+this.imgs.folderClose+"'/><a href='"+node.url+"' target='"+node.target+"'>"+node.nodeName+"</a>";div1.appendChild(div2);this.ulNode[node.id] = div1;this.liNode[node.id] = div2;};//添加子节点tree.prototype.appendChild = function(parent,node) {var div = document.createElement("div");div.className = "child";div.id = parent.id+"_"+node.id;div.innerHTML = "<img id='img"+node.id+"' onclick='expandChild(this.parentNode.id)' src='"+this.imgs.plusBottom+"'/><img src='"+this.imgs.folderClose+"'/><a href='"+node.url+"' target='"+node.target+"'>"+node.nodeName+"</a>";this.liNode[node.id] = div;var obj = this.liNode[node.parentId];if(obj != null&&typeof(obj)!="undefined") {if(div.id.substr(0,parent.idLength)==node.parentId) {div.style.display = "none";}obj.appendChild(div);}};//判断该节点是否有父节点tree.prototype.HasParent = function(node) {var last;for(var i=0;i<list.length;i++) {if(list[i].id == node.parentId) {node.hasparent = true;}}};//判断该节点是否有子节点tree.prototype.HasChild = function(node) {var last;for(var i=0;i<list.length;i++) {if(list[i].parentId == node.id) {node.hasChild = true;}}};//starttree.prototype.start = function() {for(var node in this.ulNode) {this.str.appendChild(this.ulNode[node]);}var tree = document.getElementById("treeDiv");tree.innerHTML = this.str.innerHTML;};//展开节点的方法function expandChild(divId) {var arr = divId.split("_");if(arr.length==1) {arr[1] = arr[0];}var all = document.getElementsByTagName("div");for(var i=0; i<all.length; i++) {if(all[i].id.split("_")[0] == arr[1]&&all[i].className != "parent") {var fuck = document.getElementById(all[i].id);if(fuck.style.display == "none") {fuck.style.display = "block";fuck.parentNode.firstChild.src = "img/minus.gif";} else {fuck.style.display = "none";fuck.parentNode.firstChild.src = "img/plusbottom.gif";}}}}html部分：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>树</title><link rel="stylesheet" href="tree.css" type="text/css"/><script type="text/javascript" src="tree.js"></script></head><body><div id="treeDiv"></div><script type="text/javascript">var tr = new tree("我的树");tr.add("1","0","first","http://www.baidu.com","leftFrame");tr.add("2","0","second","http://www.baidu.com","leftFrame");tr.add("3","0","third","http://www.baidu.com","leftFrame");tr.add("4","1","forth","http://www.baidu.com","leftFrame");tr.add("5","1","fifth","http://www.baidu.com","leftFrame");tr.add("6","1","sixth","http://www.baidu.com","leftFrame");tr.add("7","4","sixth","http://www.baidu.com","leftFrame");tr.add("8","4","sixth","http://www.baidu.com","leftFrame");tr.add("9","6","sixth","http://www.baidu.com","leftFrame");tr.add("10","5","sixth","http://www.baidu.com","leftFrame");tr.add("11","5","sixth","http://www.baidu.com","leftFrame");tr.add("12","6","sixth","http://www.baidu.com","leftFrame");tr.add("13","2","sixth","http://www.baidu.com","leftFrame");tr.add("14","2","sixth","http://www.baidu.com","leftFrame");tr.add("15","3","sixth","http://www.baidu.com","leftFrame");tr.add("16","9","sixth","http://www.baidu.com","leftFrame");tr.add("17","14","sixth","http://www.baidu.com","leftFrame");tr.start();</script></body></html>css部分：.parent {line-height:10px;font-size:15px;font-family:"Arial Rounded MT Bold";border:0px solid #000;}.child {margin-left:17px;border:0px solid #0000ff;margin-top:2px;}body {font-size:14px;}这个我也花了两天的时间写出来的，请各位高手帮我提出解决问题的办法，谢谢了[/size]