100分求，关于可动态增加节点的树形目录，急！！！

需要一个可以动态增加节点的目录树，就是说，在点击一个节点展开的时候，才从数据库中读取此节点下的子节点，并且显示子节点，而不是一次性用递归的方法取出目录树结构,其他节点也都是如此
  还有，需要可以不用刷新页面，就为目录树增加或删除一个节点,而不是在数据库中增加记录后，刷新页面更新目录树

非常急！谢谢大家！！！

12 个解决方案

#1

怎么就没人理呢？

#2

我也要
最还是数据库的或者xml的
asp.net c#

#3

顶！

#4

再顶

#5

顶

#6

function alai_imagelist()
{
try{
var item=[]
count=0
this.path="" //路径的根目录
this.type="gif"   //默认文件类型
this.err=""   
iml=this    //得到本对象的引用 
this.copywrite="Copywrite by Alai(赖国欣) (c)2003，All right reserved!"
this.add=function(src,key)
{
var img=new Image()
if(src==null || src=="")return   //若src为空则返回
if(src.indexOf("/")==-1)src=iml.path+src //若我相对路径则加上根目录
if(!(/\.gif$|\.jpg$|\.png$|\.bmp$/i).test(src))src+="."+iml.type  //判断图片文件是否加后缀名
if(key==null || key=="")key=src.replace(/(.*\/){0,}([^\.]+).*/ig,"$2") //得到文件名不含后缀
item[count]=img;img.index=count;item[key]=img;count++;//为数组添加一项img，img.index标识顺序，并用key关联数组对应项
img.onerror=function()
{
alert("alai_imagelist cause run time error:\nImage file "+img.src+" not found!")
item[img.index]=null;item[key]=null;count--;//若文件不存在，则弹出提示并回滚
}
img.src=src//设置图片地址
return img
}
this.item=item //设置item属性
this.count=function(){return count;} //设置count方法，和上句的区别是返回值不让更改
}
catch(e){
iml.err="alai_imagelist cause run time error!\nError number:"+e.number+".\nError description:"+e.description;
iml.err+="\n    -- \nYou can send the case and error description message to [e-mail] for support.Please visit http://www.9499.net to get the last release!"
alert(iml.err);
return iml;
}
}

#7

