JavaScript树状目录问题 求助

Question

/*
 * list[id] 是保存每个节点信息的数组
 * 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",
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的节点都是兄弟节点
//先判断该节点是否有子节点，如果有子节点，在判断该节点是否有父节点 用于确定最后一个节点
//如果没有父节点了，则说明该节点是跟节点，则需要判断该节点是否有子节点，如果有子节点，则调用函数，得到节点的深度，没有子节点，则直接增加一个节点
//如果该节点存在子节点，则判断节点的子节点是否有兄弟节点，如果有，则该节点的深度为子节点的最大深度+1
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.getNode = function() {
for(var i=0;i<list.length;i++) {
var node = new this.node(list[i].id,list[i].parentId,list[i].nodeName,list[i].url,list[i].target);
this.createTree(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,this.id)' src='"+this.imgs.plus+"'/><img src='"+this.imgs.folderClose+"'/><a href='"+node.url+"' target='"+node.target+"'>"+node.id+"</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,this.id)' src='"+this.imgs.plusBottom+"'/><img src='"+this.imgs.folderClose+"'/><a href='"+node.url+"' target='"+node.target+"'>"+div.id+"</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;
}
}
};//start
tree.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,imgId) {
imgId = imgId.substring(3); //当前点击的节点的div的ID值
var reg = new RegExp(imgId,"");
var all = document.getElementsByTagName("div");
for(var i=0; i<all.length; i++) {
if(reg.test(all[i].id)&&all[i].id.substring(0,imgId.length)==imgId&&all[i].className!="parent") {
alert(all[i].id);
var fuck = document.getElementById(all[i].id);
if(fuck.style.display == "none") {
fuck.style.display = "block";
} else {
fuck.style.display = "none";
}
}
}
}这个在显示的时候始终会有点问题，但是我还没有找到解决的办法了，子节点之间会因为id字符串中有相同的内容而导致在显示的时候有问题，各位帮我一下，我学js不久，写了两天啦。帮我看看咯

Answer 1

定义一个静态变量 tree.index =0;
在没添加一个节点时将这个变量加1，将这个变量应用到node的id中去
node.id = node.id+treeindex;
可以避免id重复的问题

Answer 2

这个不是id重复，id是没有重复的，是这样的问题，我点一个图片的时候，就会把这个图片的ID 和div的id一起传递过去，如果说是子节点的话 它的id就是它的父节点的ID加上它本身的ID组成的，比如说是14，说明其父节点的ID是1，本身的ID是4，加起来组成这个节点的ID,但是如果有其他的兄弟节点中有相同的，比如在另外一个节点中父节点是2，然后子节点的ID是14，这样子组成起来的ID就是214,在进行处理的时候 我把1传递进来就会找到两个节点，就是这个地方 纠结的很！

Answer 3

如何区分21 4 和 2 14呢？？
单纯使用id是比较麻烦尝试用下滑线分割id
如21_4、 2_14这样可以避免id重复的问题

Answer 4

我把一个节点放入了一个div中，那如果按照你的说法的话，我应该在div上加上事件吗？

Answer 5

这个程序的思想就是每一个节点都是一个div，一层一层的嵌套的

Answer 6

就这样吧，出来就好
也可以考虑CSS设置背景图片，jq和ext常常这么做