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

解决方案 »

  1.   

    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 [email protected] for support.Please visit http://www.9499.net to get the last release!"
    alert(iml.err);
    return iml;
    }
    }
      

  2.   

    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
    }
    }
      

  3.   

    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();}
    }
    }
      

  4.   

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

  5.   

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

  6.   

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

  7.   

    这个就是你要的!http://webfx.eae.net/dhtml/xtree/demo.html