function alai_tree(imageList,indent,toObject,labelStyle)
{
try{
if(!document.getElementById){throw new Error(999,"Your browser dosen't support Alai_tree(),IE5.0+ is recommended.");}//测试浏览器版本
var count=0,depth=0,nodes=[],tree=this
this.copywrite="Copywrite by Alai(赖国欣) (c)2003，All right reserved!"
this.err=""
imageList=imageList==null?new alai_imagelist():imageList//若imageList为空则新建一个imageList
var icons=imageList.item
this.imageList=imageList
if(icons["default"]!=null){if(icons["link"]==null)icons["link"]=icons["default"]}//若default为不为空，而link为空则link=default
var showExpand=icons["expand"]!=null && icons["collapse"]!=null//若展开和合拢存在则返回true
if(showExpand)
{ if(icons["expand_top"]==null)icons["expand_top"]=icons["expand"]
if(icons["expand_end"]==null)icons["expand_end"]=icons["expand"]
if(icons["collapse_top"]==null)icons["collapse_top"]=icons["collapse"]
if(icons["collapse_end"]==null)icons["collapse_end"]=icons["collapse"]//对可能没定义的一些变量定义
}
var showBranch=icons["leaf"]!=null && icons["twig"]!=null//显示树叶节点和末稍节点
var showLine=icons["line"]!=null && icons["blank"]!=null//用于画目录树支干连线
var root={}
root.children=[]
root.expanded=true;
root.getTier=function(){return 0;}//返回节点在树中的层
var selectedNode=null,activeNode=null;//定义选中节点和激活节点
Array.prototype.remove=function(index){if(index<0 || index>=this.length)return;for(var i=index;i<this.length;i++)this[i]=this[i+1];this.length--;}//为Array增加remove属性
Array.prototype.indexOf=function(elm){for(var i=0;i<this.length;i++)if(elm==this[i])return i;return -1;}//为Array增加indexOf属性
var setExIcon=function(srcNode)
{ if(srcNode.hasChild && showExpand)
{ var sEx=srcNode.next==null?"_end":"";//判断是否为最后一个节点
if(srcNode==nodes[0])sEx="_top";//判断是否为第一个节点
srcNode.exIcon.src=srcNode.expanded?icons["collapse"+sEx].src:icons["expand"+sEx].src;//取得src
srcNode.icon.style.marginLeft=0;//图片左边距
}
else
{ if(showBranch){srcNode.exIcon.src=srcNode.next==null?icons["twig"].src:icons["leaf"].src}
else if(showExpand){srcNode.icon.style.marginLeft=icons["expand"].width}//若无子节点且不显示树叶节点和末稍节点的图标
}
}
var setLine=function(srcNode,idx)//用递归函数实现setline
{ if(srcNode.hasChild){for(var i=0;i<srcNode.children.length;i++){srcNode.children[i].lineIcon[idx].src=icons["line"].src;setLine(srcNode.children[i],idx)}}
}
var doSelect=function(srcNode)
{ if(selectedNode!=null){selectedNode.label.style.background="";selectedNode.label.style.color="black";}
srcNode.label.style.background="highlight";srcNode.label.style.color="highlighttext";
selectedNode=srcNode
}
var doFocus=function(srcNode)
{ if(srcNode==selectedNode){srcNode.label.style.background="highlight";srcNode.label.style.color="highlighttext";}
activeNode=srcNode
}
var doBlur=function(srcNode)
{ if(srcNode==selectedNode){srcNode.label.style.background="buttonface";srcNode.label.style.color="windowtext";}
activeNode=null
}
var run=function(cmd,a0,a1,a2)
{
if(typeof(cmd)=="string")
{ try{return eval(cmd);}
catch(E){alert("run script string error:\n"+cmd);}
}
else if(typeof(cmd)=="function"){return cmd(a0,a1,a2);}
}
var doKeyDown=function(srcNode)
{ event.returnValue=false;
switch(event.keyCode)
{ case 38://向上箭头
if(srcNode.prev==null){if(srcNode.parent!=root){srcNode.parent.focus();srcNode.parent.select();}}
else{var node=srcNode.prev;
while(true){if(!node.hasChild || !node.expanded)break;node=node.last;}//若存在前一个结点则定位到最下一个孙子节点 
node.focus();node.select();}
break;
case 40://向下箭头  
if(srcNode.first!=null && srcNode.expanded)//srcNode.first 第一个子节点
{srcNode.first.focus();srcNode.first.select();}
else{var node=srcNode;
while(true){if(node.next!=null || node.parent==root)break;node=node.parent}//若下一个节点为空或父节点不为根，定位到父节点
if(node.next!=null){node.next.focus();node.next.select();}}
break;
case 189: ;case 109: ;case 37: srcNode.expand(false);break;//189 -  _ 109－（小键盘） 37向左箭头
case 107: ;case 187: ;case 39: srcNode.expand(true);break;//187 + = 107+(小键盘）39向右箭头
case 13: srcNode.click();break;//Enter
case 27: srcNode.blur();break;//esc
}
}

#8

var addNode=function(toNode,relation,text,key,ico,exeCategory,exeArg)//key关联数组的索引名
{
var node={}
var nbody=document.createElement("span")
var container=document.createElement("div")
container.insertAdjacentElement("afterBegin",nbody)
var tier
if(relation==null)relation="last"
if(toNode==root && (relation!="first" && relation!="last"))relation="last"
relation=relation.toLowerCase()
node.first=node.last=node.next=node.prev=null
switch(relation)
{ case "first":
tier=toNode.getTier()+1
if(toNode.hasChild){toNode.children[0].container.insertAdjacentElement("beforeBegin",container);}
else {toNode.container.insertAdjacentElement("beforeEnd",container)}
node.parent=toNode
toNode.children[toNode.children.length]=node
if(toNode.hasChild){node.next=toNode.first;toNode.first.prev=node;toNode.first=node;}
else{toNode.first=toNode.last=node;}
break;
case "next":
tier=toNode.getTier()
toNode.container.insertAdjacentElement("afterEnd",container)
node.parent=toNode.parent
toNode.parent.children[toNode.parent.children.length]=node
if(toNode.next==null)node.parent.last=node
node.next=toNode.next;node.prev=toNode;toNode.next=node;
break;
case "prev":
tier=toNode.getTier()
toNode.container.insertAdjacentElement("beforeBegin",container)
node.parent=toNode.parent
toNode.parent.children[toNode.parent.children.length]=node
if(toNode.prev==null)node.parent.first=node
node.prev=toNode.prev;node.next=toNode;toNode.prev=node
break;
default:
tier=toNode.getTier()+1
toNode.children[toNode.children.length]=node
var o=toNode==root?tree.body:toNode.container
o.insertAdjacentElement("beforeEnd",container)
node.parent=toNode
if(toNode.hasChild){node.prev=toNode.last;toNode.last.next=node;toNode.last=node;}
else{toNode.first=toNode.last=node;}
}
node.parent.hasChild=true
if(depth<tier)depth=tier;
var label=document.createElement("span")
container.style.cssText="margin:0px;padding:0px;white-space:nowrap;"
with(nbody)
{ insertAdjacentElement("beforeEnd",label)
style.cssText="cursor:default;text-align:left;color:black;font-size:10pt;margin:0;"
style.display=node.parent.expanded?"block":"none" //属性设定为 "block"(显示)或 "none"(隐藏)
indent=indent>=0?indent:16;nbody.style.textIndent=indent*(tier-1)//设置缩进
}
var icon=new Image()//定义label前的图标
ico=ico==null||ico==""?"default":ico
if(typeof(ico)=="string")if(ico.toLowerCase().indexOf(".gif")!=-1 || ico.toLowerCase().indexOf(".jpg")!=-1){ico=imageList.add(ico).index;}
if(icons[ico]!=null)
{ icon.src=icons[ico].src
nbody.insertAdjacentElement("afterBegin",icon)
}
label.innerHTML=text
label.style.cssText=labelStyle!=null?labelStyle:"padding:1;margin-left:2;vertical-align:middle;text-align:left;"
with(label)
{
onclick=function(){run(node.select);if(run(node.onclick))if(run(tree.onclick,node))run(node.execute);}
ondblclick=function(){if(run(node.ondblclick))run(tree.ondblclick,node)}
onmouseover=function(){if(event.fromElement!=node.icon)if(run(node.onmouseover))run(tree.onmouseover,node)}
onmouseout=function(){if(event.toElement!=node.icon)if(run(node.onmouseout))run(tree.onmouseout,node);}
onmousemove=function(){if(run(node.onmousemove))run(tree.onmousemove,node)}
onmousedown=function(){if(run(node.onmousedown))run(tree.onmousedown,node)}
onmouseup=function(){if(run(node.onmouseup))run(tree.onmouseup,node)}
onkeypress=function(){if(run(node.onkeypress))run(tree.onkeypress,node)}
onkeydown=function(){if(run(node.onkeydown)){if(run(tree.onkeydown,node))doKeyDown(node);}}
onkeyup=function(){if(run(node.onkeyup))run(tree.onkeyup,node)}
onfocus=function(){if(run(node.onfocus)){if(run(tree.onfocus,node))doFocus(node);}}
onblur=function(){if(run(node.onblur)){if(run(tree.onblur,node))doBlur(node);}}
}
with(icon)
{
onclick=function(){run(node.select);if(run(node.onclick))if(run(tree.onclick,node))run(node.execute);}
ondblclick=function(){if(run(node.ondblclick))run(tree.ondblclick,node)}
onmouseover=function(){if(event.fromElement!=node.label)if(run(node.onmouseover))run(tree.onmouseover,node)}//将原代码的event.fromElement!=node.icon改为event.fromElement!=node.label
onmouseout=function(){if(event.toElement!=node.label)if(run(node.onmouseout))run(tree.onmouseout,node);}//将原代码的event.toElement!=node.icon改为event.toElement!=node.label
onmousemove=function(){if(run(node.onmousemove))run(tree.onmousemove,node)}
onmousedown=function(){if(run(node.onmousedown))run(tree.onmousedown,node)}
onmouseup=function(){if(run(node.onmouseup))run(tree.onmouseup,node)}
onkeypress=function(){if(run(node.onkeypress))run(tree.onkeypress,node)}
onkeydown=function(){if(run(node.onkeydown)){if(run(tree.onkeydown,node))doKeyDown(node);}}
onkeyup=function(){if(run(node.onkeyup))run(tree.onkeyup,node)}
onfocus=function(){if(run(node.onfocus)){if(run(tree.onfocus,node))doFocus(node);}}
onblur=function(){if(run(node.onblur)){if(run(tree.onblur,node))doBlur(node);}}
}
nbody.onblur=function(){if(node.onfocus()){if(tree.onfocus(node))doFocus(node);}}
nbody.onfocus=function(){if(node.onblur()){if(tree.onblur(node))doBlur(node);}}
icon.tabIndex=label.tabIndex=1;icon.hideFocus=true;//让tab键失效，不表明图片的焦点状态
node.onclick=node.ondblclick=node.onmouseover=node.onmouseout=node.onmousemove=node.onmousedown=node.onmouseup=node.onkeypress=node.onkeydown=node.onkeyup=node.oncollapse=node.onexpand=node.onfocus=node.onblur=node.onselect=new Function("return true");
node.click=function(){node.label.click();}
node.focus=function(){node.label.focus();}
node.blur=function(){node.icon.blur();node.label.blur();}
node.select=function(){if(node.onselect()){if(tree.onselect(node))doSelect(node);}}
node.body=nbody
node.container=container
node.exIcon=null
if(showBranch){node.exIcon=new Image();nbody.insertAdjacentElement("afterBegin",node.exIcon);}
node.lineIcon=[]
if(showLine)
{ for(var i=tier-2;i>=0;i--){var img=new Image();img.src=icons["blank"].src;nbody.insertAdjacentElement("afterBegin",img);node.lineIcon[i]=img;}
if(node.prev!=null)setLine(node.prev,tier-1)
var n=node.parent;var i=tier-2;while(n!=root){if(n.next!=null)node.lineIcon[i].src=icons["line"].src;n=n.parent;i--}
}
if(showBranch){setExIcon(node);if(node.prev!=null)setExIcon(node.prev);if(node.next!=null)setExIcon(node.next);}//新节点的插入可能影响原节点的位置从而要对可能受影响的前后节点重新设置
var ma=node.parent;
if(ma!=root)//为父节点增加点击展开图标的展开方法
{
if(ma.exIcon==null && showExpand)
{
ma.exIcon=new Image();
var o=ma.icon.src==""?ma.label:ma.icon;
o.insertAdjacentElement("beforeBegin",ma.exIcon);
}
setExIcon(ma);
if(ma.exIcon)
{
ma.exIcon.onmousedown=function(){ma.expand();}
}
}

#9

树比较复杂，动态加载使用ajax技术可以实现

#10

http://community.csdn.net//Tree/tree.htm 查看源码，下载相应JS

#11

http://esbase.com/downloads/lesson/treeview/

#12

这个就是你要的！

http://webfx.eae.net/dhtml/xtree/demo.html